賢威8に含まれている基本スタイルの一覧です。

見出し

h1～h6まで見出しのデザインを用意しています。
また、見出しにリンクを付けた場合のデザインもあらかじめ用意されています。

通常の見出し

リンク付きの見出し

装飾を解除した見出し

見出しに画像を利用したい場合など、見出しの装飾をすべてリセットしたい場合もあると思います。
その場合は、見出しにクラス「title_no-style」を入れることでリセットできます。

---

文字サイズ調整

賢威ではあらかじめ文字サイズ（フォントサイズ）を調整するための、汎用のクラスを数多く用意しています。

「small」や「big」で調整する

特に細かな数値を意識せずにフォントサイズを変えたい場合は、以下のように「small」や「big」を使います。

「em」で指定する

そのテキストの通常のサイズを「1」として計算する指定方法です。
かつてはこれが主流でしたので、今でも「em」で指定する人は多いです。
たとえば、賢威のメインのフォントサイズは16pxなので、「1.2em」を指定すれば1.2倍の「19.2px」になります。

※反対に「18px」を指定したい場合などは、「EmChart」などを参考にCSSで「1.125em」と指定する必要があります。

賢威のCSSであらかじめ用意している「em」のクラスは次のとおりです。

「rem」で指定する

「rem」は最近利用する人が増えている単位です。
html要素（ルート）のフォントサイズを「1」として、指定するものです。
賢威8では、html要素のフォントサイズを「10px」に指定しているので、16pxに指定したい場合は「1.6rem」とすれば良く、「em」のように複雑な計算をする必要はありません。

反対にhtml要素の数値を変更すれば、全体的に文字サイズを変えることもできるので便利です。

あらかじめ用意しているサイズは以下のとおりです。

「px」で指定する

数値を直接入力でき、非常に分かりやすいのが「px」です。
ただし、「em」や「rem」と違って相対的なサイズではないので、一括でフォントサイズを大きくする、といったことはできません。

※なお、最近利用されることの多い「vw」「vh」については、扱いが非常に複雑になるため賢威では利用しないようにしています。

---

文字に色を付ける／マーカーを引く

賢威8ではさまざまな文字装飾用のCSSを用意しています。

文字色

賢威では以下の文字色を用意しています。

その他の色

マーカー表示

以下は文字の色を変更しませんが、背景にマーカーを引くための装飾です。

---

テキストの装飾

賢威8ではあらかじめ、テキストの装飾に利用できるタグを複数用意してあり、それらを利用することで、「※」を付けたテキストの二行目以降をインデントしたり、傍点を付けたり、リンクに矢印を付けたりすることができます。

太字

注意書き

傍点

※1文字ずつタグで囲う必要があります。

整形済みテキスト

タグで囲まれた部分の改行や空白をそのまま表示します。

インラインの装飾

em要素

strong要素

small要素

s要素

取消線は次のようにして引くこともできます。

abbr要素

下線

リンクの装飾

---

行間の設定

賢威で行間を指定したい場合、「lhXX」の汎用クラスを利用します。

行間を詰める

行間を空ける

あらかじめ用意されているCSSは以下です。

---

行間の設定

賢威では、クラスを追加するだけで簡単に余白の調整ができるように、あらかじめ多くのクラスが設定されています。

たとえば「m100-b」です。
これは下に「margin」を100px空けるクラスです。
次のサンプルはボックスとボックスの間に100pxのマージを設けたものです。
またボックス内のテキストと枠の間に余白を指定するために「p20」を利用しています。

上記のように、どこか一方にだけ「100px」を追加したい場合は、「m100-t」「m100-r」「m100-b」「m100-l」と指定します。
これは順に上に100px、右に100px、下に100px、左に100pxを意味してます。

また、「m100」なら上下左右に「margin」を100pxを設定できます。
同様に、「p100」は「padding」による余白を意味します。

賢威であらかじめ用意している余白用のクラスを以下に一覧にします。

なお、レスポンシブでPCでは余白を大きく、モバイルでは余白を小さくしたいときには以下のタグを利用します。
上下の余白のみ対応しているものですが、たとえば「m10-20-t」は上にPCのときは20px、モバイルの時は10px余白をとる、という意味です。

---

右寄せ・左寄せ

賢威8でも右寄せ・左寄せなどはこれまで同様に「fl-l」「fl-c」を使って回り込ませたり、テキストなどであれば「al-l」などを利用します。

回り込み

回り込み1

モバイル時にも回り込みは解除されません。

回り込み2

モバイル時に回り込みが解除されます。

回り込み3

WordPressが生成するタグです。
モバイル時にも回り込みは解除されません。

テキストや画像の右寄せ・左寄せ・中央寄せ

テキストや画像の上寄せ・下寄せ・中央寄せ

---

リストの装飾

賢威ではシンプルなリストからQ＆Aリストまで、様々なリストをご用意しております。

シンプルなリスト

シンプルなリストです。

ul要素

ol要素

横並び

リストを横並びにして表示します。

リストの先頭に表示するマーカー文字を非表示

リストのデザインその1

リストのデザインその2

チェックリスト

