Vaster2 デザイン

【Vaster2】ラベルをシンプルに見やすくレイアウトする方法

Bloggerにはラベルという機能がありまして、記事の分類わけや抽出ができる非常に便利な機能なのですが・・・長くブログを続けていると色々とアレンジしたくなる部分でもあります。

Vaster２でラベルをサイドバーに表示するとこんな感じです。
（ここではカテゴリーという名称になっています）

ブログを始めたばかりの時は、ラベルの数が少ないため、すっきりした感じに見えますが、ブログを続けていると様々なラベルが増えてきてしまい、読者が押してくれそうもない感じのサイドメニューになってしまうんです。。。


ちなみに、下のラベルは私の別サイトのものですが・・・

こんなの貼ってあっても、なにがなんだかさっぱりで、活用してくれる読者さんなんかいなさそうですよね～



そこで今回ご紹介するのは、ラベルをわかりやすくすっきり表示させる方法です。

イメージはこんな感じ。

フリーワード検索もつけて、ラベルを大分類→小分類のような階層に分けてレイアウトしています。

このほうが、ブログの全体像が見えやすく、興味のあるところをクリックしてくれそうな気がしませんか？？






早速手順をご紹介

検索ボックスの設置

まずは検索ボックスの設置ですが・・・

ガジェットのブログ検索を使っています。

タイトルをお好きなものに変更して保存するだけ（私は「キーワード検索」にしています）

ラベルをHTMLで記述する

次にガジェットのHTMLを先ほどのブログ検索の下に追加します。

階層式のラベルはここに直接HTMLを書き込んでいく感じです。
一応HTML初心者の方でも、それほど難しくないので、勉強がてらお試しください。
という私も初心者ですが・・・(;^ω^)

タイトルは、上のブログ検索と連なった感じにするのであれば、空白でOKです。
ブログ検索と別々に表示したい場合は、タイトルをつけてください。

で、実際の記述方法ですが・・・

下の基本のHTMLを組み合わせて記述していきます。

基本のHTMLコード

●テキスト表示　　　<a>表示したい文字列</a>

●太字のテキスト　　<b><a>表示したい文字列</a></b>

●リンク　　　　　　<a href="【リンク先のアドレス】">表示したい文字列</a>

●リンク（太文字）　<b><a href="【リンク先のアドレス】">表示したい文字列</a></b>

●改行　　　　　　　<br/>

サイドバーに「表示したい文字列」がある場合・・・

HTML画面内に「表示したい文字列」を<a></a>で囲んであげると、サイドバーにテキストが表示せることができます。
さらに<b></b>で囲んであげると、そのテキストが太文字に変化します。

次に、「表示したい文字列」をクリックすると指定したリンク先にページが移るようにするためには、<a>の中にテキストのスタイルを記述してあげます。

リンク先に飛ばしますよ～っていうスタイル記述は href="【リンク先のアドレス】"になります

ちなみにフォントサイズや色などのアレンジをしたい場合もここでスタイルを指定してあげます。

「style=""」を活用する

<a>のフォントサイズやフォントカラーを変更するときは、「style=""」をaの後ろに追加します。

●フォントサイズ　font-size : 14px;　（大きさはお好みで）
●フォントカラー　color: #ff0000;　　（WEB色見本で好きな色のコードを検索できます）
●リンクの下線を消す　text-decoration: none;

～例～

<a style="font-size : 24px; color: #ff0000; ">こんな感じに変更できます</a>

↓これを表示すると・・・

こんな感じに変更できます

このほかにも罫線や枠組みなど様々なスタイルを追加することができますよ～

では上記のHTMLの基本を組み合わせて実際の記述例を挙げてみます。
※HTML中のテキスト部分のスペースを視認できるように「□」で表現してあります。

<b><a href="[リンク先のアドレス]">Blogger</a></b>
<br />
<a>□</a>
<a href="[リンク先のアドレス]">デザイン</a>
<a>/</a>
<a href="[リンク先のアドレス]">カスタム</a>
<a>/</a>
<a href="[リンク先のアドレス]">小技</a>

↓↓↓

Blogger
　 デザイン / カスタム / 小技

リンク先の検索方法

最後にリンク先のアドレスの作り方ですが・・・
ラベルで記事のソートを行う場合は

https://ブログのアドレス/search/label/ラベル名

で記事のソートをかけることができます。

ちなみに、ラベルのAND検索やOR検索も可能でして

AND検索

★条件となる複数ラベルを「+」で並べていく

https://ブログのアドレス/search/label/ラベル名１+ラベル名２・・・

OR検索

★条件となる複数ラベルを「label:ラベル名」で追加していき「|」で区切る

https://ブログのアドレス/search/?q=label:ラベル名1|label:ラベル名2・・・

※日本語のラベル名は、保存すると自動的にURLエンコードが行われ暗号文字のように変化します。



この方法でラベルの整理をする場合のデメリットは、新しいラベルを作成するたびにあHTMLの記述を追加しなければならない点ですが、逆に考えれば、古い記事の使わないラベルをあえて表示させないようにするなどの編集ができるというメリットもあります。