ショートコードは、あらかじめ用意しておいたパーツを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:ボックスのカラーを変更したい場合に設定
※上記の設定の場合は、グレー
サンプル
*印のついている項目は、オプションとなりますのでご注意ください。