アーカイブ

はてなブログは、WordPressのようにテーマを着せかえすることができます。自分が使っているテーマは「Written」というテーマで、とてもシンプルで見やすい反面、見出しデザインがちょっと物足りなくなってきたのと、そろそろ記事数も増えてきたので休日の時間を使って少し調整してみました。

見出しデザインの設定方法

見出しにはHTMLで言うところの「h」タグが使われています。はてなブログProでは、デザインCSSを使って該当タグのデザインをCSSで設定ができるんですね。

こちらを参考にしました

「見出し　CSS」で検索して、よさ気なサイトを参考にさせていただきました。

webnonotes.com

www.keni-customize.net

このサイトでの見出しデザイン

特に難しいことをしているわけでもなく、凝った見出しではありませんが、さらりとコピペしたい方がいらっしゃいましたら、ぜひご利用ください。色はお好みで変更してみてくださいね。

/* 見出し */
article .entry-content h2 {
margin:0 0 10px 0;
padding:2px 8px;
border-width:0 0 0 5px;
border-color:#6e633f;
border-style:solid;
color:#6e633f;
line-height:140%;
font-weight:bold;
}
article .entry-content h2 {
margin:0 0 10px 0;
border-width:0 0 2px 0 ;
border-color:#c9bb92;
border-style:solid;
background:#fff;
color:#6e633f;
line-height:140%;
font-weight:bold;
}

見出しデザインをスマホにも反映させる

使用しているテーマがレスポンシブデザインに対応している場合は不要ですが、そうでないテーマを選択している場合は、スマホデザインにも個別にCSSを適用してあげる必要があります。

スマホ用のデザイン設定から、ヘッダのタイトル下に、下記のように記述します。

<style type="text/css">
ここにPC版で使用しているCSSをコピペする
</style>

これで概ね同じ見た目になるはずです。

目次を表示させる方法

記事を書く際、見出しを文節のように使うことが多いのですが、IIJからdocomoへの移行記事など、手順を説明するような記事の場合は目次があった方が見やすいですよね。SEO的にも目次があったほうが良いそうです。

www.b9-design.net

そこでググってみたところ、下記の記事を参考に設定したらあっという間に出来てしまいました。（すでにデザインCSSをカスタマイズされている方は、適宜ソースコードを変更する必要があります）

nohack-nolife.hatenablog.com

はてなブログでは、CSSとJSをこんな風に使えるんですね〜。しかもクリックすると、スルスルっとスクロールしてくれます。CSSのスタイリングは今後もう少し詰めるとして、あっさりと設置できるので未設置の方は試してみてはどうでしょうか？ただ、目次表示の判定がh2タグ（スクリプトいじれば変更できます）なので、これまで書いた記事を修正するか悩みどころです・・・。

おまけ）はてなブログでのシンタックスハイライト（markdown記法）の方法

ソースコードを記事に掲載したい場合、コピペをしやすくするための記法があります。その方法とは、バッククォート（`）を3つ打ち、その後ろに言語名、ソースコードを書いて、バッククォート3つ打って閉じる、これだけです。

こちらを参考にしました

akio-t.hatenablog.com

しばらくの間、見た目がちょこちょこと変わるかもしれません…。ではまた！