構築をサポートするGem
CMS内でそのまま利用できるコードを出力してくれるGemを作りました。
利用時のモードはProを推奨しています。
レイアウトが崩れた時や部分的な修正が必要なときは、該当コードを丸ごと貼り付けて困っている理由を入力してください。
新しい装飾要素を作りたい時にも活用できます。
以下のような内容を合わせて入力すると、回答の精度が高くなります。
※他のカスタムコードの有無を確認する理由：特定の条件が揃うとコード内に記載している内容同士が競合し、上書きされてしまう可能性があるため
画像のリンクを取得する方法
サンプルコードの中にはいくつか画像のURLを必要とするものがあります。
HTML embedの中に画像をドラッグすることはできないため、以下のように登録し、URLを取得してください。
画像を設定するときは、Design＞Assets＞Support Pageに画像を登録してください。
サンプルコード内でよく使用するHTMLタグの説明
< ulタグ >
このタグで囲んだリストは文頭に●がつきます。
<ul>
<li>箇条書き</li>
<li>箇条書き</li>
</ul>< olタグ >
このタグで囲んだリストは文頭に番号がつきます。
<ol>
<li>番号リスト</li>
<li>番号リスト</li>
</ol>< imgタグ >
画像を表示するためのタグです。srcの後の""の中に画像のURLを入れます。
altに入れた内容はスクリーンリーダーなどで読み上げられます。
なお、altを入力しておくと以下のようなメリットがあります。
- 「SEO効果の向上」
- 「アクセシビリティ（閲覧しやすさ）の確保」
- 「画像が表示されない時の情報補完」
<img src="https://画像のURLを入れる" alt="画像の説明テキスト">
< aタグ >
テキストリンクなどに使用するタグです。hrefの後の""の中に遷移させたいURLを入れます。
ボタンとして使用している場合もありますが、基本的な考え方は同じです。
<a href="https://遷移させたいURLを入れる">リンクの情報を持ったテキスト</a>
要素を複製したい
カードやリストなど、要素の数を増やして使いたい場合は、<!-- -->で囲まれた範囲をコピーして貼り付けてください。
コード内に以下のような記載をしていないものは要素の複製を推奨していません。
必要であれば新しく作成を依頼してください。
<div class="custom-link-grid horizontal">
<!-- 複製したい時はこの下からコピー -->
<a href="https://example.com/link1" target="_blank" class="grid-item-link">
<img src="https://placehold.co/600x400/eee/999?text=Image+1" alt="リンク先1">
</a>
<!-- この上までコピー -->
</div>
style、scriptについて
<style></style>や<script></script>で囲んでいる内容はHTMLを装飾するための要素です。
見栄えや挙動に影響が出るため、基本的に触らないでください。
サンプルコード
選択した画像に応じてコンテンツを出し分ける
コンテンツの上に見出しではないテキストを入れたい場合は、下に一行分の空行を入れてください
画像1の説明文（使わない場合はこの行ごと消してください）
- 背景がつかない箇条書き
- ulタグでリストを囲うと背景がつかない箇条書きになります
- リスト風のテキストリンク
- #の中に遷移したいページのリンクを入れてください
画像2の説明文（使わない場合はこの行ごと消してください）
- 背景がつかない番号リスト
- 背景がつかない番号リスト
- olタグでリストを囲うと背景がつかない番号リストになります
- リスト風のテキストリンク
アラート
テキストを書き換えて利用してください
見出しと詳細のテキストを書き換えて利用してください
ヒント
テキストを書き換えて利用してください
見出しと詳細のテキストを書き換えて利用してください
画像を入れたい場合はこちらを利用してください
ここに詳細が入ります
画像を入れてポイントを解説するときに利用してください
画像をクリックすると別ページに遷移する [A]
スマホでみた時に画像が2列の横並びになります（下に空行を一行入れると見栄えが良くなります）
画像をクリックすると別ページに遷移する [B]
スマホでみた時に画像が縦並びになります（下に空行を一行入れると見栄えが良くなります）
表組みレイアウト
複雑な情報を構造化したり、項目ごとに比較したい内容があるときに使えるレイアウトです
＜項目と説明のみのレイアウト＞
＜比較用レイアウト＞
3つ以上の比較は、スマホレイアウトの観点から推奨していません（必要な場合は、作成を依頼してください）
比較する項目は追加できます
リスト系の背景を外す
以下のリストには、背景がつきません
＜箇条書き＞
＜番号リスト＞
画面幅いっぱいの線
章を区切りたい時などに使える線です。PC、スマホどちらの場合でも折り返しのない丁度良い長さになります。
ステップを強調して見せる
番号付きのタイトルです。手順をわかりやすく伝えるときに効果的です。
よくある質問
同じページ内で複数箇所使いたい場合は、挙動を担保するため、2つ目以降のHTMLembedから<style>以降を消してください。
FAQだけでなく、ページの文字量をすっきり見せたい時にも効果的です。
関連ページ（サンプルコード）
お問い合わせページに誘導するボタン
書き換えをする必要はありません。ボタンテキストを書き換えたい時のみ編集してください。
これをページにコピーするだけで問い合わせ画面に遷移するボタンになります。念のため、公開時に挙動を確認してください
＜ボタン単体＞
＜補足テキスト付き＞
ショートカット
2026.07〜
「/」の後にコマンドを入力することで、よく使うパーツを簡単に呼び出せます。
- 本文があるもの：/XXの後ろに半角スペースを入れてください
- リンクを入れたい時や、改行を入れたい時：HTMLと同じように該当部分にaタグやbrタグを使うことで実現できます
対応しているのは、以下の8つです。
アラート（見出しあり）
/alert-title 見出し | 詳細。リンクを入れたいときはaタグで<a href="#">テキストリンク</a>を挟む/alert-title 見出し | 詳細。リンクを入れたいときはaタグで<a href="#">テキストリンク</a>を挟む
アラート（見出しなし）
/alert 詳細が入ります。/alert 詳細が入ります。
ヒント（見出しあり）
/hint-title 見出し | 詳細が入ります。<br>brタグを入れると改行されます/hint-title 見出し | 詳細が入ります。<br>brタグを入れると改行されます
ヒント（見出しなし）
/hint 詳細が入ります。/hint 詳細が入ります。
線
/divider/divider
番号リスト
/numbered 番号リスト 項目分だけ 増やすことができます 間に 半角スペースが必要です/numbered 番号リスト 項目分だけ 増やすことができます 間に 半角スペースが必要です
箇条書き
/list 箇条書き 項目分だけ 増やすことができます 間に 半角スペースが必要です/list 箇条書き 項目分だけ 増やすことができます 間に 半角スペースが必要です
お問い合わせボタン
/contact/contact
案ベースでほぼ形になっていないものの置き場
何かある場合は以降に置いておく。そもそもニーズがあるかわからないので、CSチームに確認して方針を決める
