【WordPress】文章の見出しh1,h2〜h6タグに線を付ける、見た目を変更する方法。

wordpress-h-tag

ブログ書くのが楽しくて仕方なくなってきた、ぷーです!!

さて、WordPressを使用していると、基本的には既存のテーマを使用すると思います。

僕はテーマを作りたい欲求が最近半端ないので、当ブログで作成過程を紹介していくつもりですが、まずは選択したテーマのカスタマイズから!

文書の見出し(h1〜h6タグ)とは

僕がWordPressで記事を投稿するときに、一番最初に気になったところがこの文章の見出しでした。

いつも見ているブログでは、この文章の見出しが見やすいものが多く、どこが文章の切れ目で、始まりなのかが分かりやすいのが特徴でした。

ただ、僕が最初に選んだテーマだと、この文章の見出しがあまり好みのものではなかったので、変更してみることに!

まず、この文章の見出しというのは、ウェブページ(html)で、”h” heading(見出し)と言います。

この”h”は、一番大きい”h1″から一番小さい”h6″まで段階があり、
タイトルはh1、各章の始まりはh2などといったように使用されることが多いです。

文字サイズ大きくすれば見た目は一緒じゃん?

と、疑問に思う方、ごもっとも

人間が見る分には変わりないのですが、問題はウェブページは検索エンジンにも見られているということ。

検索エンジンは人間のように視覚的に判断するのではなく、この”h”タグや、段落を表す”p”タグを識別して判断しています。

検索エンジンにページの構造を理解してもらい、どの文書が重要であるのか伝えることでSEO対策にも効果的なのです!

h2タグのスタイル変更

個人的にh1タグはタイトルで使用されるイメージなのですが、WordPressではタイトルは勝手に表示してくれます。

なので、h2タグから使うことに。

WordPressの管理画面から、

「外観」→「テーマの編集」を選択します。

wordpress-h-tag-1

編集対象は「style.css」になります。右側の「テンプレート」から選択してください。

ctrl+f(Macはcommand+f)で”h2″を検索します。

すると、以下のようにh2タグの見た目を設定している箇所が出てきます。

ここは使用しているテーマによって違うので、

“font-size”(文字の大きさ) や、”margin”(文字周りの余白)などの記載があるところが目安になります。 

wordpress-h-tag-2

ここに、h2の見た目を変える設定が集約されているので、ここを攻略すればオーケー!!

よく使う項目を紹介します。 

プロパティ 入力例 説明
font-size 12px 文字の大きさを指定
color red 文字の色を指定
font-weight  bold 文字の太さを指定
font-family MS P明朝 文字のスタイルを指定
border-left, border-bottom 7px solid #e3297d 文字周りに枠線を表示

 

最後の”border-left” については、枠線を表示させたい方向を”left” 部分に指定します。

文字下であれば、”bottom”

文字上であれば、”top”

文字右であれば、”right”

といった具合です。

入力例にある、”7px solid #e3297d” は、

7px:枠線の太さ

solid:枠線の種類(solid:1本の直線、 dashed:破線 など)

#e3297d:枠線の色

を指定しています。

そんなこんなで、僕のh2タグはこれに決まった

↑に決めました!(笑)

ちょっと下線も欲しい気持ちですが、楽しみながら、見易さを重視して変えていこうかと思います!

あとがき

やっぱり自分で弄るっていうのは楽しいー!

反映されたものを視覚的にすぐ見れるし、頑張る甲斐があるというものです(笑)

テーマ作りたいなー・・・。

まずはWordPressがどうなってるかから理解しないとなー・・・。

やれる気がする。

wordpress-h-tag