Bloggerでラベルガジェットを見やすくカスタマイズし、分類別に表示する方法


 Vaster2を例に、ラベルを分類別に表示する方法 、ラベルを1行ずつ表示する方法、複数のラベルガジェットを繋げる方法を掲載しています。

ラベルガジェットを分類別に表示したい


 Bloggerのラベルガジェットは、「あいうえお順」か「頻度順」でしか、表示される順番を指定することができません。

 当サイトのように「メインは○○関連なんだけど、他のジャンルについても情報発信したい」というブログでは、メインカテゴリとサブカテゴリに分けて表示したいところです。

ラベルを分類別に分けて表示 - Bloggerの使い方

 そこで見つけたのが、上記リンク先。なるほど、ラベルガジェットを複数使うことで、分類別に表示できるようですね。

 しかし、日本人向けテンプレート「Vaster2」を利用していると、この方法で分類別表示しても見た目がダサすぎます。スティーブ・ジョブズがiPhoneの美しさにこだわったように、ブログデザインも格好良くないといけません。

 というわけで、今回は複数のラベルガジェットをつなげて、ひとつのガジェットみたいに見える方法を紹介します。

ラベルガジェットを改造しよう


 Vaster2のラベルガジェットは1行にいくつものボタンが配置されてしまうため、コンパクトなのですが見づらい仕様となっています。まずは1行に1つのボタンだけ配置されるように、CSSをいじりました。


.list-label-widget-content ul li a {
   font-size: 13px;
       color:$(label.color);
   transition:0.4s;  /* 徐々に変化させる */
padding: 6px 10px;
    border: 1px solid $(label.border);
   background-color:$(label.background);
   width: 100%;
   max-width: 278px;
   display: inline-block;
   float: left;
   clear: both;
   margin-bottom: -1px;
}
.list-label-widget-content ul li a:hover{
color:$(label.color.hover);
background-color:$(label.background.hover);
text-decoration:none;
}
.list-label-widget-content ul{
   list-style-type: none;
   padding:0;
   margin-top: -4px;
   line-height: 1.4em;
}

「HTMLの編集」にて、ラベルの項目を上記CSSに書き換えましょう。

 テンプレートデザイナー版を意識してカスタマイズしたので、通常版を使っている場合は$マークから始まる文字列を、普通のカラーコードにしてください。


 テンプレートを保存すると、上記画像のような見た目になります。何十個もラベルを表示しない場合は、こちらのほうが都合が良いですよね。

見出しタグに必須の要素


 見出しとガジェット本体がつながっていないと、いかにも「ラベルガジェットをふたつ並べてます」という印象になってしまい、格好悪いです。

 サイドバーにある特定の見出しだけ、表示を変える方法をご紹介します。


/* サイドバーのラベル見出し */
.sidebar .labelh{
font-size:120%;
border: double 3px #666666;/*見出しの枠線*/
color:#333333;/*見出しの文字の色*/
line-height: 26px;/*hタグの高さ*/
padding-left:10px; /*見出しの文字の左にスペース*/
background-color:#fff;/*backgroundタグを使う場合は不要*/
//border-left: 0px;/*borderタグを使わない場合に使用*/
margin: 0px;
margin-top: 1px;
}

「HTMLの編集」で、上のCSSをサイドバー関連の近くに置いてください。

 background-colorから下の記述は、他の見出しでも使うので消さないでください。邪魔をしている時はコメント化しておきましょう。


 HTMLの編集にて、ガジェットのHTMLコードをいじります。

 上の画像のように、ガジェット内の見出しタグにclass属性を追加して、テンプレートを保存します。


 後はHTML/Javascriptのガジェットを使って、ラベルだと分かる見出しをつけて、完成です。上の画像のように、あたかも「ひとつのガジェットで、ラベルが分類表示されている」ように見えます。

表示が崩れてしまう場合は


 ラベルごとの投稿数を表示をする場合、投稿数が枠内に収まらず、表示が崩れてしまう場合があります。その時は「HTMLの編集」にて、該当するラベルガジェット<b:widget~></b:widget>の中を、以下のコードに書き換えましょう。


              <b:includable id='main'>
                <b:if cond='data:title'>
                  <h4 class='labelh'>
                    <data:title/>
                  </h4>
                </b:if>
                <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
                  <b:if cond='data:display == &quot;list&quot;'>
                    <ul>
                      <b:loop values='data:labels' var='label'>
                        <li>
                          <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?&amp;max-results=7&quot;'>
                            <data:label.name/><b:if cond='data:showFreqNumbers'><span dir='ltr'>(<data:label.count/>)</span></b:if></a></li>
                      </b:loop>
                    </ul>
                    <b:else/>
                    <b:loop values='data:labels' var='label'>
                      <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
                        <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?&amp;max-results=7&quot;'>
                          <data:label.name/>
                        </a>
                        <b:if cond='data:showFreqNumbers'>
                          <span class='label-count' dir='ltr'>
                            (
                            <data:label.count/>
                            )
                          </span>
                        </b:if>
                      </span>
                    </b:loop>
                  </b:if>
                  <b:include name='quickedit'/>
                </div>
              </b:includable>

 本来、まるまる書き換える必要はないはずなのですが、どこが悪いのか自分も理解できていないので、とりあえずの応急処置としてご利用ください。

参考サイト


デザインに役立つCSSで作成する見出しタグのサンプル集 | KOBO TAKE
↑のを参考に、ラベル見出しのCSSを作りました。他にも色々な見出しがあるので、自分好みのデザインにカスタマイズしましょう。


この記事を書いた人

運営者:クロスグリ


 小説家志望の元ライター。
 プロの小説家になるべく、日々勉強しながらサイト運営しています。
 作品の下読み依頼や、個別相談(創作カウンセリング)等も受け付けています。
 気になったらTwitterフォローお願い致します。

このサイトについて 欲しいものリスト


スポンサーリンク

Vaster2を例に、ラベルを分類別に表示する方法 、ラベルを1行ずつ表示する方法、複数のラベルガジェットを繋げる方法を掲載しています。

コメントを投稿

[disqus]

Author Name

{picture#https://4.bp.blogspot.com/-1zLucze5Byg/WA1R7mlH4hI/AAAAAAAAAYU/2gibmrPA7AITohNOUcfZi0ZYmNEt9UM1gCPcBGAYYCw/s320/S_4860987874792.jpg} YOUR_PROFILE_DESCRIPTION {twitter#https://twitter.com/crosgre}

連絡フォーム

名前

メール *

メッセージ *

© 2016 Project "Crosgre" Self employed. Powered by Blogger.