WordPress テーマ「Simplicity2」の見出し簡単カスタマイズ方法

WordPressには、たくさん素敵なテーマがありますよね。テーマをインストールするだけで、見栄えがグッと良くなります。

でも、人気のあるテーマだと他の人も使っているので、自サイトにオリジナリティがなくなってきます。

簡単にオリジナリティを出すために、見出しのデザインだけでもカスタムしてみましょう。

私が利用してるSimplicity2のテーマについて説明します。

見出しカスタマイズの流れ

見出しをカスタマイズするのはとても簡単です。

・子テーマのインストール(初回のみ)
・子テーマのスタイルシートを編集

以上です。簡単ですね!

では早速。(子テーマのインストールが済んでいる方は、スタイルシートの編集へ)

子テーマのインストール

子テーマのダウンロード

simplicity2の子テーマダウンロードページ

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

ファイルをダウンロードしたら、テーマを追加しましょう。

子テーマの追加

サイドメニューの[外観] > [テーマ]をクリック

161031-0001

[新規追加]をクリック

161031-0002

[テーマのアップロード]をクリック

161031-0007

ダウンロードした子テーマのzipファイルをドラッグ&ドロップもしくは選択し、
[今すぐインストール]をクリック

161031-0005

インストールに成功したら、[有効化]をクリック

161031-0006

これでインストールは完了です。

さぁいよいよ見出しのカスタマイズになります。

子テーマのスタイルシートを編集

[テーマの編集]をクリック

161031-0010

上のスペースに、見出しをカスタマイズするコードを記載します。

私が以前適用していた見出しだと以下のようなコードになります。シンプルなデザインです。

.article h3{
  font-size:23px;
  border-top:1px dotted #ccc;     //上のドット線
  border-right:1px dotted #ccc;   //右のドット線
  border-left:7px solid #e7e7e7;  //左の太線  
  border-bottom:1px dotted #ccc;  //下のドット線
  padding:.8em .9em;
}

.article h4{
  font-size:20px;
  border-top:1px dotted #ccc;     //上のドット線
  border-right:1px dotted #ccc;   //右のドット線
  border-left:7px double #e7e7e7; //左の二重線    
  border-bottom:1px dotted #ccc;  //下のドット線
  padding:.8em .9em;
}

コードを貼り付けたら、[ファイルを更新]をクリックすれば終了です。
161031-0009

ビジュアルエディターの見た目も統一する

ビジュアルエディターでプラグインTinyMCE Advancedを用いて記事を書いている方も多いかと思います。

この際、ビジュアルエディターの見た目も同じデザインにしましょう。

ビジュアルエディターのスタイルシート(editor-style.css)を編集します。

先ほどのstyle.cssに記載したCSSコードをコピペして

[.article]部分を[body#tinymce.wp-editor]に変更すれば完了です。

デザイン参考サイト

おしゃれな見出しデザインのCSSコードが書かれています。私も以下のサイトを参考にさせていただきました。

見出しのデザインをCSS(スタイルシート)で変更する方法 | WPナビ
WordPressのインストール時のテーマで見出しタグを使うと、装飾のないシンプルな見出しが表示されます。ブログによってはシンプルなデザインのほうが見やすくて重宝するのですが、もう少し目立たせたい場合やインパクトを与えたい場合はスタイルシート(CSS)に記述することでデザインを変更することができます。
H1一つでここまで出来るCSS見出しデザインのアイデア9個 / SQUEEZE - Web Design Studio -
CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選
h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。

その他

スタイルシートを更新しても、キャッシュが残っていると変更が見れない場合があります。

PCのChromeブラウザの場合、[その他のツール]→[デベロッパー ツール]を選択してから、更新マークを長押しし、[キャッシュの消去とハード再読み込み]を選択すれば、スタイルシートの変更が適用されて見えるようになると思います。

おわりに

見出しのデザイン変更って意外に簡単ではないでしょうか。
参考サイトのコードをコピーして貼り付けるだけでがらりと印象を変えることができます。

是非チャレンジしてみてください!

スポンサーリンク
レクタングル(大)
レクタングル(大)

フォローする