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

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

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

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

文書の見出し（h1〜h6タグ）とは

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

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

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

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

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

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

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

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

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

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

h2タグのスタイル変更

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

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

WordPressの管理画面から、

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

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

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

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

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

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

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

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

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

文字下であれば、”bottom”

文字上であれば、”top”

文字右であれば、”right”

といった具合です。

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

7px：枠線の太さ

solid：枠線の種類（solid：１本の直線、 dashed：破線　など）

#e3297d：枠線の色

を指定しています。

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

↑に決めました！（笑）

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

あとがき

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

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

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

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

やれる気がする。