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

更新日: 公開日:

t f B! P L

Bloggerテーマの「QooQ(クーク)」の一番上には、ナビゲーションバー表示されます。

このナビゲーションバーの表示内容を変更する方法を紹介します。

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

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

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

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

Blogger ナビゲーション編集

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

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

Blogger ページリストを設定

ナビゲーションの表示位置を変更

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

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

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 ナビゲーションをカスタマイズ

このブログを検索

カテゴリ

プロフィール


こんにちは!

まあちゃん&うさたん のママです。


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


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


QooQ