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

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

 menu

はてなブログのカスタマイズ(グローバルメニューの追加)

動機

せっかくブログを開設したので、色々と変えていきたいと思います。まずはフォントと色が気になったので、そのあたりを中心に変更しました。他にも変更したいところがあるので、追々対応します。

使用テーマ

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

全体的な変更

  • サイトのイメージカラーを青系に変更
  • 背景色を変更
  • フォントを変更
  • 余白を調整

変更内容

ヘッダー

  • グローバルメニューを追加
  • グローバルメニューにアイコンフォント(?)を使用(トップのお家のマークのところ)
    • 名称がよく分かりませんが、はてなブログで事実上使用できるアイコンフォント(?)を使用

以下のサイトを参考にグローバルメニューを追加しました。当ブログに合うように変更を加えています。

参考サイト

【ブログカスタマイズ】「はてなブログ」でグローバルメニュー追加する方法を紹介

サイド

  • うっすら付いていた背景色を無効化

よく見るとサイド部分にうっすらと背景色が付いていたので、無効化してスッキリさせました。

コンテンツ

  • 目次のデザインを変更
  • 見出しのデザインを変更

記事の区切りが分かりにくかったので、見出しを変更しました。

変更前のサイトデザイン

サイトデザイン変更前 シンプルでカスタマイズしやすそうなデザインでしたので選びました。メリハリを付けようと思い、以下のようなデザインに変更しました。

変更後のサイトデザイン

サイトデザイン変更後

今後の変更予定

  • 見出しのデザイン
    • 暫定デザインです。より良いデザインがないか検討中です。
  • 目次のデザイン
    • 暫定デザインです。より良いデザインがないか検討中です。
  • 余白の調整
  • フォントサイズ調整
  • 字間の調整
    • 字間が詰まっていて読みにくいので、調整します。
  • トップページ以外の変更
    • 記事数が増えてから検討します。
  • その他の微調整

暫定的に作ったデザインですので、今後もデザイン変更があると思います。変更したら、また記事にしたいと思います。見やすく、読みやすいブログにすることを念頭に制作いたします。