SNSでのシェアや保存はコチラ

【超初心者向け】ワードプレスの子テーマで見出しタグのCSSデザインを変える方法

SNSでのシェアや保存はコチラ

CSSをいじるブロガーの机の上イメージ

CSSをいじるブロガーの机の上イメージ

ここでは、ワードプレスの子テーマで見出しタグ(H1〜H6)のCSSデザインを変える方法について解説します。

ネット上には、見出しタグのCSSデザインを変える方法を説明しているサイトはたくさんあるのですが、子テーマのCSSデザインを変更する情報は皆無でした。

これでは、CSSを全く勉強したことない人は、なんとなく概念は理解できるものの、具体的な操作ができず、困ってしまうと思いました。

よって、ここでは、他のサイトに足りない情報を補足する形で、子テーマの見出しタグのCSSデザイン変更について書いていきます。

スポンサーリンク

見出しタグとは?

見出しタグとは?

見出しタグとは、記事中の見出しを指定するHTMLタグの一つです。

具体的には、テキスト画面で<h1>と</h1>で見出しにしたい文を挟み、見出しにします。

ただ、ワードプレスで記事を書く際には、「段落 ▼」を操作することで見出しタグを追加することができるので、自分でHTMLをいじる必要はありません。

「段落 ▼」は以下の赤枠の箇所にあります。

ワードプレス投稿画面で見出しタグを設定する

ワードプレス投稿画面で見出しタグを設定する

h1〜h6の役割

通常、h1タグは最初からタイトルに使われています。(初期設定です)

ですから、自分で見出しタグを加える場合は、h2から順にh3,h4と使用していくことになります。

ちなみに、h2,h3,h4となるにしたがって、表題としての重要度は下がっていきます。

例えば、フルーツに関する記事を書く場合、タイトルの「フルーツ」が初期設定で自動的にh1となります。

そして、りんご、梨、みかん、パイナップルには自分でh2の見出しをつけ、りんごのさらに詳しい説明であるふじりんご、青森りんご、チリりんごにはh3の見出しを自分でつけることになります。

見出しをつける理由

文字を大きくして色を変えれば見出しに見えるので、いちいち見出しタグをつける必要がないように感じますが、それは間違いです。

見出しタグをつけることによって、重要なキーワードをGoogleに知らせることができるため、SEO対策的には絶対に見出しをつけた方がいいです。

※SEO対策・・・Google検索で上位に表示されるためにする対策。アクセスアップを狙う上で必須の対策である。

CSSとは?

Wikipediaは、CSSを以下のように定義しています。

CSS(Cascading Style Sheets、カスケーディング・スタイル・シート)とは、ウェブページのスタイルを指定するための言語です。 ワープロソフトなどで作成される文書も含めて、文書のスタイルを指定する技術全般をスタイルシートといいます。

Wikipedia

簡単に言うと、CSSとはウェブサイトのデザインを構成する言語のことです。

CSSをいじることで、「この箇所は赤い背景にする」や「この枠は丸みをつける」などの情報を書き込んでウェブサイトをデザインすることができます。

(もちろん、このブログの色や形などのデザインも、CSSで構成されています。)

子テーマとは?

ワードプレステーマには、親テーマと子テーマの二種類があります。

この両方をインストールして、子テーマを有効化しておくことで、親テーマを更新してもカスタマイズが崩れることがなくなります。

逆にいうと、親テーマのみを使用してカスタマイズしていれば、親テーマの更新とともにこれまでのカスタマイズがなくなることがあり、また一からカスタマイズしていく必要が出てきます。

ですので、また一からカスタマイズする事態を回避するためにも、必ず最初に子テーマを有効化しておき、子テーマのCSSをカスタマイズすることをお勧めいたします。

子テーマの見出しデザインを変える方法

どのテーマを使用しても、そのテーマの見出しデザインが最初から設定されています。

しかし、それが気に入らない場合は、自分で見出しデザインを変えることができます。

以下で、その方法について説明していきます。

CSS編集画面をひらく

ワードプレスでは以下の手順でCSSを編集することができます。

管理画面にログイン→「外観」→「テーマの編集」→「スタイルシート(style.css)」

親テーマのスタイルシートを子テーマにコピペする

子テーマを使用している場合は、スタイルシート内にCSSの書き込みがありません。

ですので、「編集するテーマを選択」で親テーマを選択し、親テーマ内のスタイルシートから変更部分のCSSをコピーしてきて、スタイルシート内に貼る必要があります。

この際気をつけることは、「h2」などの変更したい部分だけを子テーマのスタイルシートに貼り付けるのではなく、見出し部分の全体を貼り付けるということです。

以下が見出し部分の全体です。見出し部分の全体を貼り付けたら、それから変更したい部分を変更していきます。

※以下は、私が使用しているsimplicityの初期CSSです。

/************************************
** 見出し(H1-6)
************************************/
h1, h2, h3, h4, h5, h6{
line-height:130%;
color:#333;
}

.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6{
position:relative;
margin-top:35px;
margin-bottom:20px;
}
.article h1 {
margin-top:30px;
margin-bottom:20px;
font-size: 30px;
line-height:117%;
}

#archive-title{
padding-bottom:20px;
font-size:26px;
}

.article h2 {
border-left:1px solid #000;
margin: 40px -29px 20px;
padding:25px 30px;
font-size:26px;
}

.article h3{
font-size:23px;
border-bottom:5px solid #e7e7e7;
padding:10px 0;
}

.article h4, .article h5, .article h6{
font-size:20px;
padding:8px 0;
}

.article h4{
border-bottom:5px dashed #eee;
}

.entry-content{
margin-bottom: 60px;
}

変更したい見出しタグを変更する

子テーマのスタイルシート画面で、

.article h2 {
border-left:1px solid #000;
margin: 40px -29px 20px;
padding:25px 30px;
font-size:26px;
}

.article h2 {
position: relative;
padding: .25em 0 .5em .75em;
border-left: 6px solid #3498db;
}
.article h2::after {
position: absolute;
left: 0;
bottom: 0;
content: ”;
width: 100%;
height: 0;
border-bottom: 1px solid #ccc;
}

のように書き換えると、当ブログのh2見出しのように変わります。

なお、「見出し デザイン CSS」でググれば、CSSのサンプルが腐る程出てきますので、自分で検索して好きなものをスタイルシートに貼り付けちゃってください。

見出しタグのCSSを変更する方法の説明は以上です。

もし質問がございましたら、コメントをいただけると助かります。