【Simplicity2】投稿の見出しを変える方法

私の使用しているWordPressのテーマ「Simplicity2」のデザインカスタム、投稿見出しを変更する方法です。

「Simplicity2」は、カスタマイズのしやすいようにデフォルトのデザインはとてもシンプルになっており、投稿の見出しもとてもシンプルなものです。

そこで、今回は簡単に見出しを変える方法をご紹介します。




投稿の見出しってどれのこと?

↑これのことです!

こちらは、すでに装飾を行った後のデザインになりますので今回の完成イメージは上の見出しです。

Simplicity2のデフォルトの見出し

ちなみに、こちらが「Simplicity2」のデフォルトの見出し(<h2>)になります。

左側に縦線が入っているだけのシンプルなデザインです。

※h3~h6は違ったデザインですが、やはりどれもシンプルなものになってます。

投稿の見出しを変える

投稿の見出しを変える

操作手順

では、さっそく「投稿の見出し」を変えていきましょう。

手順はとても簡単です!

外観→テーマの編集を選択してください

まずは、WordPressの「ダッシュボード」を開き、「外観」→「テーマの編集」を選択してください。

スタイルシート(style.css)を選択してください

各種ファイルを編集できる画面が表示されますので、右側にある「スタイルシート(style.css)」を選択してください。

あとは、上記のCSSコードを編集画面に追記して、「ファイルを更新」を選択すれば完了です。

色を変更したいとき

見出しの色を変更したいときは

  • 背景色 → background: #ed6d35;
  • 文字色 → color: #fff;(※線の色も変わります)

太字の部分を変更すれば色を変更することができます。

色は、「カラーコード」で指定する必要があります。

こちらのサイトを参考にするとよいです。

WEB色見本 原色大辞典

WEB色見本 原色大辞典

h3~h6を変更したいとき

h3~h6の見出しを変更したい場合は、CSSコードの「h2」の部分を変更したい見出しに変更すればOKです。

注意

「#the-content」必ず付けてください。

CSSコードを丸っとコピーした場合は大丈夫ですが、「#the-content」がないと本文以外の部分も見出しが変更されてしまいます。

また、確認の際にCSSコードを追記したにもかかわらず変更されない場合は、Webブラウザの「スーパーリロード」を行ってください。

  • Windows → Ctrl + F5
  • Mac → command + shift + r

でできます。

その他の見出しデザイン

その他の見出しデザイン

今回紹介したデザインの他にもたくさんの見出しのデザインがあります。

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選-サルワカ

シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50-NxWorld

コピペで使える!CSSでシンプルな見出しデザイン-Yuru Wrap

スタイルシートで作る見出しデザイン気に入ったデザインスタイルをコピペで利用-Web技術指南書

このあたりのサイトを参考に自分好みのデザインを探してみてください。

まとめ

Simplicity2」カスタムデザイン投稿の見出しを変える方法でした。

ダッシュボードからCSSを追加するだけですので、とても簡単に変更することができます

自分好みの見出しに変更して自分だけのサイトを作り上げてみてください!

スポンサーリンク







シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク