位置をずらしたりしています。
新着記事一覧や、ラベル一覧です。
それぞれCSSを追加しています。
他のウィジェットより目立つようCSSで指定
今回は、Feed1の表示テキストを変える、という内容で
ご紹介します。
まず、レイアウトでフィードを選択し、
Feed1を追加しているものとします。
テンプレート編集にいきましょう。
Feed1のウィジェットを展開します。
このようになっていますね。
<b:widget id='Feed1' locked='false' title='サイト名' type='Feed'>
<b:includable id='main'>
<h2><data:title/></h2>
<div class='widget-content' expr:id='data:widget.instanceId + "_feedItemListDisplay"'>
<span style='filter: alpha(25); opacity: 0.25;'>
<a expr:href='data:feedUrl'><data:loadingMsg/></a>
</span>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
です。
このままでも良いのですが、
新着記事だけ、太字にしたかったので、CSSを追加しました。
.Feed1-NEW{
font-weight:bold;
margin: 5px 0 3px 0;
}
です。
このコードを、テンプレート編集のCSSの欄に追加します。
そして、そのCSSを、該当ウィジェットで読み込むようにしなければ
なりません。
<div class='Feed1-NEW'>
</div>
で、ウィジェットコードを囲みます。
完成したコードは
<b:widget id='Feed1' locked='false' title='サイト名' type='Feed'>
<b:includable id='main'>
<h2><data:title/></h2>
<div class='Feed1-NEW'>
<div class='widget-content' expr:id='data:widget.instanceId + "_feedItemListDisplay"'>
<span style='filter: alpha(25); opacity: 0.25;'>
<a expr:href='data:feedUrl'><data:loadingMsg/></a>
</span>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
です。
今回はFeed1でトライしました。
もちろん、ラベル等、他のウィジェットも
同様のやり方でCSSを追加していけばOKです。
当ブログ内の情報は、
全ての方に応用できるとは限りません。
必ずテンプレートはバックアップを取っておいて下さいね。
また、ご利用は自己責任でお願い致します。
ラビットしま子は美容ライターであり、
サイト制作のプロではありません。
個別のカスタマイズについてのご相談は、
乗ってあげたいけど、乗れません。（わからんから）
スポンサードリンク