Bloggerのナビゲーションバーでカテゴリ別に記事を整理

2019年11月9日土曜日

Blogger Bloggerカスタマイズ

t f B! P L

Bloggerのナビゲーションバーはページへのリンクを想定

ナビゲーションバーとは、各カテゴリの情報へ素早くアクセスするためのリンクで、通常ブログタイトルの直下に設置されます。Bloggerでは、ブログ記事の他に「ページ」を作ることができ、ホームであるブログ記事と各ページへのリンクを入れるページガジェットが標準で提供されていて、これがいわゆるナビゲーションバー的な役割を担っています。

ナビゲーションバーで各カテゴリの記事へのリンクを設定したい

Bloggerのヘルプには、ページの説明として下記の記述があります。

「概要」や「お問い合わせ」などの内容をほとんど変更せずに常に表示するコンテンツには、ページを作成することができます。作成したページは、上部のタブまたは横側にリンクとしてブログに表示されます。

しかし私の使い方ではページに書くようなことは思いつかず、ページガジェットは削除していました。 最近ブログの題名を「ちゃり改造日記」とか名付けている割には全然違うことも節操もなく書いているため、「自転車」、「DIY」、「アウトドア」など、カテゴリ別に整理されたリンクを設置したいと思うようになりました。

各記事にはラベル付けしているのでラベル一覧で各カテゴリの記事を表示することはできるのですが、ラベルガジェットが見栄えがアレなのでナビゲーションバーから大きなカテゴリ分けされた記事へのアクセスができないかと思い、やってみました。

ページガジェットの外部リンク機能を使う

ページガジェットにはページへのリンクの他に、外部リンクを設定することができます。 Bloggerでは http(s)://ドメイン/search/label/ラベル名 で特定のラベルが付けられた記事の一覧を表示させることができるので外部リンクにこのようなアドレスを設定することで目的が達成できました。

ページガジェットの設置と外部リンク設定のしかた

Bloggerのレイアウト編集画面でヘッダーの下、Cross-Columnの「ガジェットを追加」をクリックします。

ガジェット一覧が表示されるので「ページ」ガジェットを選択して追加します。

ページガジェットの編集で「外部リンクを追加」を選択。

ウェブアドレス(URL)に http(s)://ドメイン/search/label/ラベル名 を入れます。ページタイトルはアドレスバーに表示される文字になるのでラベル名を入れれば良いです。

外部リンクをいくつか追加しました。

ブログのトップページを表示するとナビゲーションバーが表示されています。

例えば「自転車」をクリックすると自転車のラベルが付いた記事一覧が表示されます。

ちょっといまいちなところ

「ホーム」をクリックすると「ホーム」ボタンの色が変わり、今「ホーム」にいるのだな、とわかりますが、「自転車」をクリックしても「自転車」ボタンの色は変わらず、今どこにいるのかひと目でわかりません。

その代わりにナビゲーションバー直下に「ラベル 自転車 の投稿を表示しています」とコメントが出てくるのですが、この表示が邪魔です。

おそらくテーマのHTMLを直接編集するとこのあたりも変更できると思うのですが、今後の課題としたいと思います。

関連記事

Bloggerに日本ブログ村のバナーを見映えよく貼る方法

このブログを始めたとき、少しでも多くの人に読んでもらえればと思い日本ブログ村(以下ブログ村)に登録しランキングに参加しました ...

Blogger 人気の投稿ガジェットをカスタマイズ

「人気の投稿ガジェット」 の見た目をカスタマイズした際に調べた知識をまとめてみます...

定型文入力支援ツール Lintalist でテキスト入力を楽々に

日頃PCで作業していると、自分の名前、メールアドレスなどよく使うテキストを繰り返し入力することがあります ...

QooQ