見出しタグの装飾

投稿日:2017年6月27日

今回は、ついにというか、やっとというか、「見出し」のカスタマイズをしていきます。

いやね、ブログをやったことのなかった私にだって見出しの必要性っくらいは分かるんですよ?
レポートを書く時に目次は必須でしたから。目次に載せるのは大見出し・小見出しですからね。

でもさ、WordPressの見出しってなんか特別みたいじゃん? 「hタグ」がどーとかで。
なので「初心者には難しそう」って思ってずっと後回しにしてたんですよね…
そんでかれこれもう4ヶ月。そろそろどうにかしなきゃなって思ったわけです。

 

さて、カスタマイズと言っても、当サイトで使用しているAFFINGER4なら、専用のテーマカスタマイザーにより誰でも簡単に見出しのカスタマイズが可能となっております。
なので今回はCSSとかに触れる必要はありません! 実にありがたい話ですね。

まずはAFFINGER4のデフォルトの見出しデザインを見ていきますかね。

↑これがデフォルトのh1~h6タグを使用したスクリーンショットの切り出し。
(クリックできない埋め込み式の画像に設定したはずだけど、ちゃんとできてるかな?)

なんとも味気ないですね。
ここを自分好みのデザインに変更していきます。

…と、その前に。
冒頭で言った「hタグ」について、まずはお勉強しておかねばなりませんね。メンドクセ

 
「見出しタグ」というのは、<h1>~<h6>までの「hタグ」によって構成され、数字が大きくなるほど見出しは小さくなっていきます。

これらにはそれぞれ異なるデザイン(装飾)を施すことができますが、見出しを使用する際、このデザインだけで選んではいけません。

hタグは、人の目に映る文章の見やすさを整えるためのものではなく、検索エンジンに対しページの階層構造を伝えるためのものである。

そのため、このhタグを使うにはSEO的に守らねばならないルールがあります。

それは、hタグを数字の順番通りに使うということ。
h1の後にはh2。その次にはh3…という具合で。

つまり、記事タイトル(h1)の後、記事の書き出しにおいて、「h3タグのデザインが使いたい気分だから」とh2を飛ばしてh3を使うのはNG、という事らしいです。

ま、全部ネットに書いてあったことなんだけどね!!
他にもあるみたいだけど、気になる人は自分で調べてネ!(丸投げ)

 
とまぁ、だいたいなんとなく大雑把にhタグについて理解したところで、見出しのデザインをいじっていきます。

他の多くの人が言ってるように、実際に使うのはせいぜいh3っくらいまでらしいですね。 h6まであるのに。
ついでなのでh6までカスタマイズしてしまいましょかね。…と思ったんですが、カスタマイザーからはh5までしかカスタマイズできないようです。 さすがにh6までは出番なしってことですかね?

そんで完成したのがコチラ。

↑先の理由から、h6タグは変わっていません。
(画像に「枠線」をつけたはずなんだけど、ちゃんとついてる?)

ほんじゃ、1個ずつ見ていきますかね。

見出し2(h2タグ)
背景色をテーマカラーの緑で設定。h2にはグラデーションが使える。キレイ

見出し3(h3タグ)
シンプルに下線を実線で設定しただけ。左ボーダーと悩んだ。

見出し4(h4タグ)
左ボーダーはこちらに。背景色も設定してありますが、その理由は下記にて。

見出し5(h5タグ)
吹き出し型にしてみる。これを使うには背景色の設定が必要。

見出し6(h6タグ)
だから変わってないっちゅーの。

記事タイトル(h1タグ)
アイコンを背景画像として設定。上手くいった(*´ー`*)

なお、h3タグのみ[AFFINGER管理]画面よりチェックマークを付けられます。

h4タグの背景色についてなんですが、h4だけ背景色を透明にできないんですよね、なぜか。
普通ならそういう場合は白(背景と同色)に設定しておけばいいだけの話なんですが、今のこのサイトは各エリアの設定箇所を確認しやすくするため、それぞれのエリアに異なる色を設定してるんですよ。
なので白にしても色が浮いちゃうので、透明にできないと困るんですよね…

試しにデフォルト設定が透明になってる他のhタグを見てみると、カラースライダーの値は"#RRGGBB"となっていたので、そのまま入力してみましたが、決定できませんでした。 当たり前ですよね、ここ16進数ですから(笑)

h5タグに使ってみた吹き出しデザインなんですが、これはちょっと私の好みではなかったんですが、AFFINGER4の最新版でh4・h5も吹き出し型にできるようになったってことなんで、せっかくなので設定してみました。 h5までは使わないと思うけどね。

h1タグである記事タイトル(トップページではサイトタイトルがh1タグらしい)、ここはデフォルトではただのデカイ文字ってだけで、[スタイル]から「大文字」を選べばおんなじデザインにできるんですよね。

もうちょいなんかタイトルらしさ、みたいのが欲しいなと私は思ったので、記事タイトルのフォントを変えてみることにしました。

[AFFINGER管理]画面にあった『Googleフォント』なる物をてきとうに設定してみましたが、記事タイトルに変化はありませんでした。
よくよく見てみると、「英数字のGoogleフォント」と書かれていました。どうやら日本語には対応していないっぽい?

そういえば先週くらいにステ子ちゃんが「エックスサーバーで日本語のWebフォントが使えるすごい!」みたいなこと言ってましたね。
わざわざ「すごい」って言うぐらいだから、きっと今までのは日本語に対応してなかったんでしょうね、きっと。

私はロリポップサーバーなので、フォントの変更は諦めまして、別の方法でデザインの差別化を図ることにしました。

そして思い出したんですよね、以前私が「AFFINGER公式サイトの記事タイトルについてる鉛筆アイコン良いな~」的なことを言っていたのを!…言ってなかったかな…

そうと決まれば、ネットでフリーで使えるアイコン探し!
検索して最初に出てきた『ICOOON MONO』様より今回使わせて貰った物ほか数点、頂きました~。ありがとうございますm(_ _)m

サイズもちょうどいい大きさで、透過ファイルもあったので、編集無しでそのまま使えました!

ただ、h1に背景画像を設定後、何故かフォントサイズが記事本文のサイズに変更されてしまったので、フォントサイズは改めて手入力で設定しておきました。 27pxにするとちょうど良いと思います。

 

よし、こんなところですかね。 細かいトコは実際に使ってみながら調整していきましょう。 カスタマイザーからなら再設定も簡単ですしね。

……目ざとい人なら気付いてしまったかもしれませんね。
見出しの設定をしたにも関わらず、この記事に見出しが使われていないという事実に!!

べ、べつにカスタマイズに満足して使うの忘れてたわけじゃないんだからねっ!
ほら、本文中に見出しの画像とか使ってるから見出しだらけでごちゃごちゃしちゃうからだもんげっ!

-ウェブサイト作成

Copyright© ガンプラ気分 , 2020 All Rights Reserved.