スタイルガイド（Loops見本）

style guide
ホームスタイルガイド（Loops見本）

セクションタイトル日本語 2行のダミー文章です

SECTION TITLE SUB TEXT

パーツ：中見出し 2行のダミー文章です

この文章は本文です。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。 この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。 ボールドにすると、色と太さが変わります。

見出し1のダミーです。 文字の大きさなどを確認するために入れています。
見出し2のダミーです。 文字の大きさなどを確認するために入れています。
見出し3のダミーです。 文字の大きさなどを確認するために入れています。
.mce-txt-attention　注意書き
テーブル
テーブル [tel]この文章はダミーです。文字の大きさ、量、字間、行間などなどを確認するために入れています。
テーブル [tel text="0123456"]この文章はダミーです。文字の大きさ、量、字間、行間などなどを確認するために入れています。
 
テーブル1
テーブル1：スマホ時はPCと同じ この文章はダミーです。文字の大きさ、量、字間、行間などなどを確認するために入れています。
テーブル1：スマホ時はPCと同じ この文章はダミーです。文字の大きさ、量、字間、行間などなどを確認するために入れています。
テーブル1：スマホ時は横スクロール この文章はダミーです。文字の大きさ、量、字間、行間などなどを確認するために入れています。
テーブル1：スマホ時は横スクロール この文章はダミーです。文字の大きさ、量、字間、行間などなどを確認するために入れています。
テーブル1：スマホ時は縦並び この文章はダミーです。文字の大きさ、量、字間、行間などなどを確認するために入れています。
テーブル1：スマホ時は縦並び この文章はダミーです。文字の大きさ、量、字間、行間などなどを確認するために入れています。
テーブル2
テーブル2：スマホ時はPCと同じ この文章はダミーです。文字の大きさ、量、字間、行間などなどを確認するために入れています。
テーブル2：スマホ時はPCと同じ この文章はダミーです。文字の大きさ、量、字間、行間などなどを確認するために入れています。
テーブル2：スマホ時は横スクロール この文章はダミーです。文字の大きさ、量、字間、行間などなどを確認するために入れています。
テーブル2：スマホ時は横スクロール この文章はダミーです。文字の大きさ、量、字間、行間などなどを確認するために入れています。
テーブル2：スマホ時は縦並び この文章はダミーです。文字の大きさ、量、字間、行間などなどを確認するために入れています。
テーブル2：スマホ時は縦並び この文章はダミーです。文字の大きさ、量、字間、行間などなどを確認するために入れています。
thはエディタでセルを右クリック→セル→セルのプロパティからヘッダーセルを選んでください。 ▼境界線<hr>
このボックスはエディタのaddquicktagsから追加します。文章量が多いコンテンツなどで、情報を整理したいときに使用します。 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。この文章はダミーです。
  • 番号なしリストのデフォルトを選んでください
  • 番号なしリストのデフォルトを選んでください
  • 番号なしリストの白丸を選んでください
  • 番号なしリストの白丸を選んでください
  • 番号なしリストの四角を選んでください
  • 番号なしリストの四角を選んでください
  1. 番号ありリストのデフォルトを選んでください
  2. 番号ありリストのデフォルトを選んでください
    1. 番号ありリストのデフォルトを選んでください
    2. 番号ありリストのデフォルトを選んでください
  3. 番号ありリストのデフォルトを選んでください
  1. 番号ありリストのラテン文字小文字を選んでください
  2. 番号ありリストのラテン文字小文字を選んでください
  3. 番号ありリストのラテン文字小文字を選んでください
  1. 番号ありリストのギリシャ文字小文字を選んでください
  2. 番号ありリストのギリシャ文字小文字を選んでください
  3. 番号ありリストのギリシャ文字小文字を選んでください
  • テキスト
  • テキスト
  • テキスト
  • テキストこの文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
  • テキスト
  • テキスト
  • テキスト
  • テキスト
テキストリンクを追加できます。 テキストリンクを追加できます。 テキストリンクを追加できます。 dummy-3_2 電話番号、FAX番号はショートコードを使用できます。 電話番号:[tel] 電話番号（テキスト変更）:[tel text="文字を入力してください"] 電話受付時間：[teltime] FAX番号：[fax] 郵便番号：[postcode] 住所：[address]
引用したい時に使います。この文章はダミーです。文字の大きさ、量、字間、行間などなどを確認するために入れています。

