Read Article

【el plano : 005】DigiPressテーマ「el plano」装飾用スタイルシート、ラベル表示の使い方



el plano には「装飾用スタイルシート定義」が実装されており、これらを活用することによりコンテンツを装飾したり、レイアウトを施したりすることができます。

この記事では、ラベル表示についての方法を記載しています。


ラベル表示のみ

<span class="label label-primary">ラベル</span>

ラベル


<span class="label label-orange">ラベル(オレンジ)</span>

ラベル(オレンジ)


<span class="label label-pink">ラベル(ピンク)</span>

ラベル(ピンク)


<span class="label label-green">ラベル(緑)</span>

ラベル(緑)


<span class="label label-red">ラベル(赤)</span>

ラベル(赤)


<span class="label label-blue">ラベル(青)</span>

ラベル(青)



ラベル表示 + 右側のテキスト表示

<span class="label label-primary">ラベル</span><span>ラベル右のテキスト</span>

ラベルラベル右のテキスト



ラベル表示 + 直下のテキスト表示

<p class="label label-primary">ラベル</p>
ラベルをPタグで括って改行した位置に挿入したテキスト。

ラベル


ラベルをPタグで括って改行した位置に挿入したテキスト。
 


あとがき


このブログは、当初無料ブログサービスのSeesaaブログを利用して始めました。その中で、ラベル表示をCSSを駆使して表示してみました。


el plano では、実装されているスタイルシート定義で簡単に表示させることができます。

無料ブログにはない「多機能さ」に付加価値を感じられます。
見栄えもしますので、有効活用していきたいと思います。
 

スマートフォン対応カスタマイズ型WordPressテーマ
「el plano」を導入検討する




 
URL :
TRACKBACK URL :

LEAVE A REPLY

*
*
* (公開されません)

Return Top