構築をサポートする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の見出し

keyboard_arrow_down

画像1の説明文（使わない場合はこの行ごと消してください）

• 背景がつかない箇条書き
• ulタグでリストを囲うと背景がつかない箇条書きになります
• リスト風のテキストリンク
• #の中に遷移したいページのリンクを入れてください

画像2の見出し

keyboard_arrow_down

画像2の説明文（使わない場合はこの行ごと消してください）

1. 背景がつかない番号リスト
2. 背景がつかない番号リスト
3. olタグでリストを囲うと背景がつかない番号リストになります
4. リスト風のテキストリンク

画像3の見出し

keyboard_arrow_down

a,list,pタグを自由に利用できます

必要に応じて、コピーしたり消したりして使えます

　　　 ボタンに表示する文言をここに入れます

‍

アラート‍

見出しと詳細のテキストを書き換えて利用してください

‍

ヒント

テキストを書き換えて利用してください

見出しと詳細のテキストを書き換えて利用してください

画像を入れたい場合はこちらを利用してください



ここに見出しが入ります

ここに詳細が入ります

画像を入れてポイントを解説するときに利用してください

‍‍

画像をクリックすると別ページに遷移する [A]‍

スマホでみた時に画像が2列の横並びになります（下に空行を一行入れると見栄えが良くなります）
‍

‍

画像をクリックすると別ページに遷移する [B]‍

スマホでみた時に画像が縦並びになります（下に空行を一行入れると見栄えが良くなります）
‍

‍

表組みレイアウト

複雑な情報を構造化したり、項目ごとに比較したい内容があるときに使えるレイアウトです

‍

‍＜項目と説明のみのレイアウト＞

‍

‍

＜比較用レイアウト＞

‍
3つ以上の比較は、スマホレイアウトの観点から推奨していません（必要な場合は、作成を依頼してください）

‍比較する項目は追加できます

‍

‍

リスト系の背景を外す

以下のリストには、背景がつきません

‍

＜箇条書き＞

‍＜番号リスト＞

‍

‍

案ベースでほぼ形になっていないものの置き場

※そもそもニーズがあるかわからないので、CSチームに確認して方針を決める※
‍

‍お問い合わせページに誘導するボタン

合わせてみられている記事

‍