読者です 読者をやめる 読者になる 読者になる

ちょうどいい時まで

ミニマム&シンプルを目指してちょうど好い加減探し

初心者にも簡単。メニューバーを設置する方法

スポンサーリンク

桜が満開になっていました。

f:id:akisan01:20160404202458j:image

桜の季節は大好きですがあっという間に散ってしまうので何となく寂しさも感じます。

 

さて、先日デザインを変更しました。変更に伴いメニューバーを設置。以前スマホ版にメニューボタンを設置した際はかなり大変だったのですが、今回は思いの外簡単にできました。

あくまでも、初心者がカスタムしてみたよってお話です。

最初に私のデザインをいじれるレベルを紹介します。本当にサッパリなので何の自慢にもなりませんが…

HTMLって何?CSSって何?

記事を書くだけなら、はてなはとても書きやすくできていると思います。

しかしカスタマイズしようとなると途端に難しくなります。

そもそもHTML、CSSって何?というレベルからスタート。記事を書くにもHTML編集って何に使うのか分かりませんでした。

ヘッダ、フッタ、って何?というレベルからスタートしました(笑)

そうは言っても読みやすいブログデザインにしたい

まず考えたのはスマホにメニューボタンの設置。

はてなブログはデフォルトでカテゴリ一覧はないのかしら?と思ったのがきっかけ。

akisan01.hatenablog.jp

 この時はスマホ版のみ設置をしました。

と言っても自分ではとてもできないので公開されているコードをコピペするだけ。

ですが、初心者にとってはとても面倒で時間がかかりました。みんな頑張ってカスタマイズしてるんだな~と思っていたのですが、実は違う方法がありました。

メニューボタンが設置されているテーマがあった

はてなブログを始めてもうすぐ3か月、今まで気づきませんでした。

テーマストアには素敵なデザインがたくさんあるではありませんか!

今回カスタマイズに使用させていただいたのはこちら。

moonnote.hateblo.jp

とてもわかりやすく解説されており、パソコン初心者でも簡単にできました。

タイトル下にメニューボタンがあり、とてもスッキリしたデザインです。レスポンシブ対応でスマホでも同じデザインで使えます。

なんと楽ちん。今までPCとスマホ両方カスタマイズしていまので、とにかく面倒で面倒で。

テーマをインストールしただけではメニューバーは表示されないので、ナビゲーションメニューを表示するコードを忘れずに。

色も変えました。

テーマをインストールする際には注意

テーマをインストールする際に、既に記述されているCSSだかHTMLが消えますと、注意書きが。
 
 
見出しのデザイン変更、フォローボタン、シェアボタン等をカスタマイズしている場合は先にメモ等に保存しておくといいかもしれません。
 
私の場合はサブブログでインストールしてから、メインブログで適用しました。
 
思っていたより簡単にできましたので、オススメです。
 
もう1つ気を付けたい事が。
カスタマイズOKなテーマとNGなテーマがあるんですね。
これも、今回知りました。テーマを選ぶ際にはお気をつけください。
 
 
以上、初心者にもできる、メニューバーの設置方法でした。