ページ

新着記事一覧や、ラベル一覧にCSSを指定して、テキストを変える。

スポンサードリンク


 他のウィジェットより、あえて太字にしたり、
位置をずらしたりしています。

新着記事一覧や、ラベル一覧です。
それぞれ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 + &quot;_feedItemListDisplay&quot;'>
      <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 + &quot;_feedItemListDisplay&quot;'>
      <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です。



 当ブログ内の情報は、
全ての方に応用できるとは限りません。

必ずテンプレートはバックアップを取っておいて下さいね。


また、ご利用は自己責任でお願い致します。

ラビットしま子は美容ライターであり、
サイト制作のプロではありません。

個別のカスタマイズについてのご相談は、
乗ってあげたいけど、乗れません。(わからんから)


スポンサードリンク




・ツイート


・Google+1


・夜中にも出現します(-_-)zzz


・メルマガは3時のおやつ時
フィード登録

2015年5月26日

スポンサードリンク