コピーペースト作業からの解放！サイドバーを全ページ共通にする方法

ホームページ作成

もし、あなたがHTMLでホームページを作成しているなら、こんなこと思ったことありませんか？

「サイドバーは共通なんだから、自動で全ページに同じ物を表示してよ！！」


そうなんですよね。

サイドバーや、ヘッダー、フッターは、全ページ共通なのに、
１ページ書くたびに、コピーペーストしなければいけないって、めっちゃメンドクサイ！

しかも、サイドバーの１部だけ変更したくなったら、
全ページのサイドバーを直さなければいけない。

ありえねー。

ブログやWordPressなら、自動で全ページ更新されるのに。


そんなあなたの悩みを解決してくれるのが、「SSI」というものです。

まぁ、おまじないみたいな物です。w


そんなに難しくないので、チャレンジしてみてください。


まずはレンタルサーバーがSSIに対応していることが必要ですので確認してください。


今回は、エックスサーバーで、サイドバーを共通化する方法を簡単に紹介します。




参考にしたのは、このサイト。（感謝）
HTMLの共通部分をSSIで効率管理（AllAbout）
ミケネコの htaccess リファレンス



１）設定するドメインのフォルダのpublic_htmlフォルダに置いた .htaccessというファイルに、以下のように追記

Options +Includes
AddHandler server-parsed html


２）上記 public_htmlフォルダに、サイドバー等の共通部品を置くフォルダをつくる

例）　＊＊.com/public_html/ssi/　（←ssiという名前のフォルダにした）


３）１つのページのソースから、共通化したい部品＝サイドバーのソースをコピーして、
テキストエディタで新規作成したファイルに貼付け、ssiフォルダにhtmlファイルとして保存。
名前は、「side-bar.html」とか。

（ とかとかは書かない。コピーしてきたサイドバーのソースを貼るだけ）


４）各ページのサイドバーのソースを削除し、かわりに

<!--#INCLUDE VIRTUAL="/ssi/side-bar.html"-->

と記入　
→共通のサイドバーを表示したい全ページについてこれをやる


５）更新したファイルをFTPでアップロード


これだけ。


これで、サイドバーを変更したくなったら、/ssi/side-bar.htmlを修正して上書きアップロードするだけで・・・


なんということでしょう！
全てのページのサイドバーに変更が反映されるではありませんか！ (ToT)/




難しいこと抜きに、どうなっているか簡単に言っておくと、

<!--#INCLUDE VIRTUAL="/ssi/side-bar.html"-->

と書いたところに、
ssiフォルダのside-bar.htmlの中に書かれたソースが差し込まれて
表示されるというわけです。



全部のページを直すのが面倒で、ほっといた人、
泣きそうになりながら、コピーペーストで修正していた人は、
是非チャレンジしてみてください。


ほんと、今までの苦労は何だったんだ！って思いますよ。
感動さえ覚えるはずです。



結構知らない人いるんですよね。
困ってるお友達にも教えてあげてください。