はてなブログ超初心者がブログをシンプルなデザインにカスタマイズするのに役立ったサイト一覧
早くもアヤサカがはてなブログを始めて、約２週間が経ちました。
ブログを本格的に書くのは始めてなので、本当に色々なサイトでの情報に助けられてきました。感謝、感謝です！この記事では、アヤサカがはてなブログを始めて２週間、ブログを色々とカスタマイズしていく中で、とても助けられたサイトをご紹介したいと思います。
目次
1. はてなブログにグローバルメニューを表示する
ウェブサイトにグローバルメニューがない！という状態は、アヤサカにとっては違和感だったので、とにかくグローバルメニューだけでも表示させようと思いました。
ちなみに、グローバルメニューというのはこちらです。
せっかく自分のブログを訪問してくれた方が1つの記事だけを読んで去る、なんて残念なことにならないように絶対メニューが必要だと思ったことも理由です。
そこで役立ったのがこちらのブログ。
こちらは、PC版ではグローバルメニューを表示し、スマホ版ではトグルメニューを表示する方法が紹介されています。
コピペできるコードも丁寧に掲載されているので、アヤサカのような少しだけHTMLが読めるような初心者でも大丈夫でした。ほとんどそのまま使わせていただきました。
ただ、ここで次にアヤサカが困ったのが、ブログデザインのテーマ選びでした。
グローバルメニューとトグルメニューを簡単に両立できて、なおかつあまりデザインの調整が不要で、自分好みのシンプルなデザインにするにはどのテーマを選べばいいのか迷いました。
2. はてなブログのレスポンシブテーマ
シンプルなデザインで、スマートフォンなど端末にも対応したレスポンシブなデザインが良いなと思い、色々と迷いながらもたどり着いたのがこちらでした。
こちらでは、はてなブログ公式テーマとユーザが作成したテーマ合わせて24種類のテーマが紹介されています。
結局アヤサカは色々と迷った挙句、はてなブログの公式デザインの1つである「Evergreen」を選ぶことにしました。
紹介されていた他のデザインテーマも、どれもとても洗練されていてアヤサカ好みのシンプルなデザインだったのですが、まずは、はてなブログ公式デザインから始めてみようと思ったことと、こちら「Evergreen」は前述の「1. はてなブロブにグローバルメニューを表示する」で参考にさせていただいたコードとの相性が良かったことが決め手になり、こちらに決めました。
3. はてなブログのヘッダーを消す
3つ目にカスタマイズで実現したかったのがこちら、はてなブログのヘッダーを消す、でした。
というのも、先述の「1.グローバルメニューを表示する」でせっかく実現できたスマホ版表示でのトグルメニューが、はてなブログのヘッダーに重なって表示されてしまったからです。操作性が良くなかったので（メニューをクリックしようとしたら、その下にあるはてなブログのボタンをクッリクしてしまう）、それならば、はてなブログのヘッダーを消してしまおうということになりました。（ちなみに、ヘッダーの削除ができるのはProユーザのみです。）
そこで参考にさせていただいたのがこちらです。
こちらの記事でもコピペできるコードが掲載されていたので、そのまま使わせていただきました。
という感じで色々と他の方の情報を参考にさせていただいて、
作成できたのがこちらです。
「アヤサカ生活」PC版
「アヤサカ生活」スマホ版（「MENU」クリック前・後）
参考にさせていただいた記事を投稿されているブロガーの皆さん、
ありがとうございました！
