PC Bibo 6

サイト全体ではなく、その場かぎりで使用する水平線のスタイルを指定する方法。

水平線は以下のように指定します。

color には水平線の色、height には水平線の太さ（高さ）、width には水平線の幅、border-style には水平線のタイプを指定します。

boarder-style には、以下のスタイルを指定できます。

dotted: 点線
dashed: 破線
solid: 実線（1 本線）
double: 実線（二重線）

width は% や px で指定します（100%、450px など）。

例 1: 赤色（#cc0000）、高さ 1px、幅 450px の点線の水平線

<hr style="color:#cc0000;height:1px;width:450px;border-style:dotted;">

例2: 青色（#89aaad）、高さ 2px、幅 450px の実線（1 本）の水平線

<hr style="color:#89aaad;height:2px;width:450px;border-style:solid;">

共通で使用する水平線はスタイルシートで指定します。例 2 の場合は以下のように指定。

ブログではない普通の静的な 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="マウスを乗せたときに表示させたい説明文" を記述するだけです。

Seessa ブログとさくらのブログで使えるシンプルなテンプレートです。

「Seessa（さくら）ブログにパンくずリストを設置する」のとおりにパンくずリストを設置し、さらに記事の上に表示さるナビゲーションを記事の下に表示されるように変更しています。実際の表示サンプルはこちらを参照してください。

上記のサンプルは右サイドバーのデザインですが、左サイドバーのデザインにも対応しています。また、ブルー以外にもグリーンとレッドも用意しました。以下のサンプルは画像ですので操作はできません。

グリーンの左サイドバーサンプル（イメージ）

レッドの左サイドバーサンプル（イメージ）

ブルーの右サイドバーサンプル（イメージ）

テンプレートの設定手順

1. 以下のテンプレートファイルを右クリックして、[対象をファイルに保存] を選び、PC の任意の場所に保存します。

seessa_template.zip

2. ダウンロードした seessa_template.zip ファイルを解凍します。

3. Seessa ブログ（さくらのブログ）の該当するブログの操作画面で、[デザイン] タブをクリックし、 [一覧からデザインを追加する] をクリックします。

4. 好みに応じて、右サイドバーまたは左バーのデザインを選び、[追加する] をクリックします。画面表示が変わったら [追加したテンプレートを今すぐ使用する] のチェックをはずしてから、[追加] ボタンをクリックします。

どのデザインを選んでもかまいませんが、白ベースのテンプレートですので、ヘッダ（Seessa ブログのロゴや検索ボックスなどが配置されているいちばん上の細い帯の部分）が白いものを選ぶとよいでしょう）。

5. 追加したテンプレートのタイトルをクリックします。

6. スタイルシートの編集画面が表示されます。既存の記述を希望のカラーのテンプレート（green_style.txt、blue_style.txt、または red_style.tex）の内容に書き換えます（テンプレートの内容をコピー&ペーストします）。

7. 書き換えが済んだら、[スタイルシートを変更する] ボタンをクリックします。

8. [デザイン一覧] タブをクリックしてデザイン一覧を表示します。今書き換えたデザインの [適用] ラジオボタンをクリックします。

これで、デザインの変更が完了しました。次にコンテンツの HTML を書き換えます。

9. [デザイン] タブの [コンテンツ] をクリックします。

10. [記事] をクリックします。

11. 右上にある [コンテンツHTML編集] をクリックします。

12. 表示された HTML を contents_html.text の内容に書き換えます。

13. [保存] ボタンをクリックし、[このウィンドウを閉じる] をクリックします。

14. コンテンツ画面で [設定を反映する] ボタンをクリックします。

以上で完了です。スタイルシートは、手順 8 で使った [適用] ボタンをクリックすることで、いつもで元のデザインに戻せますので、もしこのテンプレートが気に入らなかった場合でもいつでも無効にできます。また、コンテンツ HTML も手順 12 の画面で [初期値に戻す] にチェックを入れて [保存] ボタンを押すといつでも初期状態に戻せます。コンテンツ HTML を編集している場合は、現在の HTML 記述をメモ帳などにコピーしてバックアップしておくとよいでしょう。

* デザインだけ使う場合（パンくずリストは不要な場合）は、手順 9 以降は不要です。
* パンくずリストだけ設置したい場合（デザインは変更したくない場合）は、手順 9 以降を行います。

Seessa ブログとさくらのブログにパンくずリストを設置する方法については、「Seessa（さくら）ブログにパンくずリストを設置する」を参照してください。