はてなブログカスタマイズ:目次と見出しなど

使用テーマ
変更内容
変更前のサイトデザイン
変更後のサイトデザイン
今後の変更箇所

使用テーマ

公式テーマのSmooth(デフォルト)を使用しています。

変更内容

目次と見出しのデザインを中心に変更しました。一部コードを公開しています。

目次のデザイン

見た目はほとんど同じですが、余白を調整する関係でCSSを変更しました。良いデザインが思いついたら、また変えるかもしれません。

見出しのデザイン

見出しのデザインを微調整しました。こちらも変更の余地ありです。

/* 見出し */
.entry-content h2 {
  background: #f3f3f3;
  padding: 10px 10px;
  font-size:1.5em;
}
.entry-content h3 {
  padding: 0px 10px;
  border-left: 5px solid #4c7caf;
  border-bottom: none;
  font-size:1.5em;
}
.entry-content h4 {
  padding: 0px 10px;
  border-left: 1px dashed #4c7caf;
  font-size:1.5em;
}
.entry-content h5 {
  font-size:1.25em;
  font-weight:bold;
  border:none;
}
.entry-content h6 {
  font-size:1.0em;
  font-weight:bold;
}

余白の調整

全体的に余白を調整しました。両端や行頭が揃うように変更しました。また、不要な余白を詰めました。

フォントサイズ調整

見出しなどのフォントサイズを調整しました。

パンくずリスト

上下の余白が狭くなるように調整しました。

背景色を削除して、タグのアイコン(ブログアイコン)を追加しました。ブログアイコンは、はてなブログの共通CSSに記述されているものを使っています。外部からFont Awesomeを読み込むのではなく、始めから読み込まれているCSSを使いました。

下記は、当ブログで読み込まれているCSSファイルです。

<link rel="stylesheet" type="text/css" href="https://cdn.blog.st-hatena.com/css/blog.css?version=83d4e140de222456fed90d9724d259d11fdfc647&amp;env=production"/>

/* タグ */
.categories a:before {
  font-family: blogicon;
  content: "\f04a  ";
}

変更前のサイトデザイン

サイトデザイン変更前

変更後のサイトデザイン

サイトデザイン変更後

今後の変更箇所

トップページ以外の変更
スマホ用のデザインを作る

元Webデザイナー兼コーダーの備忘録

ウェブデザインやプログラミング、ブログのカスタマイズなどについてアウトプットしています。