Section Title English

パーツ：回り込みレイアウト（L）

回り込みレイアウト（L）。 強調したいコンテンツ等に使用します。

この文章は本文です。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。 この文章は本文です。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
ボタンテキスト

回り込みレイアウト（L）。 強調したいコンテンツ等に使用します。

この文章は本文です。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。 この文章は本文です。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
ボタンテキスト

回り込みレイアウト（L）。 背景色をつける。

この文章は本文です。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。 この文章は本文です。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
ボタンテキスト

回り込みレイアウト（L）。 背景色をつける。

この文章は本文です。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。 この文章は本文です。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
ボタンテキスト

Section Title English 2 lines

パーツ：回り込みレイアウト（S）

回り込みレイアウト（S） 背景色なし

この文章は本文です。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。
ボタンテキストが入ります

回り込みレイアウト（S） 背景色なし

この文章は本文です。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。
ボタンテキストが入ります

回り込みレイアウト（S） 背景色あり

回り込みレイアウト（S）を使用しています。文字の大きさ、量、字間、行間などなどを確認するために入れています。<SPBR>回り込みレイアウト（S）を使用しています。文字の大きさ、量、字間、行間などなどを確認するために入れています。 回り込みレイアウト（S）を使用しています。文字の大きさ、量、字間、行間などなどを確認するために入れています。
ボタンテキストが入ります

回り込みレイアウト（S） 背景色あり

回り込みレイアウト（L）を使用しています。文字の大きさ、量、字間、行間などなどを確認するために入れています。<SPBR>回り込みレイアウト（L）を使用しています。文字の大きさ、量、字間、行間などなどを確認するために入れています。 回り込みレイアウト（L）を使用しています。文字の大きさ、量、字間、行間などなどを確認するために入れています。
ボタンテキストが入ります

パーツ：1～4カラム

1カラム

1カラム小見出し・レイアウト幅を狭くする
入れ込み時の注意点
1カラムのみ使用する場合は「レイアウト幅を狭くする」を使用することを推奨しています。 1行あたりの文字数が長くなると、読みにくいデザインになってしまうためです。 1行あたりの文字数を抑えた入れ込みのデザインとして、下に記載した「1カラムと2カラムを上下に並べて2段組にする」などのレイアウトもおすすめです（ただし画像を大きく使える場合に限る）。参考にしてください。
カラム作成数について
カラムレイアウトは1～4カラムまで切り替え可能です。
テキストテキストテキスト
ボタン - PDF

2カラム

2カラム小見出し
カラムレイアウトは1～4カラムまで切り替え可能です。
ボタン - PDF
2カラム小見出し
カラムレイアウトは1～4カラムまで切り替え可能です。
ボタン

3カラム

3カラム小見出し
カラムレイアウトは1～4カラムまで切り替え可能です。
ボタン - PDF
3カラム小見出し
カラムレイアウトは1～4カラムまで切り替え可能です。
ボタン
3カラム小見出し
カラムレイアウトは1～4カラムまで切り替え可能です。
ボタン

4カラム

4カラム小見出し
カラムレイアウトは1～4カラムまで切り替え可能です。
ボタン - PDF
4カラム小見出し
カラムレイアウトは1～4カラムまで切り替え可能です。
ボタン
4カラム小見出し
カラムレイアウトは1～4カラムまで切り替え可能です。
ボタン
4カラム小見出し
カラムレイアウトは1～4カラムまで切り替え可能です。
ボタン

背景色をつけた場合のデザイン

画像の縦横比：縦長

小見出しが入ります
1～4カラムは4カラムまで作成できます。5カラム目を作成する場合は、パーツを増やしてください。「1～4カラムに背景色をつける」をチェックすると、1～4カラム全体に背景色をつけることができます。
小見出しが入ります
1～4カラムは4カラムまで作成できます。5カラム目を作成する場合は、パーツを増やしてください。「1～4カラムに背景色をつける」をチェックすると、1～4カラム全体に背景色をつけることができます。
小見出しが入ります
1～4カラムは4カラムまで作成できます。5カラム目を作成する場合は、パーツを増やしてください。「1～4カラムに背景色をつける」をチェックすると、1～4カラム全体に背景色をつけることができます。

