スタイル見本：その他のショートコード

冒頭リード文

記載方法

[div class="lead-text icon"]
貴社の発展に貢献します。[br class="pc"]本業に集中していただく環境を整えます。

[/div]

実際の表示

ページの目次

記載方法

[div class="internal-links"] このページのコンテンツ

1. 遺言書の種類
2. 遺言書に記載すべき事項
3. 遺言書を作成したほうが良い方

[/div]

実際の表示

アイコン

• 

  [icon code="e868"]

• 

  [icon code="e887"]

用意しているアイコンの一覧は、以下のアドレスでご確認いただけます。

https://www.yotsubasougou.jp/wp-content/themes/yotsubalegal-for-company/font/icon-font-1-5/demo.html

リンクボタン

記載方法

[button class="icon-arrow full"]リンク[/button]

実際の表示

リンク

使用可能class 一覧

• small：フォントサイズを小さく
• icon-arrow：リンクアイコン
• full：横幅をブロックの全幅に
• half：横幅をブロックの半分の幅に
• one-thirds：横幅をブロックの1/3の幅に
• white：ボタンの背景色白

ボタンリスト

記載方法

[div class="button-list icon-arrow"]

リンク
リンク
リンク
リンク

[/div]

実際の表示

チェックリスト

使用可能class 一覧

• small：フォントサイズを小さく
• icon-arrow：リンクアイコン
• col-1：通常2列のところを1列表示に

escape

一時的に内容を隠したり、コメントを入れておくために使用します。

[escape]
このセクションは表示されません。

[/escape]

赤字
青字

柏法人会

YouTubeについて

特殊なパラメータ変更が必要な場合に限り、

[span class="embed-youtube"]

で囲った、「埋め込みコード」（iframe）を使用してください。クラス名は、wordpressの標準と同じにしています。

Iframeを使用する際は、幅と高さは削除しないでください（html側のwidth属性とheight属性）。width属性とheight属性が無いと、自動のlazyloadが機能しないそうです。style属性は必要ありません。

width／height属性は、「メディア」ボタンの「埋め込む」のタブで一旦標準のコードを貼り付けて、「一般」のタブで、サイズの横幅のみを変更することで、16:9を保ったままサイズ変更ができます。（コンテンツ幅の780に変更してください）

4:3の動画を貼る場合もページ幅いっぱいで貼る場合は、16:9の状態で貼ってください。そうしないと、HD画像とSD画像が並んだときにSDの方が大きく表示されてしまいます。

トップページの動画のように、横のテキストボックスと高さを揃えたい場合要な場合は、4:3用のクラス名を使用してください。

[span class="embed-youtube aspect-4to3"][/span]

このクラスは、横幅が小さく制限されている、columnの中だけで使ってください。
（現状のトップページのようにテキストボックスと並べるなどの場合）
横幅いっぱいにする場合は、標準の16:9を使用してください。

YouTubeで表示される埋め込みコードは、width／height属性以外は、変更・削除せずに、そのまま使用することをおすすめします。

資料ダウンロード

アコーディオンパネル

記載方法：[accordion]
[accordion-header]タイトル 展開トリガー[/accordion-header]
[accordion-content]展開部分[/accordion-content]
[/accordion]

[accordion]
[accordion-q]Q&A 質問部分（展開トリガー）[/accordion-q]
[accordion-a]Q&A 回答部分（展開部分）[/accordion-a]
[/accordion]

実際の表示：

タイトル 展開トリガー

展開部分

Q&A 質問部分（展開トリガー）

Q&A 回答部分（展開部分）

解決事例が新しい順に並べる。

「残業代」のところに設定しましたが。
ショートコードに以下の属性を追加してもらうことで想定の表示になります。
「 orderby=”menu_order” order=“DESC”」（ショートコード内に追記。末尾でいいと思います。属性それぞれは半角スペースの区切りが必要です）

解決事例新しい順

解決事例セレクト