ワードプレスの見出しデザインをおしゃれに変更してみた。

ワードプレスと手

ワードプレスに標準装備されている見出し機能。

日頃よく使っていますが、見出しの種類が1種類しかない為、そのデザインを変更したくなってきました。

そこで今回はワードプレスで標準搭載されている見出し機能のデザインをオシャレに変更してみたいと思います。

備忘録として見出しの変更方法を記載したいと思います。

尚、本ブログのテーマはシンプルイズベストなテーマで人気の「Simplicity2」を利用しています。

 

ワードプレスの見出し変更方法

見出し2テスト

まず、上記の見出しが標準状態の見出し2になります。

こちらをオシャレなデザインへ変更していきます。

 

 

外観からテーマの編集をクリック。

スクショ

 

テーマの編集画面が表示されます。

スクショ

 

見出しの編集を行う際にはこのスタイルシート部分にコードを入力します。

自らプログラミングコードから作成する必要はなく、ネット上には見出し職人さんが多数いらっしゃいますので、そちらの見出し紹介ページからコードを拝借しましょう!

今回は68種類も見出しのCSSコードを提供してくださっているサルワカさんのブログを参考にさせていただきます。

 

見出し職人の方々が様々なデザインの見出しのCSSコードを公開してくださってますので、選択したデザインのコードをコピー

 

今回選択したコードはこちら。

ここで注意点があります。

コードに記載されている二つの「h1」の文字。

これは見出し1を表しています。つまり、見出し2や3にデザインを適用したいのあれば、このh1をh2やh3に変更しなければいけません。

 

◆修正前

h1{
color: #505050;/*文字色*/
padding: 0.5em;/*文字周りの余白*/
display: inline-block;/*おまじない*/
line-height: 1.3;/*行高*/
background: #dbebf8;/*背景色*/
vertical-align: middle;/*上下中央*/
border-radius: 25px 0px 0px 25px;/*左側の角を丸く*/
}

h1:before {
content: '●';
color: white;
margin-right: 8px;
}

◆見出し2を変更したい場合の修正後 ※半角で数字を入力してください。

h2{
color: #505050;/*文字色*/
padding: 0.5em;/*文字周りの余白*/
display: inline-block;/*おまじない*/
line-height: 1.3;/*行高*/
background: #dbebf8;/*背景色*/
vertical-align: middle;/*上下中央*/
border-radius: 25px 0px 0px 25px;/*左側の角を丸く*/
}

h2:before {
content: '●';
color: white;
margin-right: 8px;
}

 

 

そして自分が変えたい見出し番号にコードを修正できましたら

テーマの編集画面スタイルシート下部にコピーします。

貼り付けたら下部のファイルを更新をクリック。

スクショ

 

 

すると見出し2がこのように変化します!

見出し2

選択したコードは「角がぺろっと剥がれるデザイン」です。

 

 

トップページへの反映を直す方法

これで見出し2の変更は完了!と思いきや。

トップページの記事タイトルまで見出し2が反映されているではないか!

 

トップページ記事タイトル

この現象はコードで指定していた範囲がサイト内の全てであった為、サイト内全てのh2タグに対してCSSが適用されてしまっているようです。

記事タイトルやブログトップのサブタイトルは「h2」でスタイルされているということですね。

記事タイトルはシンプルにスッキリさせておきたかったので、記事内にだけに見出しデザインが反映されるように編集してみます。

 

 

記事内にだけ反映させるためには、「.entry-content」というコードを記入します。

そちらを区切られたコンテンツの先頭に一つずつ記入するため、このコードでは二つ入力が必要でした。

.entry-content h2 {~}

スクショ

 

以上を更新しますと、、、

 

 

スクショ

記事タイトルには見出し2が反映されなくなりました!

 

記事の中身にはしっかり反映されています。

スクショ

 

見出しの変更方法は以上となります。

 

 

 

見出しデザインの色を変更する方法

ここからは見出しの色を変更したくなった場合の変更方法を記載します。

簡単に言いますと、CSSコード内のカラーコードを変更するだけです。

色にはそれぞれコードが割り当てられています。

そのコードを自分の変更したい色のコードに変更して下さい。

例えば、今回のデザインは複雑なデザインでしたのでカラーコードが割り当てられている部分はいくつかありまして、

試しに二つの部分をオレンジ(カラーコード:ffd700)に変更してみます。

 

カラーコードは下記のようなパレットサイトから探してください。

 

スクショ

この2箇所のカラーコードを水色からオレンジに変更しました。

そして更新すると、、、

 

スクショ

この通り、見出しの色がオレンジに変更されました!

 

 

 

以上が見出しデザインを変更する方法と見出しの色を変更する方法でした。

最後までお読みいただきありがとうございます^^では!

 

 

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください