≫LINEにてブログ無料相談OKです。

WordPressの見出しデザインをプラグインなしで3分簡単設定!【解説】

https://24shi-web.com/wp-content/uploads/2020/03/hajime05.png
はじめ

WordPressの見出しデザインを設定・変更したい!

本記事では、上記の疑問にお答えしています。

こんにちは!ツヨシ(@24shi_web)です。

現在専業ブロガーとして活動しつつ、ブログ収益のみで生計を立てています。

さて、あなたもブログを始めてWordPressの見出しデザインを設定・変更したいと思っていましたか?

この記事を読めば、誰でも簡単にWordPressの見出しデザインをプラグインを使わず3分で設定することができますよ。

1. WordPressの見出しデザインをプラグインなしで3分簡単設定!

WordPressの見出しデザインをプラグインなしで簡単に設定する方法は以下の通りです。

WordPressの見出しデザインの設定方法
  1. 「外観→カスタマイズ→追加CSS」を開く
  2. 見出しコードを取得する
  3. 追加CSSに見出しコードを追記する

具体的に一つずつ解説していきますね。

1-1. 「外観→カスタマイズ→追加CSS」を開く

まずはじめに左のメニューから「外観→カスタマイズ」を選択します。

次にカスタマイズ画面の中から「追加CSS」を選択します。

こちらにCSSコードを追記することが見出しなどのデザインを設定・変更することが可能です。

【補足】もう一つのやり方は子テーマの「style.css」に追加

もし、Wordpressテーマの「子テーマ」を使っている方であれば、子テーマの「style.css」にコードを追記するやり方でもOKです。

ちなみにどちらの設定方法が良い悪いとかはないのでお好きな方を選択してください。

また、私が現在使っているWordPressテーマ「SANGO」の子テーマは以下の記事でダウンロードすることが可能ですよ。

また、子テーマについてわからない方も参考になると思うので合わせてどうぞ。

1-2. 見出しデザインのコードを取得する

次に見出しデザインのCSSコードを取得する作業です。

見出しデザインのCSSを公開している以下のサイトがおすすめです。

ブログの文中で使用する見出しは3つほど使うのがスタンダードとなるので「h2,h3,h4」の3つのデザインを決めましょう。

※h1タグは、通常タイトルタグで使われているので、h2から設定するのが一般的です。

まずは、上記の3つのサイトからお好みの見出しデザインを決めていきます。

私のブログは「サルワカ」で公開されている見出しCSSコードを使っておりますので、「サルワカ」を例にご説明していきます。

サルワカのページでお好みのデザインの見出しCSSコードを決めます。

※今回は一本下線の見出しデザインを例にしています。

その見出しデザインの下に表示されている「CSSコード」をコピーします。

1-3.追加CSSに見出しコードを追記する

次にWordPressの管理画面に戻り、先ほど開いた「追記CSS」にコードをコピペします。

「h1」と表記されている部分を以下のように書き換えます。

h1 {border-bottom: solid 3px black;}
↓
.entry-content h2 {border-bottom: solid 3px black;} 

ちなみに、「h3・h4」も同様です。

.entry-content h3 {コード} 
.entry-content h4 {コード}  

この手順で行えば、WordPressの見出しデザインの設定は完了です。

2. WordPressの見出しデザインを確認する。

そして、次にWordPressに設定した見出しデザインがしっかりと反映されているか確認していきます。

具体的な流れは以下の通りです。

見出しデザインの確認方法
  1. 「投稿→新規追加」を開く
  2. 見出しブロックを選択し、テキストを入力
  3. プレビューを選択し、表示を確認する

具体的に解説していきますね。

2-1.「投稿→新規追加」を開く

まずは、左側のメニューから「投稿→新規追加」を開きます。

2-2.見出しブロックを選択し、テキストを入力

次に、投稿画面にて「見出しブロック」を選択し、テキストを入力していきます。

確認ですので、h2・h3・h4の3つを入力しましょう。

h2~h6の変更はWordPressの右側のウィンドウで変更することが可能ですよ。

2-3.プレビューを選択し、表示を確認する

記事内に見出しを入力したら、右上の「プレビュー」を選択し表示を確認します。

上記のように設定した見出しデザインが正しく表示されていれば完了です。

【補足】設定したWordPressの見出しデザインが反映されない

WordPressの見出しデザインが反映されない多くの原因は「ブラウザキャッシュ」です。

なので、設定さえ間違っていなければ「ブラウザキャッシュ」を削除してあげる事でWordPressの見出しデザインが反映されますよ。

ちなみにWordPressの見出しデザインが反映されない時の対処については以下の記事で詳しく解説していますので合わせてどうぞ。

WordPressの見出しCSSコードが反映されない時の3つの原因と対処法

まとめ

今回は、WordPressの見出しデザインをプラグインなし簡単に設定する方法について解説してきました。

見出しは、ブログ運営していく上で必要不可欠な要素であり、SEO効果も見込める重要な部分です。

今回ご紹介した方法で、カスタマイズした見出しを使って記事を執筆していってください。

もしこの記事が役に立ったと思ったら、ブックマーク・SNSでシェアしてくれるととても嬉しいです。

最後までありがとうございました。

WordPressブログの「見出し(hタグ)」の完全マニュアル【まとめ】
\一部無料公開中です!/
ごく普通の会社員だった私が月100万円を稼ぐために行った4つの事とは?
ノウハウを試し読み
\一部無料公開中です!/
元会社員の私が月100万円を稼ぐために行った4つの事
試し読み