記述リスト（旧定義リスト）

「定義リスト（definition list）」は、html5では「記述リスト（description list）」と改められました。

定義リストとして使用する場合

記述リストのデザインその1

記述リストのデザインその2

Q&Aリスト

アコーディオン

---

ボタンのデザイン

賢威8ではコンバージョン用のボタンとして以下の6種類をあらかじめご用意しています。

なお、矢印を逆にしたい場合は「dir-arw_r」を「dir-arw_l」に、「icon_arrow_s_right」を「icon_arrow_s_left」にします。

また、賢威のアイコンを利用して以下のようにすることも可能です。

---

SNSボタン

賢威8では決められたタグを設置することで簡単にSNSボタンを表示できます。

それぞれのタグは以下のように対応していて、特定のボタンを削除するには上記のタグから対応する<div class=”sns-btn_XX”></div>を削除するだけです。

また、SNSボタンではFacebook、はてなブックマークで数値を取得していますが、これは基本的にそのボタンが置かれているページの値がそのまま利用されています。

※Twitterなど数値を取得できないものは代わりのテキストを設置しています。

もし、ボタンが置かれているページとは別のページの値を取得したり、シェアできるようにしたい場合は、以下のようにHTMLタグに「data-url属性」と「data-title属性」を設置して、取得したいページのURLとタイトルを記述します。
次のものは「http://www.cpi.ad.jp/bourne-writing/」を指定してみた例です。

---

アイコンリスト

賢威8ではワンポイントで利用できるアイコンをいくつか用意しています。
この画像はウェブフォントとして表示していますので、以下のようにHTMLタグを置いて表示します。

なお、上記について、アイコンの色はテーマの基本色を指定するために「color01」としていますが、「red」などに置き換えて色を変えることができます。

---

引用エリア

引用エリアの装飾です。
引用元の表記などもあらかじめスタイルが用意されています。

blockquote要素

上記コードの「href=”#”」の＃部分を引用元のURLに変え、「参照記事のタイトル」を部分を引用元ページのタイトルに変更してご使用ください。

q要素

---

テーブル

賢威8では、初期段階でいくつかのテーブル用のデザインを用意しています。

次のものは標準のテーブルです。

「見出し1、2、3（thタグ）」の横幅の設定などは、汎用クラスの「w15」等を使うと便利です。

以下はレスポンシブ用のテーブルです。
1つ目はモバイルで見たときに見出しとデータ部分がたてに並ぶデザインサンプルです。
classに「table-block」を指定します。

2つ目はモバイルで見ると、見出し部分が非表示となり、テーブルデータの横に見出しが表示されるようになるものです。
<th>に設定している見出しの内容と<td>に設定しているdata-th属性を一致させるかたちで実現しています。

3つ目はモバイルで見た時もPCと同じように表示し、はみ出る部分をスライドすることで確認できるようにするスタイルです。
tableを<div class=”table-scroll”></div>で括ります。

なお、テーブルの初期デザインは、以下のクラスを追加することで（ある程度）解除することが可能です。
テーブルに装飾を入れたくない場合に利用してください。

---

画像の装飾

画像を装飾するためのスタイル一覧をご紹介します。
画像に限らず、ボックスの枠などにも適用できると思います。

なお、以下の画像はファイル名の末尾を「_off.jpg」にしています。
末尾を「_off.jpg」にしておき、別に末尾を「_on.jpg」にした画像を設置しておくと、マウスオーバーで画像が置き換わるようになっています。

影付き

imgタグにクラス「shadow」を追加します。

影付き2

imgタグにクラス「shadow02」を追加します。

囲み線（1px）

imgタグにクラス「outline」を追加します。

角丸

imgタグにクラス「rc12」を追加します。
ほかにも「rc4」「rc8」があらかじめ用意されています。

円

imgタグにクラス「circle」を追加します。

写真風

imgタグにクラス「frame」を追加します。

装飾を複数適用する

また上記の装飾を複数同時に適用する場合は、class名の後に半角スペースを入れて、もう一つの付けたい装飾のclass名を入れてください。例えば、影と角丸を適用する場合は「img class=”shadow rc12″」と入れてください。

---

装飾ボックス

賢威8ではコンテンツを区切るための装飾ボックスをあらかじめ15種類ほど用意しております。
賢威8WordPress版をお使いの方はビジュアルエディターにある「ボックス」からその一部を利用することができます。
ただし一部のみですので、ビジュアルエディターから選択できないボックスについては、下記サンプルコードをテキストエディターに貼り付けてご使用ください。

背景に画像を敷いた7つ目のボックスは、画像を変更するのにCSSの編集が必要です。
または、直接「style=”background-image: url(画像のパス)”」としても大丈夫です。

シンプルに枠の色を変えたい場合は以下を利用できます。

なお「noborder」とすることで、枠線を消すこともできます。

---

吹き出し

賢威8では、吹き出しのスタイルをいくつか用意しています。

登場人物の名前を表示させたい場合は、以下のように記述します。

複数の人物が話している様子を表現する場合は、以下のようにクラス「together」を追加します。

また、以下のようなスタイルもあります。