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

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

 メニュー

はてなブログカスタマイズ:サイドバー、aboutページ、Not Foundページなど

使用テーマ

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

変更内容

サイドバー

以下にアイコンフォントを追加しました。

  • 関連記事
  • 最新記事
  • カテゴリ
/* 関連記事 */
.hatena-module-related-entries .hatena-module-title:before{
font-family:blogicon;
content: "\f013";
}
/* 最新記事 */
.hatena-module-recent-entries .hatena-module-title a:before{
font-family:blogicon;
content: "\f013";
}
/* カテゴリ */
.hatena-module-category .hatena-module-title:before{
font-family:blogicon;
content: "\f022";
}

サイドバーのデザイン変更の図
青丸で囲んだ所が変更箇所です。

aboutページ

  • 「記事の目次」という文言を削除
  • 余白の調整
/* aboutページ */
.page-about .entry-content:before{
display:none;
}
.page-about .entry-content h1{
margin-top: 0;
font-size:1.5em;
}

aboutページのデザイン変更の図

当ブログのaboutページは以下です。

Not Foundページ

  • 「記事の目次」という文言を削除
  • 余白の調整
/* Not Foundページ */
article.no-entry  .entry-content:before{
display:none;
}
article.no-entry .entry-content h1{
margin: 0;
}

Not Foundページのデザイン変更の図

記事のh1タグ

  • h1タグを調整
/* 記事のh1タグ */
.entry-content h1 {
font-size:1.5em;
padding-bottom: 10px;
}

今後の変更予定

  • 細かいところの修正
  • スマホ用のデザインを作る

参考サイト

【カスタマイズ用】はてなブログのHTML構造まとめ