ショートコードは、あらかじめ用意しておいたパーツをWebサイト中で使えるようにするための仕組みです。
ショートコードを記載することでタイマーを設定したり、ボタンを作成したりすることができます。
ショートコードの設定方法はここをクリック
  • STEP1
    ブロックの追加
    ・ページの編集画面でショートコードを記述するブロックを追加します。
    →ページ編集画面で【+】マークをクリック
  • STEP2
    ショートコードの項目を追加
    ・【+】マークをクリックした際に表示されるウィンドウの中からショートコードを選択
    →ショートコードが表示されない場合は、検索でショートコードと検索
  • STEP3
    コードの入力
    STEP2が完了するとショートコードの枠が表示されるため、表示された枠に対してショートコードのテキストを記載

ボタン

使用用途ページ内にリンク付きのボタンを表示したい場合
設定例[su_button url="https://www.sysway.co.jp/seminar/free/entry/" style="flat" background="#ff8c00" color="#fff" size="4" center="yes" icon="icon: pencil"]お申し込みはこちらから[/su_button]
設定方法url：遷移先のURLを設定
background：ボタンの背景色
icon：テキストの前に表示するアイコン
※例の場合、鉛筆のアイコンが表示されます。
サンプル
お申し込みはこちらから

タイマー設定

使用用途指定したコンテンツに対してタイマーを設定したい場合
例）ボタンをタイマーで表示したい（指定時間になったらボタンを表示したい場合、指定した時間になったら、ボタンを非表示にしたい場合など）
設定例[datecontent opendate="202212230000" closedate="202303312359"]表示・非表示を切り替えたいコンテンツを記載[/datecontent]
設定方法・opendete：開始日時を設定（YYYYMMDDHHmm形式）
→上記の場合、2022年12月23日00時00分になったら表示される

・enddate：終了日時を設定（YYYYMMDDHHmm形式）
→上記の場合、2023年03月31日23時59分になったら非掲載となる
応用ショートコード中にショートコードを記載することでボタンをタイマー設定することができる
サンプル
お申し込みはこちらから

※2022年12月23日11時11分になったらボタンが表示されるサンプル
※ボタンのショートコードに対してタイマーのショートコードを設定
※内側にあるものがタイマー設定で切り替わるので、タイマーを外側にして設定

アコーディオン

使用用途コンテンツを一部非表示にして、クリックで展開したい場合
設定例[su_spoiler title="タイトル名を記載" icon="caret"]
展開後に表示したいコンテンツを記載（その1）
展開後に表示したいコンテンツを記載（その2）
[/su_spoiler]
設定方法・title：クリックしたら展開するリンクのテキストを記載
サンプル
タイムスケジュール
10時00分～：挨拶
10時05分～：概要
12時00分～：休憩
13時30分～：詳細
16時00分～：質疑応答
16時55分～：終了

タイムライン

使用用途手順などをきれいに見せたい場合
設定例[ptimeline]
[ti label="STEP1" title="はじめに"]
STEP1の詳細を記載
[/ti]
[ti label="STEP2" title="開始のご挨拶"]
STEP2の詳細を記載
[/ti]
[ti label="STEP3" title="終わりに"]
STEP3の詳細を記載
[/ti]
[/ptimeline]
設定方法・label：各手順の番号などをテキストで記載
・title：ラベルに対するタイトル
サンプル
  • STEP1
    はじめに

    STEP1の詳細を記載
  • STEP2
    開始のご挨拶

    STEP2の詳細を記載
  • STEP3
    終わりに

    STEP3の詳細を記載

リストの装飾

使用用途リストの装飾をしたい場合
設定例[su_service title="チェックリスト" icon="icon: check" icon_color="#213962" size="14"][/su_service]
[su_service title="バツ" icon="icon: times" icon_color="#ff0000" size="14"][/su_service]
設定方法・title：チェックリストのテキストを記載
・icon：リストの種類を設定
→checkを設定した場合：チェックリスト
→timesを設定した場合：バツのマークのリスト
・icon_color：アイコンの色
・size：アイコンの大きさ（デフォルトは20px）
サンプル
チェックリスト
バツ

ボックス

使用用途タイトルラベル付きのボックスを表示したい場合
※強調したいコンテンツに対して使用する想定
設定例[su_box title="ボックスタイトル" box_color="#1f365c" title_color="#ffffff"][su_service title="リスト" icon="icon: check" icon_color="#213962" size="14"]ボックスのショートコード内にリストのショートコードを設定することができます。[/su_service][/su_box]
設定方法・title：ボックスのタイトルラベルを設定
・box_color：タイトルラベルと枠線の色を設定
・タイトルラベル内の文字色を設定
サンプル
ボックスタイトル
リスト
ボックスのショートコード内にリストのショートコードを設定することができます。

ノート

使用用途タイトルラベルなしのボックスを表示したい場合
※注意事項や補足事項などの記載したい場合を想定
設定例[su_note note_color="#f1f1f1"]*印のついている項目は、オプションとなりますのでご注意ください。[/su_note]
設定方法・note_color：ボックスのカラーを変更したい場合に設定
※上記の設定の場合は、グレー
サンプル
*印のついている項目は、オプションとなりますのでご注意ください。