ブログ書くのが楽しくて仕方なくなってきた、ぷーです!!
さて、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の見た目を変える設定が集約されているので、ここを攻略すればオーケー!!
よく使う項目を紹介します。
プロパティ | 入力例 | 説明 |
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がどうなってるかから理解しないとなー・・・。
やれる気がする。