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

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

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

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





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



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



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



今回は次のようにカスタマイズしました。

• コンテンツ内のテキストのアンカーにはアンダーラインを引く
• 画像はアンダーラインを引かない
• 「続きを読む」にはアンダーラインを引かず Hover でアンダーラインを出す
• フッターの Autohr や カテゴリにはアンダーラインを引かない

ということをやることにしました。

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


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


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


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


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


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

WordPress 関連のエントリ

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

プラグイン

バージョンアップ

カスタマイズ

Stinger 3関連

チューニング

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

開発関連

---

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

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


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

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