2008年10月29日

【サイト作成】メニューなど共通部分を一括管理する

最近知って便利だったSSIのINCLUDEの覚書。
これを利用することで、HTMLファイル内に他のファイルを読み込んでくれるので、メニュー部分など各ページで共通の項目の管理に便利。
たとえば、新着紹介用ページを新たに作ったのでサイドバーにリンクを追加したい場合など、サイドバー内容を記述したファイル1個を更新するだけで全ページに反映されます。copyright表記の2008年など書く部分を2008-2009年に変更する、なんてときにも便利ですよね

■必要なもの
・SSIが使用可能なサーバ
・テキストエディタ

■外部ファイル作成
1:外部ファイルに切り出したい部分を、エディタを使用してテキストファイルに書く。
 例)<p>期間限定!3,000円以上のご購入で送料無料♪</p>
2:ファイル名を決める。拡張子は.txtのほか、.htmlなどでもOK。
 例)muryou.txt

■呼び出し元ファイル作成
1:ファイルを読み込みたい箇所に、以下のように記述
 <!--#include file="外部ファイル名.拡張子"-->
 例)<!--#include file="muryou.txt"-->
2:呼び出し元ファイルの拡張子は.shtmlにする
 例)shouhin1.shtml

上記の例では、呼び出し元ファイルと外部ファイルは同じフォルダですが、外部ファイルを別フォルダにまとめることも可能ですし、呼び出し元ファイルの拡張子を.shtmlではなく、.htmlに指定することもできます。
詳しくは下記ページ参照してください。
ページ作成実践講座[10] HTMLの共通部分をSSIで効率管理

ssi includeでネット検索してもいろいろ情報が出てきて参考になります。
わからない点等、私に聞いてくださってもいいですが、どっちみちググってお答え!(汗
私もつい最近、ssi初めて使ったばかり。
ちなみに最初、動かーーん!と思ったら、エラーの王道・タイプミスしてました。
ファイル名はしっかりチェックしましょう(そんなミス私くらいか)

でもこれで
送料無料金額が1ヶ月やそこらでころころ変わっても!
事務所の住所が変わっても!!
変更が(少しは)ラクチンになるですよ♪
もっと早く知ってればよかった・・・
この記事へのコメント
あたし、読んでるだけで頭がぁ〜(_ _|||)

nikiさん、すごい!!
習得しちゃたんでしょ?

確かに、様々な変更のたび作業が面倒なのは事実。
だけど…あたしの頭が受け付けてくれません^^;

あたしは、面倒作業するしかないです。
柔らかな頭が欲しいよぉ〜〜!!
Posted by まあ at 2008年10月29日 08:07
まあさん、おはよう!
ごめんなさい、頭に入らないのは私の書き方が悪いせいです〜
共通化したい部分(A)があったら、
Aを読み込むファイル.shtml
A.txt(呼び出されるファイル)
で出来ますよ、ってそれだけなんです。
あと、書き方がこうで、この方法を使える環境(サーバ)がこれこれ、という話。

htmlファイルを扱う人は覚えておくと絶対便利だと思います。

でも、一番使いたい部分はヘッダとかサイドバー、フッターとかなんでブログメインで(MTとか)使ってる人にはあまり関係のない話かな(^^;
Posted by niki at 2008年10月29日 10:06
勉強になります。
そういう方法があるんですね。
SSI、頭の片隅に入れておきます(^^)

私が使える日はずっと先になりそうだけれど。。

nikiさん、ホントに勉強家ですね〜
Posted by のんびりママ at 2008年10月29日 14:07
のんびりママさん、こんにちは。
ぜーんぜん勉強家なんかではないですよう。
なんとかして楽しよう楽しようと思ってるだけで・・・
AQUASあたりのツールでは、一元管理しちゃってる部分かなとも思いますが、何かの折に役に立つことがあれば嬉しいです(^^
Posted by niki at 2008年10月29日 14:35
これ結構重要ですいよね
HPビルダーはついていないから、むずかしくてインラインフレームつかってました。けどSEO的には良くないし・・・ドリームウィーバーはついているから
いいなぁとおもってました。今は、そんなことは無理なのでテンプレート使ってます
Posted by yoshi at 2008年10月29日 23:03
yoshiさん、おはようございます
SSIだと自サーバにあるものしか参照できないけど、インラインフレームだと別サーバでも読み込めるそうですね。でも、そうなるとSEO的にはよくないと言われるのもなんだかわかります。

ドリームウィーバーだとローカルでSSI確認できるんですか!それは便利ですね!
とりあえず、SSI利用する用のテンプレを作ったので、今後作業効率が上がるのを期待してるんですが、サーバにアップしないと確認できないのが面倒です・・・
Posted by niki at 2008年10月30日 06:12
こんばんは〜

共通部分を作るやつ、SSIっていうんですか。
初めて知りました・・・(汗)

ビルダー使ってるとき、どうやったらできるのかと悩んでました。
結局、それがわからずにビルダーでサイト作るのやめたんですよね〜

またひとつ勉強になりました。感謝♪
Posted by koz2 at 2008年10月30日 21:37
koz2さん、おはようございまーす
SSI=「サーバ側であらかじめ組み込まれたコマンドを利用する仕組み」
INCLUDE=別のファイルをHTMLファイル内に挿入するためのSSIのコマンド
ということになるようです。
とかえらそうに書いてますけど、私もごくごく最近まで知りませんでした(^^;
参考になったなら嬉しいです♪

私はサイト製作用ソフトではどれでも共通部分の管理は楽々できるのかと思ってましたが、ビルダーだと出来ないんですね。
Posted by niki at 2008年10月31日 09:26
nikiさん、コメントありがとうございます。

SSI INCLUDE・・・難しすぎてやっぱり意味分かりません(爆)

HPビルダーは最高のネーミングですね。
実はこれだけで、HPをビルドするのは大変♪

何人の人が散っていったか・・・(笑)
Posted by koz2 at 2008年10月31日 17:36
koz2さん、こんばんは。
ごめんなさい、難しく感じるのは私の書き方がマズイせいですm(_ _;mお時間のあるときにでも、リンク先を見てぜひ一度やってみてほしいところですが。。。

なんと!HPビルダーなのにHPをビルドするのが大変とは(^^;意外と使い勝手が悪いというウワサはなんとなく知ってましたが・・・
でも、あの日あのときダンナのお許しが出て購入してたら、私は今もビルダー使ってるような気がします。そう思うとちょっとフクザツ。
Posted by niki at 2008年10月31日 20:53
SSIつかえるサーバーと使えないとこあるから、そこから気をつけないとだめなんですよね。
でも、できれば本と便利です♪
Posted by mimi at 2008年11月01日 06:27
mimiさん、おはようございます
秋休み、お子さんと(お子さんが?)楽しまれてますか?(^^)
SSI使えないサーバーだとどうしようもないですよね(--;借りるときは知らなかったので、使えるサーバーでラッキー♪でした。(でもコアサーバーなんで大体のことはできそうです)
ファイル1個変更するだけで全ページに反映されるなんてウソみたいに便利!

mimiさんはそういう便利ワザを他にもいろいろ知ってそう(^-^)
Posted by niki at 2008年11月01日 08:11
nikiさん特待生のコミュニティでこの記事教えてくださって、ありがとうございます!

やってみますね、解らなかったら、また聞きに伺います(^ ^!)
Posted by dairy at 2009年03月21日 08:28
>dairyさん
是非やってみてください!
たぶんすぐ出来ますよ(^-^)
もしうまくいかないときは質問どうぞ
Posted by niki at 2009年03月21日 09:51
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/108758954
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。