テーマ「PILGRIM」では、特別なスタイルを設定しています。

ビジュアルエディタでブロック選択中、右メニューの「高度な設定」の「追加CSSクラス」に入力すると、反映されるコードの一覧です。

背景関連

bg-white	ブロックの背景が白になります >
bg-black	ブロックの背景が黒になり、文字が白になります >
bg-dark	ブロックの背景が濃いグレーになり、文字が白になります >
bg-red	ブロックの背景が赤になり、文字が白になります >
bg-turquois	ブロックの背景がターコイズになり、文字が白になります >
bg-light-pink	ブロックの背景が薄いピンクになり、文字が濃い茶色になります >
bg-light-blue	ブロックの背景が水色になり、文字が白になります >

フォント関連

futura	英語がfuturaというフォントになります （Apple製品のみ） >
mincho	フォントが明朝体になります >
slanting-left	ブロックが左に５度傾きます >
slanting-right	ブロックが右に５度傾きます >
text-light	フォントの太さが細字になります >
text-heavy	フォントの太さが太字になります >
large	フォントサイズが大になります
x-large	フォントサイズが特大になります >
xx-large	フォントサイズがL特大になります >
xxx-large	フォントサイズがLL特大になります >
xxxx-large	フォントサイズがLLL特大になります >
gradient-text	文字の中にグラデーションを設定できます > （グラデーションの色はCSSで調整するので、別にクラスを指定する）

テキストやブロックの上下空白設定

mt-0	ブロックやテキスト上部の空白が０になります（マージン）
mt-2em	ブロックやテキスト上部の空白が2emになります（マージン）
mt-4em	ブロックやテキスト上部の空白が4emになります（マージン）
mb-0	ブロックやテキスト下部の空白が０になります（マージン）
mb-2em	ブロックやテキスト下部の空白が2emになります（マージン）
mb-4em	ブロックやテキスト下部の空白が4emになります（マージン）
pt-0	ブロックやテキスト上部の空白が０になります（パディング）
pt-2em	ブロックやテキスト上部の空白が2emになります（パディング）
pt-4em	ブロックやテキスト上部の空白が4emになります（パディング）
pt-50per	ブロックやテキスト上部の空白が画面の縦半分になります（パディング）
pb-0	ブロックやテキスト下部の空白が０になります（パディング）
pb-2em	ブロックやテキスト下部の空白が2emになります（パディング）
pb-4em	ブロックやテキスト下部の空白が4emになります（パディング）
pb-50per	ブロックやテキスト下部の空白が画面の縦半分になります（パディング）

レスポンシブ関連

mobile-100	PCやタブレットでは２行のブロックが、 スマホで見た時にブロックが100％で表示されます
size-80per	スマホ表示の時に大きすぎる画像を80%で表示します
size-60per	スマホ表示の時に大きすぎる画像を60%で表示します
mobile-overlay	スマホ表示の時にのみブロックカバーにオーバーレイを適用します

ブロック関連

max-height	ブロックカバー（背景の上にテキスト）でテキストの上下50%パディングを足して、縦長の写真を大きく見せる >
right-center-text	ブロックカバーのテキストブロックを右寄せにします（モバイル表示時はクリア） ブロックイメージ（写真）のキャプションが写真の上に大きく右寄りに乗ります。
left-center-text	ブロックカバーのテキストブロックを左寄せにします（モバイル表示時はクリア） 表示時はクリア） ブロックイメージ（写真）のキャプションが写真の上に大きく左寄りに乗ります。
max-700px	ブロックの横幅が最大700pxで中央寄せになります。

画像関連

full-width	画像の幅を画面いっぱいに合わせます
landscape-pic	ブロックイメージで横長の画像をPC表示のみに適用します
mobile-pic	ブロックイメージで縦長の画像をモバイル表示のみに適用します

テーブル関連

width-3-7	2列テーブルのセルの幅を3:7の比率に固定します
width-2-2-6	3列テーブルのセルの幅を2:2:6の比率に固定します

背景サンプル

bg-white mt-2em pt-2em pb-2em

bg-black pt-2em pb-2em

bg-dark pt-2em pb-2em

bg-turquois pt-2em pb-2em

bg-light-pink pt-2em pb-2em

bg-light-blue pt-2em pb-2em

フォントサンプル

futura x-large bg-turquois pt-2em pb-2em

xx-large bg-red pt-2em pb-2em

xxx-large bg-dark gradient-text pt-2em pb-2em

美しい日本語の明朝体(mincho)+細字(text-light)

美しい日本語の明朝体(mincho)+太字(text-heavy)

美しい日本語ゴシック体CSSクラス「large」

max-700px

• 

• 

• 表示サンプル