【はてなブログ】コピー&ペーストと少しの改変で見出しを格好良くする

ワードプレスで『ビブリオテーク』という雑記ブログをやっている『ぽよまる』です。

今回は『はてなブログ』で使用することにしたテーマのデザインを少し改造してみようと思い、Hタグ……つまり見出しの改造をすることにしました。

改造とはいってもコピペするだけのようなものなので誰でも簡単に出来ますし、ちょっとデザイン変えたいんだけどなーぐらいの人の参考になればと思います。

 見出しのデザインをどうするか考える

これを最初にしなくては行けないわけですが、HTMLやらCSSやらさっぱりわからないよ┐(´д`)┌

という方のために、2つほどサイトをご紹介。

コピー&ペーストと少しの改変で見出しを格好良くする

下でご紹介している2つのサイト。

ここでは見出しに使えるコードを掲載されており、それをコピペすればそのまま見出しのデザインを変更できるよ! という素晴らしいサイトです。

変更方法は至ってシンプルで、『管理画面』>『デザイン』>『スパナのマーク』>『デザインCSS』に移動します。

そして紹介しているサイトからコードをコピペすれば見出しのスタイルが変更される

たったのこれだけで見出しが格好良く出来るならやらない手はありません!

見出しのデザインを変えたい人は是非試してみてください。

www.nxworld.net

saruwakakun.com

コードをコピペしたけどデザインが変わらないんだけど……

HTMLやCSSが全く理解できていない人は、当然変わっていないと思います。

恐らく変更されたのは『タイトル』の表示デザインでしょう。

これは何故かといいますと、見出しタグには『h1~h6』までのタグが使われており、タイトルに付けられるタグが主に『h1』というものだからです。

ですので、コードをそのままコピペしてきただけでは『h1』の部分しか変更されず、大見出し・中見出し・小見出しが変更されないということになります。

大見出し・中見出し・小見出しはどの『h○』を使っているの?

これはテーマによって違うと思いますので、自分で確認する必要があります

確認方法は、以下のとおりです。

  1. 自分のはてなブログに投稿した記事をなんでも良いので表示する
  2. 表示したページで右クリックし『ページのソースを表示』を選択する
  3. ソースのページが表示されたら『Ctrl+F』で検索ボックスを表示する
  4. 見出しにしている文章を検索ボックスにコピペして検索する
  5. 検索で出てきた見出しの左横にある『<h○>』の数字を確認する
  6. 上記サイトでコピペしたコードの『h1』の部分を上で確認した数字に変える

※ブログ記事を編集しているときに『HTML編集』のところでも確認できますので、そちらの方で確認したほうが簡単かもしれません。

以上で見出しのデザインが変更されると思います。

中にはブラウザによって対応していないものがある可能性がありますので、全てがこの通り表示されるとは限りません。

ですが、ある程度は自分の好みに合ったデザインに変更できるのでは無いかなと思います。