BizVektor ページ装飾指定一覧表
BizVektorには固有のcssクラス名がいくつか用意されています。
コンテンツ制作用のチートシートをご用意いたしましたので、サイトのコンテンツ制作にご利用ください。
サイトの装飾用
| クラス名 | 機能説明 |
|---|---|
class="leadTxt" |
文章を書くときにタイトル（大見出し）、リードテキスト（全文）、本文の順にかいたりしますが、このリードテキスト用のクラスです。 本文よりも文字サイズが大きくなります。 |
class="btn" |
リンクボタンのクラスです。aタグにクラスをつけてください。Lサイズがあります。 |
class="btn btnS" |
Sサイズのリンクボタンのクラスです。aタグにクラスをつけてください。 |
class="btn btnL" |
Lサイズのリンクボタンのクラスです。aタグにクラスをつけてください。 |
class="flowBox" |
「制作の流れ」や「注文の流れ」など、分かりやすく見せたい流れ図用のクラスです。 ブロックレベル要素のタグに「class=”flowBox”」をつけ、定義リストの＜dl＞＜dt＞＜dd＞タグを入れると装飾されます。 これを１セットとして流れの数だけ積み重ねます。 class=”flowBox” を指定したHTML全体をdivなどで囲うと、最後のflowBoxの下には矢印が表示されなくなります。 |
class="qaItem" |
よくある質問のページ用のクラスです。アイコンで分かりやすい装飾になっています。 定義リストのdlタグに「class=”qaItem”」をつけ、＜dt＞＜dd＞タグに質問と回答をいれると装飾されます。 |
class="sectionFrame" |
枠が装飾されます。 |
blockquote |
クラス名ではありませんが、＜blockquote＞で文章を囲むと、枠が装飾されます。 |
レスポンシブ対応用のクラス名
| クラス名 | 機能説明 |
|---|---|
class="resImage-mobile" |
imgタグに class=”resImage-mobile” クラスを設定する事によって、画面サイズが小さい場合に画像ファイルを切り替える事が出来ます。 モバイル用の画像は、通常の画像のファイル名の末尾に _mobile を追加します。 ※画像は「PC、タブレットサイズ用」と「モバイル用」の2種類用意する必要があります。 sample.jpg ・・・ PC、タブレットサイズ用画像 sample_mobile.jpg ・・・ モバイル用画像 |
class="show-mobile-tab" |
class=”show-mobile-tab”クラスを設定したタグの中の要素が、モバイル、タブレットサイズ以下の場合は表示されます。 |
class="show-tab-full" |
class=”show-tab-full”クラスを設定したタグの中の要素が、タブレットサイズ以下の場合は非表示になり、タブレットサイズ以上の場合は表示されます。 |
class="show-full-only" |
class=”show-full-only”クラスを設定したタグの中の要素が、画面サイズが小さい場合（966px以下）は非表示になり、画面サイズが大きい場合（967px以上）は表示されます。 |
class="resImgTxtChange-mobile-tab" |
画像にaltタグを入力して、class=”resImgTxtChange-mobile-tab”クラスを設定すると、画面が狭い場合は、画像ではなくaltテキストを表示します。 |
class="resImgTxtChange-mobile-only" |
画像にaltタグを入力して、class=”resImgTxtChange-mobile-only”クラスを設定すると、画面がモバイルサイズ以下の場合は、画像ではなくaltテキストを表示します。 |
class="txtBr-full-only" |
文字数の長い文章の場合、読みやすいように読点などの任意の場所で改行したい。でも読点で強制改行してしまうとスマートフォンで見た時に、無駄な改行が入っていておかしい。 そんな問題を解消します。改行したい場所から後ろを、たとえば <span>○○</span>で囲います。 ※spanなどのインライン要素で囲ってください。 |
class="mobile-block" |
table class=”mobile-block” を指定すると、画面が狭い場合に縦積みのテーブルになります。 ただし、thead無しの横２列までの表での有効です。横のセルが多かったりすると意味がわからなくなります。 |
