【LPコーディング】HTML共通パーツで同じセクションを再利用
申し込みのセクションなど同じセクションが1ページ内に何度も表示されているランディングページをよく見かけませんか？
商業系のLPではファーストビューの後、中間、フッター前など同じセクションが複数使うことありますね！
ゆめこさんは同じコードをコピペして全て書いていますか？
はい！同じHTMLコードをコピペして書いています
例えばそのセクションの一部（例えばボタンのリンク先）が変更になったら
全ての箇所を修正しますよね。
仮に同じセクションがLP内で100カ所にもなったらどうします？
文言検索して全て置換処理しますけど。。。
全て修正しきったのか。。確認が不安ではありますね。。
そうですよね！
置換処理すれば、さらーとできますが、
私も全て修正できたか？不安にはなります。
そこで今回は同じセクションを共通パーツ化して
1ヵ所だけ修正すれば、問題なく全て修正できる方法をお伝えします。
目次
事前準備
JQueryの読み込み
最初に、jQueryの機能を使用できるようにするため、jQueryのファイルをソースコードに読み込みます。最新版のコードは以下のリンクから取得できます（2024年8月時点での最新バージョンは3.7.1です）。
https://developers.google.com/speed/libraries#jquery
<head>タグ内に以下のコードを追加してください。
|
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> |
元のソースコードの確認
次に、ご自身のソースコードで、共通化できる要素を探します。例えば、以下のように同じ内容が繰り返されている場合です。
私のサンプルの場合は、seminar_dtlのclassがあるdivタグとtokutenのclassがあるdivタグがまるっきり同じコードになっています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
<main> <!-- セミナー詳細 start --> <div class="seminar_dtl"> <div class="seminar_ttl sp"> <img src="images/seminar_ttl.png" alt="売り上げアップ続出！No.1マーケター養成講座 完全無料WEBセミナー公開"> </div> <div class="gold_ttl_after"></div> <p class="pc-item mt10"><img src="images/seminar_01.png" alt="たった1ヵ月で500万円の成功者を生み出した方法とは？"></p> <p class="sp-item"><img src="images/sp-seminar_01.png" alt="たった1ヵ月で500万円の成功者を生み出した方法とは？"></p> <div class="seminar_point"> <ul> <li>実際に業績アップした成功事例</li> <li>業界No.1になるポジショニング戦略</li> <li>最短で業績をアップする<br class="sp-item">コピーライティングのノウハウ</li> </ul> </div> <p class="pc-item"><img src="images/seminar_02.png" alt="たった1ヵ月で500万円の成功者を生み出した方法とは？"></p> <p class="sp-item"><img src="images/sp-seminar_02.png" alt="たった1ヵ月で500万円の成功者を生み出した方法とは？"></p> </div> <!-- セミナー詳細 start --> <!-- 特典 start --> <div class="tokuten"> <p class="pc-item"><img src="images/tokuten.jpg" alt="さらに今なら参加者無料特典!!売り上げを3倍にしたコピーライティングノウハウ 無料プレゼント!!"></p> <p class="sp-item"><img src="images/sp-tokuten.png" alt="さらに今なら参加者無料特典!!売り上げを3倍にしたコピーライティングノウハウ 無料プレゼント!!"></p> <div id="form" class="mail_form"> <form name="asumeru_form" method="post" action="#"> <fieldset> <input type="email" name="touroku_mail" id="touroku_mail" size="60" istyle="3" mode="alphabet" value="" class="inputText inputTextLong" placeholder="メールアドレスを入力" required/> <input type="hidden" name="no" value="aIRnMXzUqw" /> <input type="hidden" name="action" value="kakunin" /> <p class="pc-item mt10"> <input type="image" name="submit" value="確定" class="formBtn" src="images/btn.png" /> </p> <p class="sp-item mt10"> <input type="image" name="submit" value="確定" class="formBtn" src="images/sp-btn.png"/> </p> </fieldset> </form> </div> </div> <!-- 特典 end --> <!-- この間のコードは省略します。 --> <!-- セミナー詳細 start --> <div class="seminar_dtl"> <div class="seminar_ttl sp"> <img src="images/seminar_ttl.png" alt="売り上げアップ続出！No.1マーケター養成講座 完全無料WEBセミナー公開"> </div> <div class="gold_ttl_after"></div> <p class="pc-item mt10"><img src="images/seminar_01.png" alt="たった1ヵ月で500万円の成功者を生み出した方法とは？"></p> <p class="sp-item"><img src="images/sp-seminar_01.png" alt="たった1ヵ月で500万円の成功者を生み出した方法とは？"></p> <div class="seminar_point"> <ul> <li>実際に業績アップした成功事例</li> <li>業界No.1になるポジショニング戦略</li> <li>最短で業績をアップする<br class="sp-item">コピーライティングのノウハウ</li> </ul> </div> <p class="pc-item"><img src="images/seminar_02.png" alt="たった1ヵ月で500万円の成功者を生み出した方法とは？"></p> <p class="sp-item"><img src="images/sp-seminar_02.png" alt="たった1ヵ月で500万円の成功者を生み出した方法とは？"></p> </div> <!-- セミナー詳細 start --> <!-- 特典 start --> <div class="tokuten"> <p class="pc-item"><img src="images/tokuten.jpg" alt="さらに今なら参加者無料特典!!売り上げを3倍にしたコピーライティングノウハウ 無料プレゼント!!"></p> <p class="sp-item"><img src="images/sp-tokuten.png" alt="さらに今なら参加者無料特典!!売り上げを3倍にしたコピーライティングノウハウ 無料プレゼント!!"></p> <div id="form" class="mail_form"> <form name="asumeru_form" method="post" action="#"> <fieldset> <input type="email" name="touroku_mail" id="touroku_mail" size="60" istyle="3" mode="alphabet" value="" class="inputText inputTextLong" placeholder="メールアドレスを入力" required/> <input type="hidden" name="no" value="aIRnMXzUqw" /> <input type="hidden" name="action" value="kakunin" /> <p class="pc-item mt10"> <input type="image" name="submit" value="確定" class="formBtn" src="images/btn.png" /> </p> <p class="sp-item mt10"> <input type="image" name="submit" value="確定" class="formBtn" src="images/sp-btn.png"/> </p> </fieldset> </form> </div> </div> <!-- 特典 end --> </main> |
同じコードがたくさんあると
やっぱりコード量が多くなって修正にミスってしまいそうですね。
2つくらいであれば、集中すればなんとかなりますが、
これがたくさんあると自分でも修正したのか？
不安になります(^^;)
ということでここから共通化していきますよー！
HTMLを共通化
共通化するパーツを格納するフォルダを作成
まず、共通パーツを格納するフォルダをプロジェクト内に作成します。以下はその例です。
今回の例では以下の構成にしています。
元のフォルダ構成
新しいフォルダ構成
partsというフォルダを新規に追加します。
※フォルダ名は任意ですが、今回は parts としています。
共通パーツのHTMLファイルを作成
次に、新しく作成したフォルダ内に、共通化する部分のHTMLファイルを作成します。
今回は例として apply.html というファイルを作りました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!-- セミナー詳細 start --> <div class="seminar_dtl"> <div class="seminar_ttl sp"> <img src="images/seminar_ttl.png" alt="売り上げアップ続出！No.1マーケター養成講座 完全無料WEBセミナー公開"> </div> <div class="gold_ttl_after"></div> <p class="pc-item mt10"><img src="images/seminar_01.png" alt="たった1ヵ月で500万円の成功者を生み出した方法とは？"></p> <p class="sp-item"><img src="images/sp-seminar_01.png" alt="たった1ヵ月で500万円の成功者を生み出した方法とは？"></p> <div class="seminar_point"> <ul> <li>実際に業績アップした成功事例</li> <li>業界No.1になるポジショニング戦略</li> <li>最短で業績をアップする<br class="sp-item">コピーライティングのノウハウ</li> </ul> </div> <p class="pc-item"><img src="images/seminar_02.png" alt="たった1ヵ月で500万円の成功者を生み出した方法とは？"></p> <p class="sp-item"><img src="images/sp-seminar_02.png" alt="たった1ヵ月で500万円の成功者を生み出した方法とは？"></p> </div> <!-- セミナー詳細 start --> <!-- 特典 start --> <div class="tokuten"> <p class="pc-item"><img src="images/tokuten.jpg" alt="さらに今なら参加者無料特典!!売り上げを3倍にしたコピーライティングノウハウ 無料プレゼント!!"></p> <p class="sp-item"><img src="images/sp-tokuten.png" alt="さらに今なら参加者無料特典!!売り上げを3倍にしたコピーライティングノウハウ 無料プレゼント!!"></p> <div id="form" class="mail_form"> <form name="asumeru_form" method="post" action="https://1lejend.com/stepmail/kd.php?no=aIRnMXzUqw"> <fieldset> <input type="email" name="touroku_mail" id="touroku_mail" size="60" istyle="3" mode="alphabet" value="" class="inputText inputTextLong" placeholder="メールアドレスを入力" required/> <input type="hidden" name="no" value="aIRnMXzUqw" /> <input type="hidden" name="action" value="kakunin" /> <p class="pc-item mt10"> <input type="image" name="submit" value="確定" class="formBtn" src="images/btn.png" /> </p> <p class="sp-item mt10"> <input type="image" name="submit" value="確定" class="formBtn" src="images/sp-btn.png"/> </p> </fieldset> </form> </div> </div> <!-- 特典 end --> |
なるほどー！
共通化したい部分を別ファイルに分けるんですね！
はい、ご自身のコードで共通化したい部分のhtmlコードを別ファイルにします。
共通パーツの読み込み
作成した共通パーツを元のソースコードに組み込みます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<main> <!-- 共通パーツの読み込み --> <div class="common_apply"></div> <!-- この間のコードは省略します。 --> <!-- 共通パーツの読み込み --> <div class="common_apply"></div> <!-- common_applyというclassの要素内にpartsフォルダ内のapply.htmlの内容を読み込む--> <script> $(function () { $(".common_apply").load("parts/apply.html"); }); </script> </main> |
注目する箇所は2ヵ所です。
まず、元のソースコードの共通パーツを読み込ませたい箇所に以下のようなタグを追加します。
※class名は任意ですが、今回は common_apply としています。
<!– 共通パーツの読み込み –>
<div class=”common_apply”>
<!— この中に共通パーツが読み込まれる –>
</div>
次に、jQueryを使って、共通パーツを読み込むコードを追加します。
|
1 2 3 |
$(document).ready(function(){ $(".common_apply").load("parts/apply.html"); }); |
partsというフォルダにあるapply.htmlをcommon_applyというclassのある要素内に読み込むようにしています。
そういうことなんですね！
これなら簡単に同じパーツを呼び出せますね！
始めはしっかり表示されているか？
確認することは必要になりますが、
一度確認できれば、それ以降の修正は
共通パーツを1ヵ所修正すれば、
全て修正されている安心感はありますよ！
読み込む要素をclassで指定していますが、
例えばidで指定することもできるのでしょうか？
はい、可能です！
cssと同じように指定が可能です。
もし読み込む要素にidでcommon_applyと
書かれている場合は以下のように読み込みます。
|
1 2 3 4 5 |
<script> $(function () { $("#common_apply").load("parts/apply.html"); }); </script> |
#にすればいいから
cssで書くのと同じですね！
そうです！
mainとかh2とかタグで指定することもできるので、
色々とお試しくださいませ。
ローカル環境でのjQueryを使ったファイル読み込みの注意点
VSCodeなどのライブサーバーで動作させると、ローカルでも共通化された部分が表示されるため、問題がないように見えます。
しかし、これを通常のブラウザで直接開くと、読み込まれたはずの内容が表示されないことがあります。
この現象は、ローカルファイル（file://プロトコル）を直接ブラウザで開いた場合、Ajaxリクエスト（この場合、.load()メソッド）に制限がかかるためです。ブラウザのセキュリティ機能により、クロスオリジンリクエストがブロックされ、外部ファイルの読み込みが失敗してしまうのです。
その為、確認する際はVSCodeなどのエディターでライブサーバーを起動した状態で確認しましょう。
まとめ
今回は、ランディングページの同じセクションを効率的に共通化する方法をご紹介しました。
デザインや構成によって変更が必要な場合もありますが、重要なポイントは以下の通りです。
- jQueryを
<head>タグ内で読み込みます。最新版は こちら から取得できます。 - 共通パーツを挿入したい場所に、特定の
class名を指定した<div>タグを用意します。 - jQueryの
.load()メソッドを使用して、外部ファイルを指定した要素に読み込みます。
これらの手順を活用することで、コーディングの効率を向上させ、保守性の高いランディングページを作成することが可能です。是非、実際のプロジェクトでお試しください。
この記事を書いた人
- フリーエンジニア / Webデザイナー / LPコーディング講師 / シンガーソングライター
-
歌うプログラマーとして
IT業界、プログラミングの"あるある"を歌にしている。プログラミングもデザインも音楽も色々とやるパラレルキャリアな人。
最新の投稿
WordPress2024.08.23【Lightning】無料版でヘッダー上部機能を追加する方法- LPコーディング2024.08.11【LPコーディング】HTML共通パーツで同じセクションを再利用
- 新着情報2024.07.17【制作実績】あざみ野 勝俣接骨院 様 Webサイトリニューアル
- LPコーディング2022.09.27【LPコーディング】Q＆A 質問をクリックすると回答を表示する方法
フリーランスエンジニア歴10年のセールスデザインができるWeb制作者 石井よしまさのメルマガ
10年で関わった現場は13社。
その中で4社から正社員オファーを頂くことができた私が
主にフリーランス初心者向けに、
以下のような内容を配信していきます。
「常駐型のフリーランスで評価される為に大切な5つのマインド」
「10年で13社の案件に関わり、なぜ4社から正社員オファーがあったのか？」
「セールスデザイナーが依頼すべき良いコーダーとは？」..
などについて学べます。
是非、フリーランスとしてやっていきたい！
という方は、ご登録ください(^^)
