サイドバー有り

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

見出し１

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

見出し２

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

見出し３

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

見出し４

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

見出し５

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

  1. リスト項目です
  2. リスト項目です
  3. リスト項目です
  • リスト項目です
  • リスト項目です
  • リスト項目です

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

タイトルタイトル
タイトルテキストテキストテキストテキスト
タイトル テキストテキストテキストテキスト
タイトル テキストテキストテキストテキスト
「デフォルト」を選択した場合のデザインです。タイトル部分は「HTMLとして編集」から手動でthタグにしてください。
タイトルタイトル
タイトル テキストテキストテキストテキスト
タイトル テキストテキストテキストテキスト
タイトル テキストテキストテキストテキスト
「ストライプ」を選択した場合のデザインです。タイトル部分は「HTMLとして編集」から手動でthタグにしてください。
ボタン
ボタン
ボタン
ボタン
ボタン
ボタン

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

背景色は「高度な設定＞追加CSSクラス」に「bg-lightgray」 を入力することで変更しています。
「p-3」を加えることで上下左右に余白を追加しています。

↑↑ブロックエディタで入力したもの↑↑
↓↓テンプレートファイルにコーディングしたもの↓↓

見出しパターン１

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"とするとこのようになります。 テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

  1. class="ol-standard"を指定したリスト項目です。
  2. olリスト項目です
  3. 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」クラスを追記することで適用されます。

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

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

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