【入れ込み応用編】 1カラムと2カラムを上下に並べて2段組にする

上の画像は1カラムパーツを使用し、 文章は2カラムパーツです。
1カラムパーツに画像だけを入れて、下に2カラムパーツを配置すると、大きな画像＋本文2段組のレイアウトにすることができます。 こちらのレイアウトは「2カラムパーツの左カラムに見出しだけを入力、右カラムに本文だけを入力」したレイアウトです。画像を大きく見せたいサイトでは有用性の高いレイアウトとなります。参考にしてください。

パーツ：ボタン

外部リンク
サイト内リンク
PDFファイルリンク
お問い合わせ
 リンク設定について（入れ込みの方）
サイト内リンクは相対パスで記載してください。 その際、必ず末尾に「/」をつけること。 例： OK： /company/ NG： https://leapy.jp/company/ ←絶対パスで記載している NG： /company　←最後の「/」が無い  
アイコンについて
アイコンはSVGです。 .btn svg { fill: *色*; } で色が当てられます。

パーツ：よくある質問

質問文が入ります。文字の大きさ、量、字間、行間などを確認するために入れています。

回答が入ります。文字の大きさ、量、字間、行間などなどを確認するために入れています。 回答が入ります。文字の大きさ、量、字間、行間などなどを確認するために入れています。

質問文が入ります。文字の大きさ、量、字間、行間などを確認するために入れています。

回答が入ります（見出し）。文字の大きさ、量、字間、行間などなどを確認するために入れています。
回答に対する補足文章を入れることもできます。文字の大きさ、量、字間、行間などなどを確認するために入れています。 回答に対する補足文章を入れることもできます。文字の大きさ、量、字間、行間などなどを確認するために入れています。

質問文が入ります。文字の大きさ、量、字間、行間などを確認するために入れています。

回答が入ります。文字の大きさ、量、字間、行間などなどを確認するために入れています。 回答が入ります。文字の大きさ、量、字間、行間などなどを確認するために入れています。

質問文が入ります。文字の大きさ、量、字間、行間などを確認するために入れています。

回答が入ります（見出し）。文字の大きさ、量、字間、行間などなどを確認するために入れています。
回答に対する補足文章を入れることもできます。文字の大きさ、量、字間、行間などなどを確認するために入れています。 回答に対する補足文章を入れることもできます。文字の大きさ、量、字間、行間などなどを確認するために入れています。

パーツ：流れ

お問い合わせ

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。 この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。

見出しが入ります

この文章はダミーです。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。この文章はダミーです。

完成

2014年4月

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。 この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。

2018年10月

この文章はダミーです。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。この文章はダミーです。

2023年4月

パーツ：スライド

  • スライドの小見出し

    この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

  • スライドの小見出し

    この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

  • スライドの小見出し

    この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

  • スライドの小見出し

    この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

  • スライドの小見出し

    この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

  • スライドの小見出し

    この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

  • スライドの小見出し

    この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

  • スライドの小見出し

    この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

  • スライドの小見出し

    この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

  • スライドの小見出し

    この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

  • スライドの小見出し

    この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

  • スライドの小見出し

    この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

  • スライドの小見出し

    この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

  • スライドの小見出し

    この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

  • スライドの小見出し

    この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

  • スライドの小見出し

    この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

  • スライドの小見出し

    この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

  • スライドの小見出し

    この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

  • スライドの小見出し

    この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

パーツ：CTA

お問い合わせ

CONTACT

CTAパーツに入力すると 個別で見出しの設定もできます

個別で見出し（サブ）の設定もできます

個別でテキストの設定もできます

Background Color

SECTION TITLE SUB TEXT

【セクション設定】 背景色設定・全体を白抜き文字にする

「全体を白抜き文字にする」を適用しています。文字の大きさ、量、字間、行間などなどを確認するために入れています。<SPBR>この文章はダミーです。文字の大きさ、量、字間、行間などなどを確認するために入れています。
テキストテキストテキスト

白抜き文字設定時のボタンの見え方

ボタンテキストが入ります
アンカーリンクを設定できます

Background Pattern

【セクション設定】 背景画像を設定・背景画像をリピートさせる

背景にパターンを設定することができます。 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
小見出し
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
小見出し
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。