2010年10月20日水曜日

Bloggerでカンタンにグローバルナビゲーションを付ける

スポンサーリンク

Bloggerでカンタンにグローバルナビゲーションを付ける方法です。

といっても、複雑なことはほとんどありません。
なぜなら、ガジェットを追加する位置と、テンプレートデザイナーの「タブ」の存在が効果的に利用できるからです。


グローバルナビゲーションについて


最初に、今回のグローバルナビゲーションの内容について少し。

グローバルナビゲーションと書いていますが、実際には各投稿に付けられる「ラベル」を利用しているだけです。
その為、導入方法によっては「ページ要素」「テンプレートデザイナー」「HTMLの編集」で多少カスタマイズする必要があります。

グローバルナビゲーションの作り方


作り方によって変わる点もありますが、基本は同じです。

「ダッシュボード」にログインし、「デザイン」に入ります。
その後「ページ要素」を選択します。

ページ要素内にある一番上の部分の「ガジェットを追加」をクリックします。

ガジェットの追加

あとはどのようなナビゲーションを作るかによって、追加するガジェットの種類を決めます。

最上部のガジェットの特徴

今回追加しているガジェットの位置は、少し特殊です。

「テンプレートデザイナー」の「アドバンス」内にある「タブ」という設定が影響する場所だからです。
ホバー時を含めたリンクの色と背景も「タブ」で簡単に指定できます。

テンプレートデザイナー

加えて、<ul>でマークアップした場合{ display:inline; list-style-type:none; }と同じ様な体裁で表示されます。
つまり、サークルなどが表示されずに横並びになります。

ちなみに<ol>でも横並びになりますが、数字が表示されます。

このように、今回の記事ではキモになる部分です。
反面テンプレートデザイナーの仕様が変わると利用できなくなる方法ではありますが...。
導入する為のハードルの低さは魅力的だと思います。

ラベルをそのまま利用する

ラベルの数が少なく、細かい並び順を気にしない場合は一番簡単な方法がとれます。

追加するガジェットとして「ラベル」を選択するだけです。

選択の際、件数を表示してしまうと表示がおかしくなりますので、件数は消した方がより簡単です。
並び順は「あいうえお順」と「頻度順」が選べますので、必要に応じて選択して下さい。

以上で完成です。

ラベルを新しく選んで利用する

付与したラベルの数が多すぎたり、ラベルの並び順を整えたい場合。
上記の方法だと問題が生じます。

そこで、ナビゲーションに使うために新しくラベルを用意するか、既存のラベルの中から必要な選び出します。
新しいラベルでも既存のラベルでも同様ですが、全ての記事を分類し、もれなくラベルを付与してください。

「投稿を編集」画面で、記事名の左にあるチェックボックスにチェックを入れてから、上部の「ラベル操作」を利用すると手早く付与できるでしょう。

ナビゲーションラベルの準備ができたら、前述の場所に「ガジェットを追加」で「HTML/JavaScript」を選択します。
その中で<ul>でマークアップしたリストを作り、ラベルを入れ込みます。

最後に各ラベルのリンク先URLを調べてリンクを張って完成です。

なお<ul>にclassやIDを指定しておけば、「HTMLの編集」でCSSを追加して装飾ができます。

補足


以下に簡単な補足を。
蛇足とも言えますが。

グロバルナビゲーションに使うラベルのリンク先

グロバルナビゲーションに使うラベルのリンク先を調べるには、実際に付けたラベルをクリックするとURL欄で確認できます。

また、実際には

  • ”ブログアドレス/search/label/ラベル名”

になっているはずですので、簡単にリンクを設定できます。

参考


この記事を書いた後に知ったのですが、よりスマートかつビジュアル的にリッチなグローバルナビゲーションを導入する方法を、詳細に書いたページがあります。
以下のリンク先をご覧下さい。

Blogger カスタマイズ情報ブログ様のグローバルナビゲーション

Blogger カスタマイズ情報ブログ」のChocoさんの記事です。


いつもながら詳細で有益な記事ですので、参考にどうぞ。

結び


なぜグローバルナビゲーションの様なナビゲーションをブログに付けたかと言えば、出来るだけ多くの記事を見てもらう為です。

ブログで良く利用されるナビゲーションは、人気の記事や最新の投稿などです。
これだけでは全体が掴めませんし、人気のない記事への導線がありません。

そこで、ラベルによってユーザーの興味を絞った上で、記事を一覧表示できるページへのリンクを考えたました。

最近付けたばかりなので効果の程はまだ分かりませんが...。
閲覧数が増えれば、と思います。

スポンサーリンク

0 件のコメント :

コメントを投稿