Bloggerの「ナビゲーション」をカスタマイズする方法

2019/12/23

t f B! P L

Bloggerの画面の一番上に表示されているナビゲーションバーの表示を変更します。

Blogger ナビゲーションをカスタマイズ

Blogger ナビゲーションの項目を変更

まず、ナビゲーションバーに表示されている項目を変更します。

Bloggerメニューの [レイアウト] を選び、ナビゲーション の「編集」をクリックします。

Blogger ナビゲーション編集


ページリストを設定」ウィンドウが表示されるので、表示させたいページをと順番を指定します。

今回は、サイトマップ利用規約お問い合わせ を選択しました。

Blogger ページリストを設定

Blogger ナビゲーション表示を変更

ナビゲーション項目の表示位置を、左側から右側に変更します。

いっしょに、文字のサイズも少し小さくします。

HTML編集

BloggerのHTMLを編集します。

念のためバックアップをとってからHTMLの編集を行ってください。
Bloggerのメニューの [テーマ] >右上のその他アイコンBlogger その他アイコンをクリック。

Blogger テーマのその他アイコン


メニューの [HTMLを編集] をクリックします。

Blogger HTML編集


表示されたHTMLの、次の2ヵ所を変更します。
  • font-size: 1.5rem; → font-size: 1.3rem;
  • justify-content: flex-end; を追加
/****************************************
    ナビゲーション
*****************************************/
#navigation{
  padding: .2em 0 .2em 0;
  font-size: 1.3rem;          /* 文字サイズを1.5→1.3に変更 */
  background: $(brand.subcolor);
  color: $(brand.subfont);
}

#navigation-content ul{
  display: flex;
  justify-content: flex-end;  /* 追加:フレックスアイテムを末尾に */
  flex-wrap: wrap;
}

画面右下の保存ボタンをクリックして保存します。
Blogger HTML保存ボタン

Blogger ナビゲーションの表示を確認

左側に表示されていた ナビゲーションの項目が、少し小さい文字で、右側に表示されました。

Blogger ナビゲーションをカスタマイズ

このブログを検索

カテゴリ

プロフィール


こんにちは!
やんちゃな兄弟 まあちゃん&うさたん のママです。

ラズベリーパイを使った簡単な電子工作やプログラミングに挑戦しています。

よかったら、詳しいプロフィールも見てください。

QooQ