雑記

【雑記】テキストウィジェットのタイトルをカスタマイズ【WordPress】

雑記

いきなりで恐縮なんですが、ブログランキングに登録したんですよ

さっそく【外観】→【ウィジェット】の【投稿本文下】に【テキスト】を設置し、ブログランキングのバナーを貼ってみたものの…

う~ん、そのままだといまいち。

当然、タイトルのブログランキングに参加中!を装飾したいんですが、”ウィジェット テキスト タイトル CSS”などでググれども、なかなか答えにたどり着けず。

自力でクラス名を探す方法

なかなか答えにはたどり着かなかったんですが、自力でクラス名を探す方法にはたどり着きました。

おなじみ、サルワカさんのサイトですね。

要は、ソースを調べたいところにマウスを置き、右クリックから【検証】を選択するというもの。ということで、さっそく試してみました。

色の違うところが、今まさに調べたいテキストウィジェットのタイトルクラス。こんな簡単に分かるものなんですね。今までの苦労はなんだったんだ…。

CSSのソース

先に調べた通り、”widget-single-content-bottom-title”をちゃちゃっと軽く装飾。

簡単ですが、とりあえずこれでOKでしょう。CSSのソースは以下の通り。

.widget-single-content-bottom-title {
  font-size: 1.1em;
  font-weight: bold;
  border-bottom: 1px solid #000000;
  margin-top: 1em;
  margin-bottom: 1em;
  padding-left: 0.1em;
}

タイトルの装飾に困ったら、とりあえずborder-bottom: 1px solid #000000を使っておけば間違いないですね。万能です。

余談:Highlighing Code BlockとCocoonのハイライト機能

上記のCSSコードは【Highlighing Code Block】というWordPress専用プラグインを使いハイライト表示しているんですが、Cocoonにもデフォルトで<pre>に囲まれたテキストをハイライトする機能があります。

この2つの機能が干渉し合うと…

足して2で割ったような表示に。

まぁ、これでも見づらくはないんですけど、Highlighing Code Blockを使うなら【Cocoon設定】→【コード】のタブにある

この2項目のチェックを外しておく方がいいと思います。