全然音楽の紹介ではないのですが、ブログを制作していくにあたって僕もようやくphpやらcssを編集するようになりました。で、ブログに見出しをつけるようになったのですが、初心者の僕がどうやって見出しをつけたのか、また、見出しをつけるにあたって直面した問題点などをつづっていこうと思います。

見出しとは

そのまま、↑のような表示です。cssを編集することでいろいろなデザインにすることができます。

どうやって見出しをつくるのか

初心者の方は自分でcss書いてオリジナルを作るのは少々難易度が高いと思われますので、サンプルを入手して自分で手を加える、といった方法が良いかと。僕もこの方法でつくりました。

今回サンプルを利用させてもらったのは、
Web’Notes
このページにあるサンプル10個の中で、気に入ったものを試しに利用してみましょう。

今回僕が使用したのは、10番目の下線をつけた見出し。
まず、サンプルコードをコピーし、自分のブログのテーマのcssにコピーします。

cssって何ですか？

cssはページデザインをしているプログラム、と解釈しておけば大丈夫です。
今回の見出しもデザインをしなければいけませんので、cssを編集してあげる必要があります。
このcss、どこから編集するのかというと、wordpressを使っている人向けになってしまいますが、メニュー左のサイドバーに「外観」があるのでそれを選択。次に「テーマの編集」があるのでそれを選択。テーマの編集を選択すると、右下に「style.css」があると思いますので、それが編集すべき対象になります。

cssには分かりやすいように、

/* ———- h3 tag ———- */
サンプルコード

のような形で記述しておくと後から分かりやすくて良いです。
上記サンプルコードにさきほどコピーしたコードをコピーします。

これは後々、やりやすいようにするためにですが、サンプルコード中に
.heading10
とあると思いますが、これを一括して「h3」に置換しておきましょう。

cssのどこに記述すればよいの？と初めての方は思われるかもしれませんが、記述途中の箇所でなければどこでもよいです。心配であればcssの一番下にでも貼付ければOKです。

記事に記述する

cssを編集して記事に反映するためのデザイン、つまりは準備が終わりました。
あとは記事に実装していくだけです。

やり方は簡単。
次のコードを見出しで見せたいところに記述すればよいだけ！

<h3>見出しにしたい内容</h3>

見出しの色を変えてみる

サンプルをそのまま使用しても良いと思いますが、個人で好きな色を設定したい！って時にはcss中の「color」を検索して見つけてみましょう。検索の方法は、「ctrl + f」を打つと検索ウィンドウが出てきますので、そこで検索したいワードを入力します。colorを見つけたら、#6B0CE8とか、#FFFなどと記述されていると思いますが、これはパソコンが色を数字で表すというルールにのっとって記述されているのです。
何色が何番なのか分かんない！そんな時は、以下のサイトを参照。
カラーコード一覧表
このサイトで設定したい色のコードを探してcssで変更してみましょう。

あれ？css更新したのに反映されない。。そんなときはスーパーリロード

cssを更新したはずなのに、ページ更新ボタンを押しても更新されないぞ！

そこで活躍するのがスーパーリロード。
ざっくりですが、
windowsを使っている方は、ctrl + F5
Macを使っている方は、ctrl + R
これでちゃんと新しく編集したcssを読み取って表示してくれます。

ウィジェットにもh3タグが！？

使用しているテーマによってはウィジェット（サイドバーのこと）にもcssで反映した内容が反映されてしまっていることがあります。たいていの場合、「テーマ編集」を選択して、「functions.php」に設定が記述されています。
h３と検索すれば出てくると思いますので、これをh4,h5などに変更しておけばOK.

以上、簡単ですが初心者がcssを編集して見出しをつけるときに何かしら参考になれば幸いです！