...

【WordPress】サイト内に設置したボタン(リンク)が押せない時に試してほしいこと

どうもおはようポテト(@ohayoupoteto22)です。

今回はタイトルの通り「サイト内に設置したボタン(リンク)が押せなくなった」時に自分が行った解決法をまとめてみました。

ブログ主

早速いってみよう!

ボタン(リンク)が押せない!?

経緯

このブログを開設し、色々な準備も終わり…さあ残すはプロフィール欄のカスタマイズだけになった時のこと。

CSSを書いて自分流にカスタマイズしてもよかったのですが、このブログは2つ目ということでまたカスタマイズするなんてダルすぎる…とは言え本家のブログと全く同じデザインにするのもなんか違うかなと…などと葛藤した挙句、

結局ネットで可愛いカスタマイズを調べて参考にすることにしました。

 

そこで参考にさせていただいたのがWeb-Ashibiさんの記事。

参考 【Cocoon】プロフィールボックスをSANGO風にカスタマイズWeb-Ashibi

とても素敵なカスタマイズをされてらっしゃいますよね。

 

そんなこんなでウチのプロフィール欄はこんな感じに。

かわゆす。

 

「ユーザー」→「あなたのプロフィール」をクリックした先にあるプロフィール情報の欄にaタグでリンク先を指定し、divタグで囲みボタン風に装飾しているわけですね

「モンストブログも運営してます」というボタンを押すとリンク先にとぶようになってます

ボタン(リンク)が押せなくなった

記事下のプロフィール欄のボタンはバッチリ!
押すと無事にページ遷移してくれます。

 

…しかし世の中そんな甘くない。甘いのはラノベのヒロインぐらい。

 

…あれ

サイドバーの方のボタンが押せない…

しかもホバーすらしない…

ブログ主

はわわ…

しかしこんなのはWordPressユーザーにとって日常茶飯事のこと。(震え声)

こんな状況今まで何度も遭遇してますからね。原因を見つけるなんてお茶の子さいさいですよ。

「非常事態ってやつも歓迎です」ってやつです。

一級フラグ建築士…

ソロモン

原因は〇〇だった

推測した原因

思いついた原因として

aタグがおかしなことになってる

サイドバーの方のCSSが悪さしてる

これぐらいしか思いつきませんでした。

aタグは犯人じゃなかった

記事下のリンクのところのソースを見てみると

ふむふむ

 

…全く同じやん。゚(゚´ω`゚)゚。

 

ブログ主

まあ当たり前なんだけどね

ということでCSSが恐らく原因だろうと思い、両者のCSSの差異をくまなく調べました

もう血眼になって調べましたよ。それはもう本当に。今期の大好きなアニメを観るのを放棄するほどに。

原因特定

そして遂に犯人を見つけました

.sidebar .author-box .author-name {
font-size: 1.1em;
font-weight: bold;
position: absolute;
margin-bottom: 0.4em;
top: 23px;
bottom: 0;
right: 0;
left: 0;
}

ボタンの親要素の

position: absolute;

position: absolute」。

もうね、不倶戴天の敵ですよ。

 

ブログ主

やっつけちゃいましょう
.sidebar .profilepage-link a{
position:relative;
}

aタグのpositionを「relative」にしてあげると…

 

無事押せるように!

 

やったー!しゃんなろー!

ソロモン

 

これで万事解決と。

「position: absolute」を指定することよって親要素が浮いてる様な状態になってたため、ボタン(リンク)が押せなかったんですね…

参考 CSS position: absolute;の指定でボタン画クリックできない!z-indexが効かない原因と解決方法ビバ☆りずむ

最後に

これを解決するために2時間ぐらい格闘してました…

まあたかがプロフィール欄のボタン一つにこだわりすぎたかもしれませんが、まあ「馬子にも衣装」ってことで少しでも凝っているに越したことは無いと。

参考になれば幸いです!では⸝⸝- ̫ -⸝⸝

参考になったらシェアしよう

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA