[コピペするだけ簡単]ワードプレス5.0見出しデザインの変更方法

[コピペするだけ簡単]ワードプレス5.0見出しの変更方法

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

ワードプレスの見出しを変更したいけど変更方法はとっても難しいんじゃないか?プログラミングの知識が必要なのではないか?ネットの変更方法の記事をみてもワードプレスが5.0にアップデートされてから変更方法がわからない!という方は多いんじゃないでしょうか?
今回はそんな方の為に超超簡単にコピペするだけで出来るワードプレス5.0Gutenbergの見出しの変更方法をご紹介します!

見出しとは

そもそも見出しとは何なのかというとこの上部のもので見出しがある事によって見やすい記事にすることが出来たり、この記事はどういう事を書いているのかと検索エンジンに示す事が出来るのでSEO対策にも繋がります。表示方法としては投稿画面で見出しを選択して頂き表示することができます。今回はそんな見出しのデザインの変更方法を分かりやすく手順を追って説明していこうと思います!

見出し変更手順

手順としては

①サイトから好きな見出しのデザインのコードをコピー
②ダッシュボードからサイトを表示
③カスタマイズ
④追加CSSにコードを貼り付ける


以上!

のたった4ステップだけで見出しの変更方法が出来てしまいます!

①サイトから好きな見出しのデザインのコードをコピー

それでは早速1ステップ目!
今回はこちらのサルワカさんの見出しデザインまとめサイトからデザインのコピーをしようと思います!

サイトを開くと中には様々なデザインの見出し例があります。

今回はこのグラデーションが綺麗な見出しを例に変更をしていこうと思います!

自分の変更したい見出しデザインを決めたらコードを表示を選択。

すると何やら難しいコードが出てきますのでそれをそのまま全部コピーしちゃいます!

①の操作はここまで!簡単!

② ダッシュボードからサイトを表示

ここでワードプレスのダッシュボードを開いて赤丸で目印をした箇所からサイトを表示します!

③ カスタマイズ

カスタマイズ画面

サイトの画面からカスタマイズを選択。

するとサイトが表示されるので上部のカスタマイズを選択します。ここまできたらあと一息です!

④追加CSSにコードを貼り付ける

カスタマイズ画面を開くと様々な項目があるので赤マルで印をした追加CSSを選択。

追加CSS

ここにステップ①でコピーしたコードを貼り付けます!

ここで一応は完成!、、、

ですがそのままコピーペーストをすると見出し1の変更になるので他の見出しを変更したい場合は赤マルをつけたh1の箇所を好きな見出しの番号に変更します。
今回は見出し3を変更しようと思うのでh3に書き換えます。

追加CSS

ここでようやく

完成!

以上でワードプレスの見出しのデザイン変更は完了です!いかがでしたでしょうか?プログラミングの知識が無くても案外やってみると簡単ですよね。この記事が皆さまのお役に立てれば幸いです。それでは次の記事でお会いしましょう!

コメントを残す

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