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」を導入検討する