PC Bibo 6

ブログではない普通の静的な Web サイトで各ページにメニューなどを設置すると、メニューを変更したい場合に大変です。そこで、ブログのようにメニューなどの共通部分をモジュール化して各ページに挿入し、モジュールを変更するだけですべてのページに反映させることができないか調べてみました。

php を使う方法と SSI を使う方法があるようです。どちらの場合もサーバーがサポートしている必要があります。チェックしてみたところ、私がレンタルしているさくらインターネットでは、php と SSI の両方をサポートしていることが判明しました。php を使う方法は若干ややこしそうだったので、SSI を使うことにしました。設定はいたって簡単でした。

1. サーバーの任意の場所に、インクルード（挿入）ファイル用のフォルダ（たとえば、inc など）を作成します。

2. .txt ファイルに、メニューなどのインクルードしたい部分の HTML を記述し、適当な名前を付けます（たとえば menu.txt）。

3. 作成した .txt ファイルの拡張子を .inc に変更して（たとえば、menu.inc）、2. で作成したフォルダにアップロードします。

4. 既存の html ファイルの拡張子を .html （または .htm）から .shtml（または .shtm）に変更します。

5. .shtml ファイルの任意の箇所（ファイルをインクルードしたい箇所）に以下の記述を挿入します（ルートに inc フォルダを作成し、そこに menu.inc ファイルをアップロードした場合）。

挿入するファイルは、.html ファイルでも、.txt ファイルでも OK のようですが、できれば .inc ファイルが好ましいとのこと。

これで、menu.inc ファイルを変更するだけで、すべてのページのメニューに変更が反映されるようになります。

実際に SSI インクルードを使って共通部分を挿入した私のサイトのページ例はこちら。左サイドバーの「カテゴリーリスト」とページ下部の各種ブックマークや「関連記事」などをインクルード（挿入）しています。

参考にしたサイト:
外部ファイルを取込む方法(PHPまたはSSIインクルード)

1. まず、Facebook 開発者の Like Bottun ページにアクセスします。

2. [URL to Like] に自分のホームページの URL を入力します。たとえば、このブログであれば、「http://pcbibo6.jeez.jp/」と入力します。Layout Style、Width、Color Scheme などを好みに合わせて設定します。

3. [GET CODE] ボタンをクリックします。

4. iframe のコードをコピーして、「いいね！」ボタンを設置したい箇所に貼り付けます。

（Movable Type の場合の設置方法については、「Movable Type に「いいね！」ボタンを設置する」を参照 ）

参照サイト:
「いいね！」ボタンを設置しよう@Facebook Japan

文字のリンクにマウスを近づけたときに、以下のように説明文を表示する方法。

guestbook

リンクタグに title="マウスを乗せたときに表示させたい説明文" を記述するだけです。

自分のブログやサイトに「ツイートする」ボタンを設置します。

1. Twitter / ツイートボタンのページにアクセスします。

2. 好みのボタンを選びます。

3. 「ツイートする」ボタンを設置したい箇所に表示されたコードを記述します。以下のように表示されます。

Tweet

スタイルシートではなく、その場かぎりでスタイルを指定するには、HTML タグを

<div stye="">テキストや画像などのコンテンツ</div>

のように記述します。<div stye=""> と </div> で囲まれた箇所が指定のスタイルで表示されます。" " 内にスタイルを指定します。たとえば、背景が薄いグリーンの緑色の枠内に、20px のサイズの赤い太字で表示したい場合は、以下のように記述します。

実際にこれを記述すると、以下のように表示されます。

ただし、本来はスタイルシートで指定するほうがよいので、乱用しないほうが賢明なようです（このスタイルを常時使用する場合は、スタイルシートで指定します）。