こんにちはこうじだよ＾＾
今日もこうじブログを読んでくれてありがとう！
このブログでは、勉強嫌いな僕が工業高校から国立大学の経済学部に合格した経験をもとにみなさんに有力な情報をお届けできたらいいなって思ってます☺経済学部に行くからメルカリ物販も始めたんですよね＾＾
さてこの記事では、「WordPress 見出しのデザイン簡単変更」ということで見出しのデザインを変更する簡単な方法を紹介していきたいと思います。
今回は外部のページも利用して変更する方法を紹介するよ！
簡単だからしっかりとマスターしていってね＾＾
見出しって？
WordPressで記事を書くときに使うのが「見出し」です。
見出しには６種類あって
この６種類があります。
今ここで挙げたのは僕が普段使っている見出しですが、どれもカスタムして形や色を変えています。
見出し１はあまり使いことがありませんが、記事のタイトルを表示するときに使ったりする感じです。
そして次に１番使う見出し２です。
見出し２を基本として記事を構成していきます。
なぜ見出し２が基本かというと、記事を書いていくうちに見出しは必ずと言っていいほど２回以上使います。
そうすると大体のテーマには目次機能があるため目次が作られることになります。
その目次では見出し２が一番大きい見出しととらえられて目次で表示されます。
見出し２以降は番号が大きくなっていくごとに見出しの強さレベルが下がっていきます。
画像でみるとわかりやすいので画像でみてみます。
見出しを設定回数以上使うと自動的に目次が作成されます。
この目次を見ていただくとわかり易いですが、見出しによって段差が違っていますよね？
こんな感じで記事を構成していくんです！
僕個人の感覚としては、見出し２は見た目のしっかりとしたもの選んで、それ以外の見出しは自分の好きなデザイン大きさのものを選んで大丈夫だと思いますよ！
それではさっそく見出しのデザイン変更方法を簡単解説していきます！
見出しのデザインを変える方法
できるだけ簡単にデザインを変更できるようにするために、簡単に解説していきます！
簡単に説明すると、自分の使いたい見出しのコードをコピーして所定の位置にコピペするだけだよ！
簡単STEPで解説していくよ！
STEP１ テーマファイルエディターの見出しコードを見つける！
まず最初にコピペする所定の場所を見つけることが必要です！
WordPress管理画面から「外観」→「テーマファイルエディター」をクリック！
画像の水色□のところです！
この画面にいくと訳の分からない文字がたくさん表示してあると思います。
が、そちらは気にしなくてよくて、次の画像の部分を探してください。
「.article h2」この文字を探してください。
わりと上の方にあると思います。
上の画像で見つけたのは「.article h2」つまり見出し２の部分のコードを見つけたということです。
同様に「.article h3」は「見出し３」、「.article h4」は「見出し４」ということになります。
（※見出し５，６も同じです。）
そしてその「.article h〇」の｛に続く部分に今から紹介するコードをコピペするだけなんです！
画像を見るとわかりやすいです。
この画像の青□の部分にコードをコピペします。
この青□の前後には必ず｛ ｝があることを確認してください。（←重要）
ここまで見つけたらSTEP2の説明にいきます。
STEP２ 見出しのデザインのコードをコピーしてくる
ここで外部のページを利用させていただきます。
↓こちらのサイトに見出しデザインのコードがたくさんあります↓
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
このサイトにいったら自分が使いたい見出しのデザインコードをコピーします。
コピーは「マウスの右クリック」→「コピー」でも、「Ctrl＋C」でもどちらでもOK です！
コピーする部分は｛｝の中の部分だけでOKですからね！
コピーができたらSTEP3 の説明に移ります。
STEP３ コピーしたコードをSTEP１で見つけた場所にコピペする
ここまで来たらあとは貼り付けるだけです！
STEP２でコピーしたコードをSTEP1で見つけた所定の場所に貼り付けます。
STEP１のときの画面にいき、｛｝の中の部分を範囲選択してください。
この画像の青□の部分ですね！
選択ができたら、「マウスで右クリック」→「貼り付け」でも、「Ctrl＋V」でもいいのでコードを貼り付けてくださいこれができたらあとは「テーマファイルエディター」の画面下部にある「ファイルを更新」をクリックするだけです！
最後に確認のため実際に投稿画面でデザインを変えた見出しを使ってみるといいでしょう！
そこで使えることができればここまでの作業がしっかりでしています＾＾
お疲れさまでした！
どうだったー？簡単でしょ？見出しだけで雰囲気がだいぶ変わるからみんなも挑戦してみてね！
さいごに
今回の記事はいかがでしたか？
もしこの記事に関してわからないことがあればコメントお願いします！
SNSもやっておりますのでそちらのDMでも質問受け付けております！！次回の記事もお楽しみに＾＾
コメント