一連のSimplicityのカスタマイズ記事である。今回は、カスタマイズ記事の中でも上級編（？）の見出しタグと、サイドバーのタイトルのカスタマイズについてだ。
多分、僕がやった中では一番難しいもの。とは言っても、手順をつかめば簡単に出来たので、これから挑戦してみたいと思っている人は、躊躇せずにやってみてほしい。
見出しタグ(h2, h3, h4)のカスタマイズ
Simplicity標準の見出しタグは、とてもシンプル。これはこれで、本文の邪魔をしないといういい面もあるのだけれども、もう少しだけ洒落っ気を出したかったので、この度デザインを変更した。
Simplicity標準の見出しタグ
こちらがSimplicity標準の見出しタグ。とてもシンプル。
カスタマイズ後の見出しタグ
こちらが今回カスタマイズしたもの。デフォルトデザインから、もう少しだけ目立たせたかった思いと、本文の邪魔をさせたくなかった思いから、このようなデザインにした。
なお、見出しタグのデザインは以下のサイトのものを参考に、色や線の太さを変更した。
スタイルシートにCSSコードを追加
見出しタグや、この後説明するサイドメニューの見出しのカスタマイズには、「スタイルシート」にCSSコードを追加する。初心者には少しだけ敷居が高く感じてしまうが、「CSSってなんじゃらほい」状態だった僕でもできたので、怯まずにやってみてほしい。
なお、カスタマイズする際は、必ず子テーマを有効化させて、小テーマのスタイルシートにCSSを加えること。小テーマについてよくわからなければ、先ずは以下のSimplicityの公式のページをよく読んでほしい。
スタイルシートにCSSコードを追加する手順
WordPressダッシュボードの外観の中の「テーマを編集」をクリック。
Simplicityの小テーマを有効化してあれば、小テーマのスタイルシートがあると思うので、そこにコピーしたCSSコードをペーストして、ファイルを更新する。
今回追加した、それぞれのCSSコード
なお、今回僕が使用したデザインのCSSコードを説明すると、以下のような感じ。
h2タグ
見出し2は、少しばかり主張が強い気もするが、文字ばかりの僕のサイトなので、このくらいの方がいいかなとも思っている。
- background-colorの#以下を変更すれば、背景色が変更できる。
- colorの#以下を変更すれば、文字色を変更できる。
.article h2 {
background-color: #555555;
border-left: 0 none;
color: #fff;
padding: 15px 30px;}
h3タグ
見出し3は、単色で一直線に引いてしまうと、見にくくなる印象だったので、途中で色が変わる（僕の場合は薄くなる）仕様にした。
- border-bottom: 5pxの数値を変更すると、線の太さが変更できる。
- border-bottomの#以下の英数値を変更すると、線の後半の色が変更できる。（僕の場合は灰色の箇所）
- background-colorの#以下を変更すると、前半の線の色を変更できる。（僕の場合は黒に近い灰色の箇所）
.article h3 {
position: relative;
padding-bottom: .5em;
border-bottom: 5px solid #ccc;
}
.article h3::after {
position: absolute;
bottom: -4px;
left: 0;
z-index: 2;
content: ”;
width: 20%;
height: 4px;
background-color: #555555;
}
h4タグ
見出し4に関しては、実際のところほとんど使っていないのだが、一応変更した。h4までになると、僕の場合は、見出しというよりも、箇条書きみたいな使い方になるので、主張をあまりしないデザインにした。
- border-left: 5pxの数値を変更すると、左側の線の太さの変更ができる。
- #以下を変更すると、線の色が変更できる。
.article h4 {
border-left: 5px solid #555555;
border-bottom: 0px;
padding: 5px 0 5px 10px;
margin-bottom: 30px;
}
サイドバーのメニュータイトルのカスタマイズ
続いて、サイドバーのメニュータイトルのカスタマイズ。
こちらのついては、超シンプルに、赤系の色で下線を引いたのみのデザインにした。これだけでも引き締まった印象になった。
サイドバーのメニュータイトルのCSSコード
見出しタグ同様、こちらも小テーマのスタイルシートに、CSSコードを追加する。
Simplicityに関しては、サイドバーのメニュータイトルのタグはh3。（他のテーマだと、h4の場合が多いらしい）
- border-bottom:2pxの数値を変更すると、線の太さを調整できる。僕は元のデザインよりもかなり細めにした。（元デザインは5pxだったかも）
- #以下の英数値を変更すると、線の色を変更できる。僕は当サイトのイメージカラーの紅海老茶(#a73836)をチョイスした。
/*サイドメニュー見出し*/
#sidebar h3 {
border-bottom:2px solid #a73836;
padding:10px 0;
}
「ファイルの更新」をクリックして、完了。
終わりに
今回は、スタイルシートにCSSを追加という、少し上級なカスタマイズにも触れた。自分自身も、つい先日に初めてやったことなので、何も偉そうに書けるわけではないのだが、WordPress初心者で見出しタグやサイドバーのタイトルのカスタマイズに挑戦したい人がもしいれば、参考にしてもらえれば嬉しい。
なお、あくまで僕はCSSなどに関しては完全な素人なので（コードといえば、ギターのコードの方が得意だ）、万が一間違えていても保証することはできない。（申し訳ない）
ただ、もし何か不具合が出た際には、追加したCSSをとりあえず消してもらえれば元に戻ると思うので、そこまで怯まないでほしい。
あと、もし僕の記述が間違えていた場合、詳しい人は教えてくれれば幸いである。
コメント
[…] Simplicityの見出しタグと、サイドバーのタイトルをカスタマイズした […]