※2016/2/19
一部情報が古かったため、一部書きかえました。

BizVektorをご利用のみなさま、ページ制作をしている時に、cssで見た目を装飾したいけど書くのが手間だなと思ったことはありませんか？
実はBizVektorには固有のcssクラス名がいくつか用意されているんです。

今回は、そのクラス名をどどんと紹介していきたいと思います！

css書くのが手間だなと思っていたそこのあなた！是非ご利用ください(｀・ω・´)

リードテキストの装飾

文章を書くときにタイトル（大見出し）、リードテキスト（全文）、本文の順にかいたりしますが、このリードテキスト用のクラスです。
タグに「.leadTxt」をつけると以下のように装飾されます。

html部分

<p class="leadTxt">本文よりも文字サイズが大きくなります。</p>

ブラウザ上の見え方

本文よりも文字サイズが大きくなります。

 

ボタンの装飾

リンクボタンのクラスです。テキストリンクだと物足りない時にどうぞ！
以下のようにaタグに「.btn」をつけると装飾されます。さらにサイズもSサイズ、通常サイズ、Lサイズがあります。

html部分

<a class="btn btnS" href="#">ボタンSサイズ</a>
<a class="btn" href="#">ボタン通常サイズ</a>
<a class="btn btnL" href="#">ボタンLサイズ</a>

ブラウザ上の見え方

ボタンSサイズ
ボタン通常サイズ
ボタンLサイズ

フローボックスの装飾

「制作の流れ」や「注文の流れ」など、分かりやすく見せたい流れ図用のクラスです。
ブロックレベル要素のタグに「.flowBox」をつけ、定義リストの＜dl＞＜dt＞＜dd＞タグを入れると以下のように装飾されます。

html部分

<div>
<div class="flowBox">
<dl>
<dt>フローボックスタイトルです。</dt>
<dd>フローボックス本文です。フローボックス本文です。フローボックス本文です。</dd>
</dl>
</div>
<div class="flowBox">
<dl>
<dt>フローボックスタイトルです。</dt>
<dd>フローボックス本文です。フローボックス本文です。フローボックス本文です。</dd>
</dl>
</div>
<div class="flowBox">
<dl>
<dt>フローボックスタイトルです。</dt>
<dd>フローボックス本文です。フローボックス本文です。フローボックス本文です。</dd>
</dl>
</div>
</div>

ブラウザ上の見え方

フローボックスタイトルです。
フローボックス本文です。フローボックス本文です。フローボックス本文です。
フローボックスタイトルです。
フローボックス本文です。フローボックス本文です。フローボックス本文です。
フローボックスタイトルです。
フローボックス本文です。フローボックス本文です。フローボックス本文です。


※サンプルのように外枠をdiv要素で囲ってください。divで囲わないと、最後のフローボックスの矢印が消えません

よくある質問ページで使うQ&Aの装飾

よくある質問のページ用のクラスです。アイコンで分かりやすい装飾になっています。
定義リストのdlタグに「.qaItem」をつけ、＜dt＞＜dd＞タグに質問と回答をいれると以下のように装飾されます。

html部分

<dl class="qaItem">
<dt>質問内容が入ります。</dt>
<dd>回答内容が入ります。</dd>
</dl>

ブラウザ上の見え方

質問内容が入ります。
回答内容が入ります。

 

blockquote要素の装飾

クラス名ではありませんが、＜blockquote＞で文章を囲むと、枠が装飾されます。

html部分

<blockquote>
blockquoteで囲まれた文章が、枠で囲まれます。
</blockquote>

ブラウザ上の見え方

blockquoteで囲まれた文章が、枠で囲まれます。



いろいろな場面で使用できそうなクラス名がたくさんありましたね！
是非使ってみてくださいね!!

この記事を書いた人

kunou
スタッフのクノウです。
ワードプレス勉強中です！phpは苦手です…。
好きなことは絵をかくこと、お酒を飲むこと、カラオケです。よろしくお願いします。

スポンサーリンク
投稿タグ