Blog

[WP] CSSでアンカーのアンダーラインを整理する

WordPress で運用を始めたは良いもの、テーマの細かいところがまだ調整できていません。アンカーにはアンダーラインを書きたいけれど画像にはアンダーラインを出したくない、など色々と微調整をしたくなります。

特に画像の下に意味もなくアンダーラインがでると、さすがに直したくなります。

調整は子テーマの CSS でスタイルを上書きしていくのですが、親テーマ側で色々と指定されているのでどのように子テーマ側で上書きすれば良いか迷うことが多々あると思います。

そんな時に威力を発揮するのが Chrome のデベロッパーツールです。


Style 001


デベロッパーツールは Chrome のメニューから起動します。
Style 004


このツールを起動するとブラウザの下半分にデバッグ用の領域が出てきます。ここの領域で、Elements というボタンを選択すると Chrome で表示しているページの HTML の構造が表示されるので、そこをドリルダウンしていって自分が変えたいと思っているエレメントを選択します。
Style 002


そうすると右のペインに、そのエレメントに適用されているスタイルが表示されますので、適用されて欲しくないスタイルを探して、それを上書きするようにスタイルを設定するだけです。
Style 003


今回は次のようにカスタマイズしました。
  • コンテンツ内のテキストのアンカーにはアンダーラインを引く
  • 画像はアンダーラインを引かない
  • 「続きを読む」にはアンダーラインを引かず Hover でアンダーラインを出す
  • フッターの Autohr や カテゴリにはアンダーラインを引かない
ということをやることにしました。

元々のテーマ BirdTips ではアンダーラインを Border-bottom で引いていましたので、Border-bottom ではなくテキストの Underline を使うように書き換えました。今回の変更したスタイルの全体像はこうなりました。


元々のテーマでは、アンダーラインを border-bottom で設定していたので、まずはこれを 0px に設定してキャンセルします。


テキストのアンカーには下線を引きたいので underline を設定します。ここでセレクタは entry-content クラスを指定しておきます。こうすることで Widget などには影響させないようにします。


次にエントリのフッタ部分にあるアンカーには下線を引きたくないので、デコレーションを取り消します


同じように「続きを読む」のところは通常はアンダーラインを引かず、Hover した時にアンダーラインを引くように変えました。


これでアンカーの表示は少しはよくなりましたかね。
これからもちょこちょこといじっていこうと思います。

WordPress 関連のエントリ


インストールや設定変更とデータ移行




プラグイン




バージョンアップ




カスタマイズ





Stinger 3関連





チューニング





MAMPを使ったバックアップサイトの構築





開発関連







最後まで読んでいただきありがとうございます。

follow us in feedly 左のアイコンをクリックして、このブログを Feedly に登録していただけると嬉しいです


Facebook ページでも情報を発信していますのでよろしかったら「いいね!」をお願いします

RSSリーダへの登録は こちら からどうぞ。

URL
TBURL

コメントを残す

*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

フェイスブックでのコメント

Return Top