FC2ホームページで共通部分を一元管理する方法

FC2ホームページで複数のページを管理する際、共通部分を一元管理したいという要望はよくあります。特に、PHPやSSIが使えない場合、JavaScriptを使って共通部分を管理する方法について解説します。この記事では、FC2ホームページでの共通部分の一元管理方法と実装例を紹介します。

FC2ホームページでの共通部分管理の課題
JavaScriptを使った共通部分の管理方法
1. ステップ1: 共通部分のHTMLを外部ファイルに分ける
2. ステップ2: JavaScriptで共通部分を読み込む
FC2の制約を乗り越えるためのポイント
まとめ

FC2ホームページでの共通部分管理の課題

FC2ではPHPやSSIを利用できないため、通常の方法で共通部分を管理するのが難しいです。しかし、JavaScriptを活用すれば、共通部分を管理する方法が見つかります。特に、ナビゲーションメニューやヘッダー、フッターなど、複数ページで使い回す部分を効率的に管理できます。

JavaScriptを使った共通部分の管理方法

JavaScript（jQueryなし）を使って、複数ページで共通部分を管理するには、まずHTMLの共通部分を外部のJavaScriptファイルにまとめます。次に、このJavaScriptファイルを各ページに読み込ませることで、共通部分を動的に読み込むことができます。

ステップ1: 共通部分のHTMLを外部ファイルに分ける

まず、共通部分をHTMLファイルとして分けます。例えば、ヘッダーやフッターを外部ファイルに保存し、JavaScriptで読み込むようにします。

ステップ2: JavaScriptで共通部分を読み込む

次に、JavaScriptを使って、外部HTMLファイルを読み込む処理を作成します。以下は、JavaScriptを使って外部ファイルを読み込むサンプルコードです。

function loadHTML(url, elementId) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.onload = function() {
    if (xhr.status === 200) {
      document.getElementById(elementId).innerHTML = xhr.responseText;
    }
  };
  xhr.send();
}

このコードを使って、指定したIDの場所に共通部分のHTMLを動的に挿入できます。