LP用テンプレート RIDER

実際のサイト内容にテンプレートを書き換えるためのエディタが必要です。Windowsに標準で付いてくるメモ帳でも構いませんが、Mictosoft Visual Studio Code（通称 VScode）が秀逸でお勧めです。業界では標準エディ...

動作要件PHP : 8.0以上PHPが使えるサーバー上で動作します。推奨環境Google Chrome 最新版Mozilla FireFox 最新版Microsoft Edge 最新版Mac Safari 最新版

サポートできないことHTML, CSS, PHP, Javascriptなど、コーディングに関することは基本的にサポートしません。VScodeの使い方もサポートできません。サポートコミュニティなどでお問い合わせください。teratail（テ...

ファイル構成当テンプレートは、index.php ファイルへ複数のhtmlファイルを取り込み、1枚のファイル（1つのURL）として出力します。取り込まれるのは、includesディレクトリ配下のhtmlファイルです。※ディレクトリとはwin...

セクション見出し次のファイルの先頭にはセクションの見出し（headline）が付きます。・cart.html・money_back_guarantee.html・section_01～09.html（03を除く）一文字目は自動的に大文字に変...

サイトトップから下へスクロールして、本文が表示されるとトップナビがスルスルと現れます。上へスクロールしてヘッダまで戻ると、逆にスルスルと上に隠れます。ここにサイト名や商品名を記入します必要に応じて書き換えてください

リスト<div class="cart_contents"> ～ </div> ブロックを必要な数だけコピーし、内容を編集していきます。<li> ～ </li>を必要な数だけコピーし、内容を変更していきます。リストマークリンク先イメージ/i...

見本では全額返金保証の画像を表示させていますが、このセクションは単一画像を表示させるだけなら何にでも使えます。ヘッダのすぐ下に、キャッチコピーを入れた大きなバナーを表示させる等にも有効です。画像を変更する場合は、ここを書き換えるか、画像ファ...

ここを書き換えてください。会社名が無い時はサイト名でも良いでしょう。コピーライトの書き方についてはこちらが詳しいです（外部サイト）

特徴画像と文章が段落ごとに左右で入れ替わります。※スマホでは画像、文章、画像、文章・・・の順で縦に並びます。画像が隙間なくピッタリタイル状に表示するように画像をクロップ（部分切り取り）します。※文章が長すぎると隙間ができるので段落を分けてく...

特徴「主な機能」「商品の特徴」などを端的にカード形式で一覧表示します。PC（含むタブレット）では横3列に、スマホでは横1列で並びます。各アイテム名は、ある程度までは自動的に文字サイズを小さくして1行で表示します。イメージ画像はフィルム風に表...

特徴このセクションは、Section_02でリストアップしたことの詳細を記載していく使い方を想定しています。他のセクションと違い、セクションのヘッダ（大見出し）がありません。その代わり、セクション内の段落ごとの見出しを枠外に大きく表示します...

特徴段落見出しには、アクセントカラーをセンターにあしらったツートンカラーの下線が引かれ、とても魅力的です。Section 02のように画像と文章が左右で入れ替わりますが、こちらは画像をクロップしません。画像で敷き詰めるタイプではないので、文...

特徴主に権威付けのための引用を目的とするセクションです。YouTubeライダー2号の特設サイトや、当テンプレートの見本では英文と和訳を並べて書いていますが、英文だけ、和文だけでも大丈夫です。編集平文も引用も、どちらも<div class="...

特徴段落ごとに、背景色が灰色と白色の交互になります。自動で見出しにナンバリングが振られます。編集Section 01を参照してください。画像は好きな箇所に好きな数だけ挿入できます。段落数に制限はありませんが、連番が振られる特性上、2つ以上あ...

特徴YouTubeライダー2号の特設サイトでは特典リストとして使ったセクションです。PC・タブレットでは横2列、スマホでは横1列のカード表示となります。アイテムネームは文字が潰れない程度の大きさまでは1行で収まるように自動的にフォントサイズ...

特徴自己紹介などで利用することを想定したセクションです。YouTubeライダー2号のように複数の段落を置くことも可能です。段落数に上限はありませんが、あっさりしたデザインなので、あまり長文にすると飽きられる恐れがあります。編集Section...

特徴段落見出しをPCとスマホで違うレイアウトにしています。▼ PC▼ スマホ▼ サイン何といっても、このセクションの最大の特徴は末尾のサインです。このような手書き風のおしゃれなサインが自動的に生成されるのです。編集Section 03 を参...

_variables.scss各種配色や、リストマークのアイコンなどを一つのファイルで集中管理しています。以下のファイルを編集することで設定を一括で変更できますが、scssファイルはコンパイルしないと反映しません。\scss\_variab...