2015年3月17日火曜日

ウィジェット「ラベル」のクラウド表示を見やすくカスタマイズしてみた | Blogger

Bloggerの「ラベル」ウィジェットの表示スタイルをカスタマイズして見やすくしました。その手法をメモしておきます。
Bloggerの「ラベル」ウィジェットは で手軽にラベルの一覧を表示できて便利なのですが、設定にクラウドを選択すると文字だけの羅列になってちょっと見づらい。
そこで、個々のラベルに枠をつけて下のように見やすくしてみました。
カスタマイズ前のラベル一覧。
クラウド表示なので使用頻度に応じて文字サイズが変化して表示されますが、
文字だけの羅列は見づらい。
カスタマイズ後。
角丸の枠で修飾。文字サイズはオリジナルのまま表示されています。

折角なので今回カスタマイズ用に追加したCSSを貼り付けておきます。
必要なら参考にしてください。

span.label-size {
  display: table;
  float: left;
  border: solid 1px #ffffff;
  background-color: #cfcfcf;
  border-radius: 6px;
  line-height: 1em;
  height: 26px;
  padding: 0px 3px;
  margin: 1px;
}

span.label-size a,
span.label-size span {
  display: table-cell;
  vertical-align: middle;
  text-decoration: none;
  color: #cc3300;
}

span.label-size span { /*リンクなしラベルの文字色*/
  color: #000000;
}


ちなみにBloggerの「ラベル」ウィジェットを使ってクラウド表示させると、ラベル名のリンクが<span class="label-size">タグで囲われます。下の様な感じで。

    <span class="label-size">
        <a>ラベル名</a>
    </span>
※ここでは説明に必要なクラス名しか表示していません。
※リンクなしのラベルは<a>タグが<span>になります。たとえば「パソコン」というラベルの投稿一覧を表示中は当該の「パソコン」には<a>タグが付かずに<span>で囲われます。

細かい説明は省きます。配色とかはお好みで適当に。
ポイントは<span class="label-size">タグのスタイルを"display: table;"にして、その子要素になる<a>(または<span>)のスタイルを"display: table-cell;"にすること。
このおかげで"vertical-align: middle;"が使えるようになり、ラベル名の枠内での上下位置を文字サイズに関係なく中央に配置できます。

くどいですが、ウィジェットの設定はリストではなくクラウドです。リストを選んでも上記のCSSは効きませんので。
「表示」の項目はクラウドに設定。
投稿数の表示はお好きなほうで。
以上です。
カスタマイズしたCSSはテンプレートのカスタマイズ画面に設置する項目があります。
設置方法の詳細も省略しますが、くれぐれも失敗してソースコードがぐちゃぐちゃにならないようにバックアップは取っておいたほうが賢明だと思われます。
..

0 件のコメント :

コメントを投稿

あずきふたつぶ。。

気まぐれな日記にお付き合いいただいてありがとう!