前回の記事でSEO対策として「WordPressのサイドバーに表示されるウィジェットのタイトルを「h2」タグから他のタグ（例えば「p」タグ）へ変更する方法」を掲載したのだが、少しばかりウィジェットのタイトルに飾りがあった方が見栄えが良いかな～っと思い、青色の横線を入れてい見ました。
これに関しては色々なサイトでスタイルシートの定義方法を参考にされると多数の記事があるので、色々な装飾方法があることが分かると思います。
今回は当サイトでスタイルシートに定義した内容について説明しようと思います。HTMLとCSSの知識があれば物凄く簡単にできてしまいます。それでは本サイトでの実例で説明させてい頂きたいと思います。
スタイルシートでウィジェットのタイトルを装飾する方法
これは子テーマのスタイルシート「style.css」に定義すれば良いだけです。本サイトでは次のように定義を追加しました。
/* ウィジェット装飾 */
p.widget-title {
text-shadow: 1px 1px 0 rgba(0,0,0,.2);
padding: 10px;
margin-bottom: 10px;
border-bottom: 2px solid #1F5E73;
}
こんな感じで定義してみました。「h2」タグから「p」タグへ変更したので上記のように「p.widget-title」となっていますが、変更していない場合は「h2.widget-title」となります。「widget-title」がクラス名です。これはカスタマイズをしていない限り、標準のWordPressではこのクラス名が付けられています。
「text-shadow」は意外と使える
これは文字に影を入れるための定義となります。やりすぎは見づらくなりますが、若干入れると文字が際立つようになります。サイドバーウィジェットのタイトル文字なので敢えて少しばかり際立つように影を入れてみました。ボールドで協調する方法もあるのですが、こっちの方がお洒落な感じかな？っと思い。これを利用してみました。
「border」の使い方には色々あります
今回、本サイトでは青い下線のみの定義としましたが、例えば枠を囲う事も可能ですし、四角で囲った場合に角に丸みを持たせることも可能です。また線のスタイルも破線などもしていすることが可能です。本サイトでは詳しく説明はいたしませんが、HTMLやCSSの事を専門に説明しているサイトを参考にされると良いと思います。枠を囲うことは「div」だけではありませんよ。「ｐ」タグでも可能です。
あとは「padding」「margin」を適切に定義することで、表示位置調整が微妙に変わってきますので要注意です。
【A8.netに登録しよう！】
◇ 広告主数・アフィリエイトサービス数日本最大級☆
◇ 登録はもちろん無料、審査なしのアフィリエイトサービス☆
◇ 使いやすいサイトNO.1
⇒アフィリエイトならA8.net
