【WordPress】Simplicity2の見出しをCSSでカスタマイズ

【WordPress】Simplicity2の見出しをCSSでカスタマイズ

WordPressのテーマ「Simplicity2」の見出しをカスタマイズする方法をご紹介します。

Simplicity2はSEOにも強く、デザイン性やカスタマイズ性にも優れているので、人気があり利用者が多いテーマの一つです。

そのまま使ってもカッコいいデザインなのですが、自分好みにカスタマイズするのもいいですね。

 

Simplicity2のダウンロード

親テーマと子テーマをダウンロード

Simplicity2のダウンロードは以下で行います。

Simplicity2のテーマを使う場合は、必ず子テーマも一緒にダウンロードして下さい。

Simplicity2をダウンロード

子テーマをダウンロードする理由

別の記事でも書いていますが、親テーマのスタイルシート「style.css」にカスタマイズしていると、親テーマがバージョンアップされた場合は、今までのカスタマイズが全て水の泡になってしまいます。

そこで親テーマがバージョンアップされても、カスタマイズの内容を残すために子テーマの「style.css」を使います。

 

子テーマのスタイルシートをカスタマイズ

見出しのデザインなどテーマデザインのカスタマイズは、子テーマの「style.css」を使います。

子テーマの「style.css」を開く

ダッシュボードから「テーマの編集」へ進みます。

そこで「Simplicity2 child」を選択してスタイルシートを書いていきます。

 

見出しのサンプルCSSを探す

見出しのCSSは色んなサイトで配布されていますが、僕のサイトでもコピペで使えるCSSを紹介していますので参考にして下さい。

 

 

見出しのサンプルCSSをコピペする

今回は、以下の見出しにする場合のCSSの書き方を紹介します。

子テーマの「Simplicity2 child」の「style.css」に書きます。

以下のCSSをコピペすると、上記の見出しになります。

Simplicity2の場合は「h2」の前に「.article」を入れることがポイントです。

 

見出しのサンプルCSS以下のページから見出しのサンプルを探すことができますので、是非ご利用下さい。

シンプルな見出しサンプル

囲い枠の見出しサンプル

おしゃれな見出しサンプル

 

まとめ

Simplicity2はカスタマイズ性があり自分好みのデザインに変更することができます。

見出しに限らず、色んなデザインを変更できますので、これから紹介していきます。

 

この記事が気に入ったら
いいね ! しよう

Simplicity2カテゴリの最新記事