PC Bibo 6

バナータイトルに画像を使用する方法。

スタイルシートと HTML を自由に編集できるブログ(Seessa ブログやさくらのブログなど)であれば、この方法はブログにも適用できます。バナータイトルに画像を利用すると、バナー部分にはおしゃれで簡潔なサイトタイトルを表示しながら、実際のブログ名にはキーワードを盛り込んだちょっと長めのタイトルをつけることができます。

一般的なブログでは、ブログタイトルがそのまま h1（最高レベルの見出し）として使われるため、できるだけキーワードを盛り込んだタイトルをつけたほうが SEO 的には有利になると思います。だからと言って、「PC 備忘録: ブログのカスタマイズや便利なサイトやツールに関する情報」といった長ったらしい名前も付けたくありません。

しかし、タイトルに画像を使うことによって、このようなキーワードを盛り込んだ名前を付けながら、表示されるタイトルは「PC Bibo 6」のように短く簡潔にすることができます。

バナータイトルに画像を使用したページのサンプルはこちらです。このサンプルではタイトルに、「ロゴ（バナー）を作成できるサイト」で作成した画像を使用しています。

スタイルシートと HTML の記述例については、「バナーのタイトルに画像を使ったページの HTML とスタイルシート」を参照してください。

ブログによって記述方法は多少異なると思いますが、ブログに応じて該当箇所を編集してください。

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

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

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="マウスを乗せたときに表示させたい説明文" を記述するだけです。