はてなブログカスタマイズ:サイドバー、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ページは以下です。

• このブログについて

Not Foundページ

• 「記事の目次」という文言を削除
• 余白の調整

/* Not Foundページ */
article.no-entry  .entry-content:before{
display:none;
}
article.no-entry .entry-content h1{
margin: 0;
}

記事のh1タグ

• h1タグを調整

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

今後の変更予定

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

参考サイト

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

あわせて読みたい

• はてなブログのカスタマイズ:グローバルメニューの追加
• はてなブログのカスタマイズ:目次と見出しなど
• はてなブログのカスタマイズ:サイドバー、aboutページ、Not Foundページなど
• はてなブログのカスタマイズ:各ページのクラス名
• はてなブログのカスタマイズ:レスポンシブ対応
• はてなブログのカスタマイズ:関連記事
• はてなブログカスタマイズ:サイドバー
• はてなブログのカスタマイズ:高度なカスタマイズ
• はてなブログのaboutページの活用方法について考える
• はてなブログのアイコンフォントの使い方