はてなブログにボトムナビゲーションを設置してみた♪

はてなブログ(無料版)のHTMLとCSSを触ってボトムナビゲーションを作っていて、時間が溶けました🫠

ボトムナビゲーションっていうのは、ブログの下の方に固定されている帯みたいなところに、メニューやらSNSやらへのリンクが貼られているあれです。

こんな感じのん↓

↑の赤と赤の線で挟んでいるところね。

これは、まだ設定がうまくいかなくて試行錯誤していた時のね。

帯の高さが高すぎるー💦💦
微調整が必要です。

↓

こうこう！やっと良さげになりました。
はてなブログ(無料版)では最下部に勝手に広告が表示されていて、ここにボトムナビゲーションがピッタリ重なって見られなくなってしまっていたのです。

ここの高さがいい感じに調整できました🥹✨✨✨
やったー。

この記事の画像で出しているはてなブログは、わたしの有料note内に登場するブログです。

今はスマホで見ている人がとっても多いので、スマホで見た時に見やすくて、回遊しやすいようにカスタマイズしていってるところです＾＾

上記の有料noteで特典としてお届けしている、アドセンスに合格しやすいはてなブログを一から作れる特化ブログ(長い...)も同じように、ボトムナビゲーションを設定してみました♪

ボトムナビゲーションはあなた好みでアレンジできます。

わたしは左から順番に
・ホーム
・メニュー
・はてなブログの読者登録
・姉妹ブログ

を設定してみました。

ここに、X(SNS)へのリンクを入れても良いですね〜。

はぁーー
これも時間が溶けた⏰

このやり方も有料noteの特典内のブログにやり方を載せています。
どんどんアップデートしていってますよ🌷🌷🌷

メニューをクリック(タップ)すると

こんな感じにしてみました。

この記事に登場するはてなブログはどちらも↓

ここで、ブログのURLをまるっとご紹介してます。

ブログのデザイン
HTMLやCSSをちょこちょこ触っているので、見た目が前とは変わっていますが、前と同じブログです😆

調べながらあれこれして
イヤーーー！またやらかした💦💦

とくり返しながらも楽しみながらやってます♪