【Simplicity2カスタマイズ⑤】見出しタグとサイドバーと関連記事見出しの装飾を変更する方法

Simplicity2カスタマイズ⑤ WordPress

前回に引き続き、Simplicity2でブログをカスタマイズしていきます!

 

今回行うカスタマイズは次の2点です。

  • 見出しタグの変更
  • サイドバーと関連記事の見出しの装飾

 

やり方は前回までと同様、Simplicity2の子テーマのスタイルシート(style.css)にコードを追加するだけですので、いたって簡単です♪

 

それでは早速やってみましょう!

 

見出しタグ(h2とh3)を変更しよう!

まずは記事の中で使われる見出しタグ(h2とh3)を変更してみましょう。

 

変更前と変更後で↓のように変わります。

Simplicity2_カスタマイズ⑤01

 

変更前はなんだか寂しい感じですが、変更後は見出しに色がついて目立つようになりました。

この方が記事の内容の塊が見た目でわかりやすくなるので、読みやすくなると思います。

 

見出しタグ(h2)を変更するには、Simplicity2の子テーマのスタイルシート(style.css)に次のコードを追加してください。

/* 見出しタグの変更(h2) */
.article h2 {
    background-color: #57B196;
    border-left: 0 none;
    color: #fff;
    padding: 15px 30px;
}

 3行目の「background-color:#○○」の○○を変えることで、背景の色を変更することができますので、好みの色にしましょう。

また、5行目の「color:#○○」の○○を変えると文字の色を変更することができます。

 

見出しタグ(h3)を変更するには次のコードを追加してください。

/* 見出しタグの変更(h3) */
.article h3 {
  font-size:23px;
  border-bottom:5px solid #57B196;
  padding:10px 0;
}

 

なお、こちらで紹介しているh2タグは、Simplicity2作成者のわいひらさんが使用されている見出しを使わせていただいています。

参考 わいひらさんが使用している見出しタグについて -Simplicity公式サイト-

 

サイドバーと関連記事の見出しの装飾を変更しよう!

続いて、サイドバーと関連記事の見出しの装飾を変更してみます。

 

サイドバーの見出しの装飾

まずはサイドバーの見出しの装飾です。

サイドバーの「人気の記事TOP10」や「プロフィール」、「カテゴリー」などの見出しを↓のように変更します。

 

シンプルにアンダーラインを引いています。

Simplicity2_カスタマイズ⑤02

 

変更するには、次のコードを追加します。

/* サイドバーの見出しの装飾 */
#sidebar h3 {
  font-size:20px;
  border-bottom:5px solid #57b196;
  padding:10px 0;
}

3行目の「font-size:○○px;」の○○(数字)を変えることで、文字のサイズを変更することができます。

また、 4行目の「#○○」の○○を変更すれば色を変えることができますので、好みの色にしてください。

 

関連記事の見出しの装飾

続いて関連記事の見出しを装飾します。

 

サイドバーの見出しと同じように、アンダーラインを引くだけです。

Simplicity2_カスタマイズ⑤03

 

関連記事の見出しの装飾を変更するには、次のコードを追加してください。

/* 関連記事の見出しの装飾 */
#related-entries h2{
  font-size:20px;
  border-bottom:5px solid #57B196;
  padding:10px 0;
}

 こちらも任意に文字のサイズと色を変えて使ってください。

 

まとめ

今回も簡単にできるカスタマイズを紹介しました。

見出しをほんの少し変えるだけで、だいぶ見た目が変わったと思います。

 

次回も簡単にできるカスタマイズを紹介したいと思います。

次回はグローバルナビをカスタマイズする方法について解説します。

【Simplicity2カスタマイズ⑥】グローバルナビをカスタマイズする方法
WordPressのテーマ「Simplicity2」をカスタマイズする方法について、今回はグローバルナビをカスタマイズする方法をご紹介します。 具体的には次の点をカスタマイズしていきます。 グローバルナビの背景色の変更 グ...

 

当ブログで行ったカスタマイズのまとめはこちら↓

【Simplicity2カスタマイズ】WordPress初心者が行った6つの方法【まとめ】
WordPressテーマ『Simplicity2』を愛用している私が行ったカスタマイズ方法をまとめて紹介します!WordPress初心者でも簡単にできるカスタマイズばかりですよ♪

コメント