kyoto24.life

共通部分はSSIで!~XFREEでの書き方~

2019/1/28

共通部分はSSIで!~XFREEでの書き方~

 お読みいただきありがとうございます。この記事では、HTML初心者に向けて、サイトの共通部分を簡単に書く方法をご紹介します。このサイトもWordPressなどのテンプレートに頼らず、HTML、CSSを独学で書いて運営しています。そのため、ページの上部や下部、PCでは右にあるサイドメニューなどの共通項目をSSIを使って管理しています。

Webサイトの共通部分

 HTML, CSSを勉強してWebサイトを作れるようになると、ブログを初めたり、自分でサイトを作ったりしたくなりますね。実際のWebサイトには、このサイトのように「人気の記事」「最新の記事」などのサイドメニューや、各ページで同じヘッダーやフッターが使い回されています。

 教本では教えてくれませんから、毎回コードをコピペしているかもしれません。ですが、もし一部分だけ変えたい!と思ったら、どうすればいいのでしょうか?ページ数が増えていると、修正作業が膨大な量になってしまいます。そうならないために、各ページに共通している部分は別の1個のファイルで管理できる方法が「インクルード」と呼ばれるものです。

SSI(サーバーサイドインクルード)とは?

 インクルードの中にはPHPを使うものもありますが、今回はhtmlだけで完結する最も簡単なものをご紹介します。それが「サーバーサイドインクルード」(Server Side Include)、「SSI」と呼ばれるものです。

 余談ですが、「サーバーサイド」とはどういう意味でしょうか?Webサイトを閲覧するには、Webサイトの情報を送る「Webサーバー」と情報を受け取る「ブラウザ」が必要です。送信者側を「サーバー・サイド」、受信者側を「クライアント・サイド」と呼びます。プログラミング言語では、JavaScriptはクライアント・サイドで、PHPはサーバーサイドで動く言語です。つまり、SSIは「サーバーの側で別ファイルと合体しますよ」という意味なのです。

XFREEでSSIを実装する方法

 実装の仕方はとても簡単です。

  1. ①共通する部分のコードだけを書いたhtmlファイルを用意する
  2. ②共通部分を読み込みたい部分に<!--#include file="インクルードするファイル名" -->と書く。
  3. ③ファイル名を「ファイル名.shtml」として保存する。

 XFREEの場合「.htaccessファイル」をいじる必要はありません。SSIを使用したいファイルの拡張子を「.shtml」にするだけで、簡単にSSIが利用できます。

拡張子を「.html」のままSSIを使うには?

現状エックスサーバーの無料サービス「XFREE」では、「.shtml」で保存するしか、方法はありません。どうしても「.html」が良い場合は、エックスサーバーの有料プランを契約して下さい。

次の目標は独自ドメイン

 自分のサイトが完成したら「ユーザー名.xdomain.jp」という、ありふれたドメインから自分だけのかっこいいドメインにしたいですよね。このサイトも「kyoto24.life」というドメインを「お名前ドットコム」で取得しました。格安で手に入りますし、多少勉強代として払ったほうが、今後の勉強のモチベーションになるのではないでしょうか?

最近の記事

【Webテスト】適性検査cubicの例題と対策まとめ

2021.3.8

大学生が読むべき本は東大の教科書! -教養の教科書が面白い-

2020.5.22

【2020前期】京大般教の教科書(人社群)

2020.3.13

人気の記事

【GAS】Googleカレンダーで時給計算をする方法

2019.12.08

大学生が読むべき本は東大の教科書! -教養の教科書が面白い-

2020.5.22

【2020前期】京大般教の教科書(人社群)

2020.3.13

記事一覧