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

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 メニュー

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

使用テーマ

公式テーマの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  ";
}

変更前のサイトデザイン

サイトデザイン変更前

変更後のサイトデザイン

サイトデザイン変更後

今後の変更箇所

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