wordpressカスタマイズ備忘録〜デフォルトの見出しデザインを消す方法~

その他

wordpressで見出しをカスタマイズしてみたけど、もともと設定されている見出しのデザインが残って見栄えがおかしくなっちゃった。どうすればデフォルトのデザインを消せるんだろう、、

本記事はこんな方におすすめです。

 

本記事の内容

  1. wordpressで見出しをカスタマイズする方法
  2. デフォルトの見出しデザインが反映されてしまう理由と対処法

 

スポンサーリンク

wordpressの見出しをカスタマイズしよう

最初にwordpressの見出しのデザインを変更させる方法について見ていきますが、「デフォルトの見出しデザインを消したい!その方法だけ知りたい!」って方は、②まで一気に記事を飛ばしちゃってください。

見出しの種類について

ここでは、見出しの種類について見ていきます。

まずは、「記事内の見出し」についてですが、もし記事中に見出しがないと、読んでいる人からしても、googleを巡回しているクローラーからしても、分かりにくい記事になってしまいます。

なので、記事内に見出しは必要不可欠ですよね。

ちなみに僕の記事では、主にこの三つの見出しを使っています。(<h2>,<h3>,<h4>)

wordpress 見出し種類

そして記事中ではなくてサイドバーのカテゴリー表示の部分」も実は見出しの一種です。

僕の記事では、この部分がサイドバーの見出しですね。

 

見出しのデザイン選択〜実装

では早速、デフォルトの見出しをカスタマイズしていきましょう。

 
ちょっと待って!カスタマイズするって言っても、HTMLとCSSの知識なんかないんだけど、、

そんな方におすすめするサイトがこちらです。

プログラミングやブログのカスタマイズについて分かりやすく教えてくれているので、ブログ初心者におすすめです。

実際、僕のブログもこのサイトで紹介されている見出しのデザインを用いています。

ここでは、おしゃれな見出しのデザインが68種類も紹介されていて、なおかつCSSをコピペするだけで完成するので、こんなに嬉しいことはありません。

 

それでは実際に見出しのデザインを変更して、記事内に見出しを入れてみましょう。

上記のサイトで気に入った見出しのデザインのCSSを、「外観」→「カスタマイズ」の中にある、「追加CSS」の欄にコピペしましょう。

 

後は、記事を作成する途中で見出しを入れていきます。

  • ビジュアルエディタの場合

僕の場合は<h2>から順番に見出しをつけていっているので、

「大見出し1」の文字を選択し、上の「段落」タグから見出し2を選びます。

 

同じように小見出し123」の部分には、見出し3を選択します。

ここまでできたら、下書き保存して、プレビューで記事を見てみましょう。

 

ちゃんと新しい見出しが反映されていますね。

 

  • テキストエディタの場合

テキストエディタでは「html」を使って書いていきます。

見出しは<h2>〜<h6>の範囲で書きます。ちなみに<h1>の見出しは、記事のタイトル部分を指しています。

上記と同じように見出しを入れたい場合は、

   <h2>大見出し1</h2>
   <h3>小見出し1</h3>
   <h3>小見出し2</h3>
   <h3>小見出し3</h3>

このように書けばOKです。

 

見出しデザインの調整をしよう

デフォルトの見出しデザインが反映される理由

僕の場合、見出しデザインをカスタマイズしていてある問題が発生しました。

上の「小見出し」のデザインではオレンジの二重線に加えて、灰色の背景が入っていますが、本当はこのデザインにしたかったんです。

 

実はこの灰色の背景は、デフォルトの見出しのデザインで、デザインを変更した後でも、それがまだ反映されているので、このような現象が起きているんです。

  
なるほど、「新しいデザイン」+「デフォルトのデザイン」が混ざっちゃってるんだね!

 

なので、デフォルトのデザインを反映させたくない場合は、それを消さなければいけません。

 

デフォルトの見出しデザインを消す方法

消す方法は以下の通りです。

  • 「google chrome」の「検証ツール」を開く。
  • デフォルトのデザインを消したい見出しのCSSを確認する。
  • デフォルトのデザインが反映されてしまう原因であるCSSを変更。
  • wordpressの「追加CSS」の欄に変更したCSSを記入。

 

一つずつ見ていきましょう。

 

「google chrome」の「検証ツール」を開く。

まずは「google chrome」で、ブログを開いてください。画面上の任意の場所を右クリック、そして「検証」をクリックしてください。

すると、このような画面が表示されると思います。

 

なんじゃこれ!!と思うかもしれませんが、特に何が書かれているかは気にしないで大丈夫です。

 

デフォルトのデザインを消したい見出しのCSSを確認する。

画面の通り、①の所をクリックして、②の見出しの上にカーソルを持ってくると、右下の③の欄に、CSSのコードが色々表示されると思います。

 

デフォルトのデザインが反映されてしまう原因であるCSSを変更。

今回は見出しの灰色の背景を消したいので、この中の④の部分(背景色を指定するCSS)を変更します。


背景色は無しにしたいので、

background:transparent;

と書けば、すぐにサイト上で背景が透明になるのを確認できると思います。

 

wordpressの「追加CSS」の欄に変更したCSSを記入。

「デベロッパー検証ツール」でCSSを変更して、デフォルトのデザインが消えたことを確認し終えたら、最後にwordpressの「追加CSS」の欄に、変更したCSSを記入します。

 

今回の場合は、

.article h3{
background : transparent ;
}

と書けばOKです。

 

「.article(記事の中の) h3(h3の見出し)部分の背景を透明にする」

といった意味ですね。

 

これで無事、デフォルトの見出しデザインを消すことができたと思います。

この他にも、新しくデザインを設定したのに、うまくデザインが反映されない時には、もしかしたらこのような現象が起きている可能性があるので、この記事を参考にしてみてくださいね。

この記事を書いた人
DAIKI

英語・中国語の学習に役立つ情報や中国市場の情報について発信しています。
【略歴】
・京都に住んでいた時、中国人観光客の会話を何回も聞いているうちに中国語に興味が湧き、それ以降中国語の勉強にハマる。
・2019年3月〜中国の動画プラットフォーム「bilibili」で日本語や日本文化についての動画を中国人に向けて発信開始。
・現在は外国人に日本語を教えつつ、英語・中国語習得中。

DAIKIをフォローする
その他
スポンサーリンク
DAIKIをフォローする
DAIKI LIFE

コメント