HTMLクラスリスト

それぞれのパーツのクラス名は「」で囲まれた文字列です。
使用例:大見出しの場合 class=”cnt-tit1″

クラス「wrapper1」について

「wrapper1」はコンテンツ全体を中央配置にするための枠で、コンテンツは「wrapper1」の中に入れてください。
ただし、横幅100%で使うデザインは例外です。例外パーツの例:横幅100%使う、ページのメイン画像や3連ボタン。

2カラム レイアウト

2カラムレイアウトは、PC・タブレットでは左右の2カラム表示ですが、スマホでは上下の1カラムになります。
スマホでも左右2カラム表示する場合には class=”wrapper-col2 sp-col1″ と記述されている部分から「sp-col1」を削除してください。

カラム1
カラム2

スクロールに合わせてコンテンツが表示されるエフェクト

ページのスクロールに合わせてコンテンツがフェードインで表示されるエフェクトはHTMLタグに以下のように data-scroll 属性を付与してください。
ワードプレスにはエフェクトという名称で登録しています。

HTMLタグに追加する属性:data-scroll=”toggle(.mv, .list-mv) centerVertical once”

URLなど長い文字列を表示したとき改行せずにはみ出る場合

改行しない部分のタグに class=”word-br” を付与してください。※class=”word-br”は「URLなど長い文字列を改行」という名称でワードプレスに登録されています。
テーブル内で文字がはみ出る場合には、tableタグに class=”table-word-br tableFix” を付与してください。

見出し

大見出し「cnt-tit1」

中見出し「cnt-tit2」

小見出し「cnt-tit3」


TITLE

縦見出し

縦の見出し高さに合わせてここの文字(コンテンツ量)を調整してください。スマホでみたときにここの文字は左側によりますので、タイトルの高さを超える場合にはクラス「inner-vertical2」の外にだしてください。

ボタン / テキストリンク

ボタン「btn-BLU」

ボタン「btn-BLUborder」

ボタン「btn-ORG」

3連ボタンはボタンの数に合わせてliタグを増減してください。最大ボタン3つまでです。
3連ボタンを使うときは、divタグのクラス「wrapper1」の外で使用してください。

ページナビ上「btn-back-top」

ページナビ下「btn-back-bottom」

テキストリンク(青色)

テキストリンク

テーブル用div

テーブルを配置するときは必ずテーブルタグを包むdivタグに class=”wrapper-table” を付与してください。
テーブル用のdivはワードプレスに「テーブル用div」という名称で登録しています。

テーブル

テーブルは4種類あります。セルの横幅を個別に調整する場合にはth・tdに個別に横幅指定のクラスをつけて調整してください。
横幅指定クラス「w5」〜「w100」まで5刻み(5%〜100%)で設定できます。
横幅50%の場合の例:class=”w50″

追加:class=”table-w-auto” でテーブルの横幅をテーブル内容に合わせて自動的に変化します。
ただしスマートフォンでは横幅100%となります。 横幅がテーブル内容によって異なるのでレイアウトするさいには他のコンテンツなどの回り込みに注意してください。

テーブルタイプ1「table-type1」

タイプ1A  
タイプ1A  
タイプ1B タイプ1B
   

テーブルタイプ2「table-type2」

タイプ2A タイプ2A
   
   
   
   
タイプ2B  
タイプ2B  
タイプ2B  
タイプ2B  
タイプ2B  

テーブルタイプ3「table-type3」

タイプ3A  
タイプ3A  
タイプ3A  
タイプ3A  
タイプ3A  
タイプ3B タイプ3B
   
   
   
   

テーブルタイプ4「table-type4」

タイプ4A  
タイプ4A  
タイプ4A  
タイプ4B タイプ4B
   
   

リスト / ボックス

Rボックス
Rボックス 背景グレー

文字の大きさ

基本的には「見出し」や「ボタン」などのクラスを使えば個別に文字サイズを設定する必要がありませんが、個別に文字サイズを変更したい時に使用してください。
例:表の注意書きなど文字を小さくしたい時など(注意書きなどでは「fsS」を使用する時があります)
使い方の例:class=”fsXL”

フォントサイズXXL「fsXXL」

フォントサイズXL「fsXL」※「文字特大(fsL)」で登録されています。

フォントサイズL「fsL」※「文字大(fsL)」で登録されています。

フォントサイズM「fsM」

フォントサイズS「fsS」※文字小(fsS)で登録されています。

フォントサイズXS「fsXS」

文字の色

使い方の例:class=”color-BLU”

フォントカラー青「color-BLU」※「カラー青」で登録されています。

フォントカラー青2「color-BLU2」

フォントカラー緑「color-GRN」

フォントカラーグレー「color-GRY」※「カラーグレー」で登録されています。

フォントカラーオレンジ「color-ORG」

フォントカラー赤「color-RED」※「カラー赤」で登録されています。

フォントカラー赤2「color-RED2」

フォントカラー白「color-WHT」

背景の色

背景色グレー「bgcolor-GRY」

背景色グレー2「bgcolor-GRY2」

マージン / パディング / 横幅

マージンとパディングの数値はそれぞれ5〜100(5px〜100px)まで、5刻みで使えます。
主にPタグでテキストの間隔調整で使用します。
使い方の例:上マージン25pxにする場合 class=”mgT25″

上マージン class="mgT5"
下マージン class="mgB5"
右マージン class="mgR5"
左マージン class="mgL5"
上パディング class="pdT5"
下パディング class="pdB5"
右パディング class="pdR5"
左パディング class="pdL5"

特殊なマージン「mgset2」「mgset3」

このマージンはPC・タブレット・スマホそれぞれのデバイスに合わせて調整された上マージンです。

class="mgset2" 使用例:大見出しと大見出しのマージンに使用
class="mgset3" 使用例:小見出しと小見出しのマージンに使用

横幅(width)

横幅は「w5」〜「w100」まで5刻み(5%〜100%)で使えます。
横幅50%にする場合の例: class=”w50″

横幅35%の場合 class="w35"

文字の揃え

使い方の例:中央揃えにする場合 class=”alC”

文字左揃え「alL」

文字中央揃え「alC」

文字右揃え「alR」

製品に関するご質問、字幕制作に関するご相談など、お気軽にお問い合わせください。
メールマガジンよくあるご質問お問い合わせ