こんばんは、うしぞうです！
また新たなブログカスタマイズに手を出してしまった…
新しい記事を書かずにブログのデザインばっかりいじって…もはや自己満ですね(笑)
本日はヤバいですよ…感動しました。
レスポンシブ対応のハンバーガーメニューを導入してみました！！
ヘッダーのメニューバーにカーソル合わせると細かいカテゴリーとかがスーッと出てくるアレです。
語彙力。
重なって表示されるのでハンバーガーみたいに見えるからハンバーガーメニュー…ってこと？ですよね？相も変わらずコピペです(笑)
2階層対応メニューバーカスタマイズ！
今回は『ミニマルグリーン』様から拝借させていただきましたm(__)m
そして今回は、とか言って以前もヘッダー下のオススメ記事カスタマイズでお借りしましたm(__)m
他にも、ミニマルグリーン様には基本的なカスタマイズやレスポンシブ対応のなんかスゴいカスタマイズも数多くありますのでぜひぜひ！
コピペ後いじったところ！
んで例によってコピペなので元のCSSとかはミニマルグリーン様でご覧くださいませませ！！
- メニューの階層数、順番の変え方
- 色や文字サイズなど基本的なデザイン
などはコード内で書き換えるとこが明記されているのでそのままいじいじしてもらって…僭越ながら私がいじいじしたところをサラッと紹介します！サラッと！！
カテゴリー名の横にアイコン！
私お得意のはてなブログの公式アイコン使い回しでございます。
はてな公式アイコンの使い方についてはこちらから～！！
プロフィールアイコン、フォントを微調整！
私のブログでメニューバーをスマホから見るとこんな感じ。
なんか超それっぽくないですか？？いや何がそれっぽいのか知らんけどメニューボタン押したらｽｽｯてメニュー出てくる感じとかマジでなんかスゴい。
語彙力(2回目)
- メニューのカテゴリー数を変えて
- 下のフォローボタンもやってないSNSとかは外して
プロフィールのアイコンと、うしぞう～idの部分を少しいじりました！
<div class="drawer-title">Profile</div>
<p><img src="プロフィール画像URL" alt="プロフィールアイコン " class="profile-icon"></p>
<p>id:プロフィール名
<br>プロフィール説明文を入れて下さい。</p>
元のコードはこんな感じです。普通にpタグでの記述だったので記事編集の要領で
<div class="drawer-title">プロフィール</div>
<p> <img src="プロフィール画像URL" height="100px" alt="プロフィールアイコン" class="profile-icon"></p>
<p><span style="font-size: 150%;">プロフィール名</span>
<br>(自分のid)<i class="badge-type-pro"></i>
<br>プロフィール説明文を入れて下さい。</p>
赤字部分をこんな感じにいじらせていただきました（*´∀｀*）
- プロフィール画像の大きさ調整『height="(適度な数字)px』
- 『font-size: (適度な数字)%』でプロフィール名の大きさ調整
あとは改行してidと、はてなプロのアイコンを表示する行を追加した感じです(^▽^)/『i class="badge-type-pro』がはてなプロのアイコンですね♪
idとプロのアイコンに、はてなプロフィールへのリンクとか貼ってもいいかもしれませんが…あれってみんな見るのかしら？今回は省略。
ぶっちゃけあまりカスタマイズし過ぎるとはてなブログだと気付かれず、読者登録などをスルーされかねないのでとりあえずidが書いてあると分かりやすくていいかも？と書くだけ書いておきました(笑)
はてなの活動に消極的で読者様を増やす努力を怠っている私が何を言うか。
読者様は神様です！
まとめ：メニューバーのレスポンシブカスタマイズ♪
ということでメニューバーのレスポンシブカスタマイズ法でしたー！！
あとスマホのメニュー画面下に広告なんか貼るのもそれっぽくなっていいかも！
てかカテゴリーのメニューバーが量産できるので感動して増やしまくりましたが…
各カテゴリーごとの記事が少な過ぎる問題ｗｗｗ
#ブログ書け。ありがとうございました！
