はてなブログ人気テーマEpicの見出しをカスタマイズする

このブログはEpicテーマで描かれていました

僕的には、はてなブログといえばEpicテーマの印象があります。

Epicテーマという言葉を知らない方も、本ブログのようなレイアウトを他でも見たことがあるかなと思います。

シンプルで見やすく、技術的な話題を書くには最適と思うのですが、

  • 趣味性の高い記事を書くにはちょっと地味かも?
  • 章見出しをもっと目立たせたい!

という思いがあったため、見出しを軽くカスタマイズすることにしました。

CSSを書く

「設定->デザイン->カスタマイズ->デザインCSS

と進んでいくと、CSSを直接入力できるフォームが現れるはずです。

そこで設定を上書きすることが出来ます。

書き足した内容

以下をコピペしてフォームに貼り付ければ反映されるはずです。

 

h3 {
margin:0 0 10px 0;
padding:2px 8px;
border-width:0 0 0 5px;
border-color: #80CEDD;
border-style:solid;
background:#029EBC;
color:#EBF7FA;
line-height:140%;
font-weight:bold;
}

h4 {
margin:0 0 10px 0;
padding:2px 8px;
border-width:0 0 3px 0 ;
border-color:#029EBC;
border-style:dashed;
background:#fff;
color:#017589;
line-height:140%;
font-weight:bold;

ざっくり解説

今回は、大見出しh3と中見出しh4をカスタマイズしました。

h1, h2, h3...というのは見出しタグです。番号順に階層構造になっています。

ブログシステムはタイトルにh1要素、以下記事中の見出しにh2以降を割り当てるというイメージがあったのですが、Epicテーマの「大見出し」にはh3要素が割り当てられていました。h2要素は一切使ってないんですかね? 少なくともこのブログには出てきません。

デザインは以下のものを拝借して、さらにカスタマイズしました。

 

スマホでは設定が反映されなかった!しかも変更もできない

今回の設定でデザインが変更されるのはPCビューのみです。

スマホでは有料会員でないとCSSをいじれないようです。残念...。

(追記)Brooklynに移行しました

見やすく、おしゃれで、スマホにも対応(レスポンシブ)ということで僕はこちらに移行しました。

shiromatakumi.hatenablog.com