はじめWordPressの見出しデザインを設定・変更したい！
本記事では、上記の疑問にお答えしています。
こんにちは！ツヨシ（@24shi_web）です。
現在専業ブロガーとして活動しつつ、ブログ収益のみで生計を立てています。
さて、あなたもブログを始めてWordPressの見出しデザインを設定・変更したいと思っていましたか？
この記事を読めば、誰でも簡単にWordPressの見出しデザインをプラグインを使わず3分で設定することができますよ。
お洒落なサイトが誰でも作れる！
ブログを書くのが楽になるテーマ「SWELL」
- 誰でも簡単にオシャレなブログが作れます！
- WordPressの使いやすさがアップします！
- キャッシュ機能とページ高速遷移機能で初心者も簡単にWordPressの高速化が可能です！
- アフィリンクの一元管理機能が標準装備されてます！
＼一度使うと他のテーマには戻れません！／
※実際に私の当ブログは「SWELL」を使って運営しており、大満足のテーマです！
1. WordPressの見出しデザインをプラグインなしで3分簡単設定！
WordPressの見出しデザインをプラグインなしで簡単に設定する方法は以下の通りです。
- 「外観→カスタマイズ→追加CSS」を開く
- 見出しコードを取得する
- 追加CSSに見出しコードを追記する
具体的に一つずつ解説していきますね。
1-1. 「外観→カスタマイズ→追加CSS」を開く
まずはじめに左のメニューから「外観→カスタマイズ」を選択します。
次にカスタマイズ画面の中から「追加CSS」を選択します。
こちらにCSSコードを追記することが見出しなどのデザインを設定・変更することが可能です。
【補足】もう一つのやり方は子テーマの「style.css」に追加
もし、Wordpressテーマの「子テーマ」を使っている方であれば、子テーマの「style.css」にコードを追記するやり方でもOKです。
ちなみにどちらの設定方法が良い悪いとかはないのでお好きな方を選択してください。
また、私が現在使っているWordPressテーマ「SANGO」の子テーマは以下の記事でダウンロードすることが可能ですよ。
また、子テーマについてわからない方も参考になると思うので合わせてどうぞ。
WordPressの子テーマとは？安全にカスタマイズを行う方法
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に設定した見出しデザインがしっかりと反映されているか確認していきます。
具体的な流れは以下の通りです。
- 「投稿→新規追加」を開く
- 見出しブロックを選択し、テキストを入力
- プレビューを選択し、表示を確認する
具体的に解説していきますね。
2-1.「投稿→新規追加」を開く
まずは、左側のメニューから「投稿→新規追加」を開きます。
2-2.見出しブロックを選択し、テキストを入力
次に、投稿画面にて「見出しブロック」を選択し、テキストを入力していきます。
確認ですので、h2・h3・h4の3つを入力しましょう。
h2~h6の変更はWordPressの右側のウィンドウで変更することが可能ですよ。
2-3.プレビューを選択し、表示を確認する
記事内に見出しを入力したら、右上の「プレビュー」を選択し表示を確認します。
上記のように設定した見出しデザインが正しく表示されていれば完了です。
【補足】設定したWordPressの見出しデザインが反映されない
WordPressの見出しデザインが反映されない多くの原因は「ブラウザキャッシュ」です。
なので、設定さえ間違っていなければ「ブラウザキャッシュ」を削除してあげる事でWordPressの見出しデザインが反映されますよ。
ちなみにWordPressの見出しデザインが反映されない時の対処については以下の記事で詳しく解説していますので合わせてどうぞ。
まとめ
今回は、WordPressの見出しデザインをプラグインなし簡単に設定する方法について解説してきました。
見出しは、ブログ運営していく上で必要不可欠な要素であり、SEO効果も見込める重要な部分です。
今回ご紹介した方法で、カスタマイズした見出しを使って記事を執筆していってください。
もしこの記事が役に立ったと思ったら、ブックマーク・SNSでシェアしてくれるととても嬉しいです。
最後までありがとうございました。
【PR】現役ブロガーの実践ノウハウをこっそり教えちゃいます。
当サイトでは、私が月7桁稼ぐまでに至ったノウハウ・現在実践しているノウハウを「ツヨシウェブSHOP」で有料コンテンツとして販売しております。実際にブログで月7桁稼いだ実績を持っており、また現在もブログ収益で生活をしていますので情報の信頼性は高いと感じています。
しかし、有料コンテンツで提供している情報は「楽して稼ぐ！」というものにはなっておらず、これから私と同じようにブログ・発信者として生活していきたい方に向けて書いておりますので「継続的に作業できる方のみ」ご購入いただければ幸いです。
また、コンテンツには自信を持って提供させて頂いておりますので、もし購入後ご不満がございましたら「返金対応」させて頂きます。
月7桁をを達成したサイト設計方法です！
初心者のための「サイト設計方法」月7桁を実現するブログの作り方を解説。
- 見込み客→キーワード選定→サイト導線が重要。
- 「成約から近い見込み客」の考え方について解説。
- 狙うべきキーワードについて解説。
- サイト導線の考え方について解説。
＼月7桁を達成したサイト設計方法が学べます！／
- 初心者のための「サイト設計方法」月7桁を実現するブログの作り方を解説。
- 見込み客→キーワード選定→サイト導線が重要。
- 「成約から近い見込み客」の考え方について解説。
- 狙うべきキーワードについて解説。
- サイト導線の考え方について解説。
＼月7桁を達成したサイト設計方法が学べます！／
- 初心者のための「サイト設計方法」月7桁を実現するブログの作り方を解説。
- 案件を選ぶ際の7つのポイントが学べます。
- 購入されやすい商品の特徴。
- 案件選びで重要な見るべきポイント。
- 案件を取り組む際に確認すべき事項。
＼アフィリ案件を選ぶ秘訣が学べます！／
