Simplicityの見出しタグと、サイドバーのタイトルをカスタマイズした

一連のSimplicityのカスタマイズ記事である。今回は、カスタマイズ記事の中でも上級編(?)の見出しタグと、サイドバーのタイトルのカスタマイズについてだ。

多分、僕がやった中では一番難しいもの。とは言っても、手順をつかめば簡単に出来たので、これから挑戦してみたいと思っている人は、躊躇せずにやってみてほしい。

見出しタグ(h2, h3, h4)のカスタマイズ

Simplicity標準の見出しタグは、とてもシンプル。これはこれで、本文の邪魔をしないといういい面もあるのだけれども、もう少しだけ洒落っ気を出したかったので、この度デザインを変更した。

Simplicity標準の見出しタグ

こちらがSimplicity標準の見出しタグ。とてもシンプル。

Simplicity標準の見出しタグはとてもシンプル。

カスタマイズ後の見出しタグ

こちらが今回カスタマイズしたもの。デフォルトデザインから、もう少しだけ目立たせたかった思いと、本文の邪魔をさせたくなかった思いから、このようなデザインにした。

カスタマイズ後の見出しタグ。お洒落になった。
なお、見出しタグのデザインは以下のサイトのものを参考に、色や線の太さを変更した。

h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。

スタイルシートにCSSコードを追加

見出しタグや、この後説明するサイドメニューの見出しのカスタマイズには、「スタイルシート」にCSSコードを追加する。初心者には少しだけ敷居が高く感じてしまうが、「CSSってなんじゃらほい」状態だった僕でもできたので、怯まずにやってみてほしい。

なお、カスタマイズする際は、必ず子テーマを有効化させて、小テーマのスタイルシートにCSSを加えること。小テーマについてよくわからなければ、先ずは以下のSimplicityの公式のページをよく読んでほしい。

テーマをカスタマイズするなら親テーマの直接編集はお勧めできません。というのも、ダウンロードページで配布しているテーマファイルを直接編集すると、アップデート時に編集下部分がが上書きされ、せっかくのカスタマイズが全て消えてしまいます。それを防ぐ

スタイルシートにCSSコードを追加する手順

WordPressダッシュボードの外観の中の「テーマを編集」をクリック。

WordPressダッシュボードの外観の「テーマの編集」を選択。

Simplicityの小テーマを有効化してあれば、小テーマのスタイルシートがあると思うので、そこにコピーしたCSSコードをペーストして、ファイルを更新する。

小テーマのスタイルシートにCSSコードを追加する

今回追加した、それぞれのCSSコード

なお、今回僕が使用したデザインのCSSコードを説明すると、以下のような感じ。

h2タグ

見出し2は、少しばかり主張が強い気もするが、文字ばかりの僕のサイトなので、このくらいの方がいいかなとも思っている。

  • background-colorの#以下を変更すれば、背景色が変更できる。
  • colorの#以下を変更すれば、文字色を変更できる。

.article h2 {
background-color: #555555;
border-left: 0 none;
color: #fff;
padding: 15px 30px;}


h3タグ

見出し3は、単色で一直線に引いてしまうと、見にくくなる印象だったので、途中で色が変わる(僕の場合は薄くなる)仕様にした。

見出しタグ3の見本とCSSコード。

  • 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までになると、僕の場合は、見出しというよりも、箇条書きみたいな使い方になるので、主張をあまりしないデザインにした。

見出しタグ4の見本とCSSコード

  • 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の場合が多いらしい)

サイドバーのメニュータイトルのCSS

  • border-bottom:2pxの数値を変更すると、線の太さを調整できる。僕は元のデザインよりもかなり細めにした。(元デザインは5pxだったかも)
  • #以下の英数値を変更すると、線の色を変更できる。僕は当サイトのイメージカラーの紅海老茶(#a73836)をチョイスした。

/*サイドメニュー見出し*/
#sidebar h3 {
border-bottom:2px solid #a73836;
padding:10px 0;
}


「ファイルの更新」をクリックして、完了。

終わりに

今回は、スタイルシートにCSSを追加という、少し上級なカスタマイズにも触れた。自分自身も、つい先日に初めてやったことなので、何も偉そうに書けるわけではないのだが、WordPress初心者で見出しタグやサイドバーのタイトルのカスタマイズに挑戦したい人がもしいれば、参考にしてもらえれば嬉しい。

なお、あくまで僕はCSSなどに関しては完全な素人なので(コードといえば、ギターのコードの方が得意だ)、万が一間違えていても保証することはできない。(申し訳ない)

ただ、もし何か不具合が出た際には、追加したCSSをとりあえず消してもらえれば元に戻ると思うので、そこまで怯まないでほしい。

あと、もし僕の記述が間違えていた場合、詳しい人は教えてくれれば幸いである。