●参考サイトURL
BloggerブログのCSSへのソース追加と、ラベルウィジェットソースのカスタマイズをしたのでその手順を記します。
◆CSSに登録するソース(柔軟材サイトに掲載されていたもの)
/* Lable Cloud
----------------------------------------------- */
#labelCloud a {
text-decoration: none;
white-space: nowrap;
line-height: 130%;
}
#labelCloud span.label_xs {
font-size : 75%;
opacity : 0.2;
}
#labelCloud span.label_s {
font-size : 90%;
opacity : 0.4;
}
#labelCloud span.label_m {
font-size : 120%;
opacity : 0.6;
}
#labelCloud span.label_l {
font-size : 150%;
opacity : 0.8;
}
#labelCloud span.label_xl {
font-size : 200%;
opacity : 1.0;
}
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'> <b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<span id='labelCloud'>
<b:loop values='data:labels' var='label'>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<b:if cond='data:label.count > 20'>
<a expr:href='data:label.url'><span class='label_xl' expr:title='data:label.count'><data:label.name/></span></a>
<b:else/><b:if cond='data:label.count > 10'>
<a expr:href='data:label.url'><span class='label_l' expr:title='data:label.count'><data:label.name/></span></a>
<b:else/><b:if cond='data:label.count > 5'>
<a expr:href='data:label.url'><span class='label_m' expr:title='data:label.count'><data:label.name/></span></a>
<b:else/><b:if cond='data:label.count > 1'>
<a expr:href='data:label.url'><span class='label_s' expr:title='data:label.count'><data:label.name/></span></a>
<b:else/>
<a expr:href='data:label.url'><span class='label_xs' expr:title='data:label.count'><data:label.name/></span></a>
</b:if></b:if></b:if></b:if>
</b:if>
</b:loop>
</span>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
- CSSソースの追加 Bloggerブログのダッシュボードから「テンプレート」をクリックします。「テンプレート」の「カスタマイズ」を選び、Bloggerテンプレートデザイナーの「アドバンス」をクリック、メニューの中から「Add CSS」をクリックすると右側に「Add custom CSS」にテキストボックスが表示されます。上記の「柔軟材」サイトのCSSソースをコピーして貼り付けます。最後に「ブログに適応」ボタンをクリックして登録します。
- ラベルウィジェットのソースをカスタマイズ CSSソースの追加が済んだら、「Bloggerに戻る」リンクをクリックして「テンプレート」画面に戻ります。「テンプレート」の「HTMLの編集」を開きます。「HTMLの編集」画面が表示されたら「続行」ボタンをクリックします。HTMLの編集のソース表示画面で「ウィジェットのテンプレートを展開」のチェックボックスをオンにします。ソース内のラベルウィジェット部分のソースを上記ソースに書き換えます。"data:label.count > n"のn部分を書き換えることで、ブログのラベルごとの件数構成に合わせることでサイズ調整が出来ます。ソースを書き換えたら「テンプレートを保存」ボタンをクリックします。
これで作業は終了です。
0 件のコメント :
コメントを投稿