サイドバー無し

not sidebar_sample

↓↓ブロックエディタで入力したもの↓↓

見出し１

テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります

見出し２

見出し３

見出し４

見出し５

リスト項目です
リスト項目です
リスト項目です

リスト項目です
リスト項目です
リスト項目です

↑この区切り線は、「区切り」ブロックの「幅広線」を選択することで実装できます。

タイトル	タイトル
タイトル	テキストテキストテキストテキスト
タイトル	テキストテキストテキストテキスト
タイトル	テキストテキストテキストテキスト

「デフォルト」を選択した場合のデザインです。タイトル部分は「HTMLとして編集」から手動でthタグにしてください。
※デフォルトのテーブルブロックです。基本的には使わないでください。

タイトル	タイトル
タイトル	テキストテキストテキストテキスト
タイトル	テキストテキストテキストテキスト
タイトル	テキストテキストテキストテキスト

「ストライプ」を選択した場合のデザインです。タイトル部分は「HTMLとして編集」から手動でthタグにしてください。
※デフォルトのテーブルブロックです。基本的には使わないでください。

タイトル	タイトル
テキスト	テキストが入ります
テキスト	テキストが入ります

flexible table blockで作成したテーブルです。基本的には従来のテーブルブロックではなくこちらを使用してください。

タイトル	タイトル
テキスト	テキストが入ります
テキスト	テキストが入りますテキストリンク

flexible table blockで作成したテーブルです。基本的には従来のテーブルブロックではなくこちらを使用してください。

ボタン

テキストリンク

ボタン

別窓へのリンクボタンは「高度な設定＞追加 CSS クラス」にicon-newtabを、
PDFへのリンクボタンは「高度な設定＞追加 CSS クラス」にicon-pdfを入力してください。

色＞背景から背景色を指定できます。

↑↑ブロックエディタで入力したもの↑↑

↓↓テンプレートファイルにコーディングしたもの↓↓

見出しパターン１

class="ttl-pattern_1"を指定するとこちらの見た目になります。

見出しパターン１＿左

class="ttl-pattern_1 ttl-pattern_1_left"を指定するとこちらの見た目になります。

見出しパターン１＿右

class="ttl-pattern_1 ttl-pattern_1_right"を指定するとこちらの見た目になります。

見出しパターン２

class="ttl-pattern_2"を指定するとこちらの見た目になります。

見出しパターン３

class="ttl-pattern_3"を指定するとこちらの見た目になります。

見出しパターン４

class="ttl-pattern_4"を指定するとこちらの見た目になります。

見出しパターン５

class="ttl-pattern_5"を指定するとこちらの見た目になります。

見出しパターン６

class="ttl-pattern_6"を指定するとこちらの見た目になります。

見出しパターン７

class="ttl-pattern_7"を指定するとこちらの見た目になります。

class="bg-lightgray p-3"とするとこのようになります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

class="ol-standard"を指定したリスト項目です。
olリスト項目です
olリスト項目です

class="round-list"を指定したリスト項目です
ulリスト項目です
ulリスト項目です

タイトル: dldtddタグによる説明リストです。dlタグにクラスdl-standardを指定するとこちらの見た目になります。
タイトル: dldtddタグによる説明リストです。

tableタグに「table-standard」を指定してください。なお、ブロックエディタのものと異なり、スマホ版ではカラム落ちします。
Tableです	テキストテキストテキスト
タイトル	table-standard
タイトル	テキストテキストテキスト
タイトル	テキストテキストテキスト

tableタグに「table-stripes」を指定してください。なお、ブロックエディタのものと異なり、スマホ版ではカラム落ちします。
Tableです	テキストテキストテキスト
タイトル	テキストテキストテキスト
タイトル	テキストテキストテキスト
タイトル	テキストテキストテキスト

ボタンボタンボタンボタン

aタグに「btn-standard」クラスを指定するとこちらの見た目になります。
別窓用ボタンは「icon-newtab」、PDFボタンは「icon-pdf」クラスを追記することで適用されます。
beforeとafterで別々にアイコンの画像URLを指定してopacityで出し分けているのはsafari対策です。
hover時にURLを変更する仕様だと、safariではhoverした際に一瞬画像が小さくなる現象が起きることがあります。

クラスにbtn-size300を加えたもの。

ボタンのサイズを変更する際は新たにwidthを指定したクラスを作成し、class="btn-standard btn-●●"としてください。

テキストリンクテキストリンクテキストリンク

「text-link」クラスを指定すると上記のようになります。
「text-link text-link_icon-newtab」「text-link text-link_icon-pdf」とするとアイコンが付きます。

ボタンボタンボタンボタン

ボタンサンプル

before-dotを付けると文頭に・が付きます。改行されても記号の下に文字は回り込みません。
before-asteriskを付けると文頭に※が付きます。改行されても記号の下に文字は回り込みません。

↑↑テンプレートファイルにコーディングしたもの↑↑

Q&A

よくある質問

: A回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。

: A回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。

: A回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。

: A回答が入ります。

クラス「scrollcheck」を付けると、スクロールに反応して「scrolled」が付きます。
フェードインエフェクト等に使用できます。
※「scrollcheck」に直接cssを指定するのではなく、任意のクラスを新たに足して見た目を指定してください。