ファビコンの設置方法（お気に入りアイコン）

１）元の画像を作成する

ファビコンとはIEのお気に入りの時に頭につく小さい正方形のアイコンです。

GoogleChromeのブックマークの時にも出てくるし、サイトを覚えて貰いやすくなるので設置することをオススメします。

ファビコンは16ピクセル×16ピクセルという超小さいアイコンなので、すごく小さくなっても判別できるような単純な画像、マークのようなもの。ロゴなら最初の一文字だけにするとか・・・がオススメです。

元の画像は、正方形で少し大きめで用意しておくと良いと思います。

例では250px四方のpng形式で作りました。

２）こちらにアクセスして、アップロードします

Dynamic Drive- FavIcon Generator

３）出来たファイルをサーバーの、HPのデータがある一番上の階層にアップします

ファイルはfavicon.ico

という名前で作成されます。この名前は変えないこと。

ファイルをアップロードする場所は、ホームページのルート（一番上の階層）です。

４）HTMLの から　の間にコードを入れアップします

★のところにドメイン名

５）このように表示されます

＞見本サイト　糸魚川翡翠工房こたきさん

7）ネットショップの場合

上記の見本サイトはネットショップなので、ショッピングカートASPを利用しています。

この場合はHTMLに直接記述してサーバーにアップすることはできないので、管理画面から設定する方法をとります。

おちゃのこネットで作りました

ショップ基本設定　＞メタタグ設定　＞ヘッダー

ここに記述します

アカウントIDの部分は、この場合、itoigawahisuiになります

favicon.icoは、画像管理画面にて、コンテンツフォルダにアップロードします。

《モモンガよりお得な情報》

ショッピングカートASP　おちゃのこネット　なかなかいいですよ。

かなりカスタマイズがやりやすいです。この値段でここまで改造できるのはコストパフォーマンスが

goodです。　上記のリンクをクリックしたあとに、右上の赤いボタンから、お試し登録が出来ます。

お試し登録は毎月20日が締め日なので、

21日に登録すれば、まるまる１ヶ月無料で試せます。

複数ファイルを一瞬で検索して、編集したり置換したりできる便利なフリーソフト

テキスト検索／置換ソフトでとてもいいのを教わったので紹介します。

動作も軽くて、たくさんのファイルの中から一瞬で抽出してくれます。

・フォルダ内のファイルを一括して検索、置換できます。
・発見したテキストの前後を一覧表示し、必要なものだけ置換できます。
・発見位置をエディタで表示して確認できます。
・ワード検索が可能です。
・検索、置換で正規表現が使えます(Perl互換を含む多くの正規表現に対応)。
・各種文字コード(Shift-JIS、Unicode、EUC_JP、JIS、UTF-8)を自動判別。
・置換前に自動でバックアップします。

Vectorのサイトで紹介されています。Devas(ディーヴァス)

http://www.vector.co.jp/soft/win95/util/se162621.html

ここから貰うと、exeファイルで、WindowsXPでないと正常にインストールできないようなので、作者様のサイトにいけば、zipファイルが置いてあります。







http://gimite.net/pukiwiki/index.php?Devas




※Devasは開発を終了しました。今後のバージョンアップはありません。現在のバージョンを使うのは問題ありません。とあるので、一応了解したうえで、上記サイトから

Devasをダウンロード (Ver.3.5, ZIP形式)をダウンロードします

使い方はこのような感じです。すごく軽くて安定してるので気に入ってます。作者のGimiteさん、ありがとうございます。

webデザイン・初心者のためのテーブルレイアウトのコツ

ホームページを作る上での基本形に、ヘッダー＋フッター＋２カラムの形がありますね。
よくブログでみかけるこの形です。

ブログはCSSデザインで構築してある場合がほとんどですが、初心者にとってCSSデザインを覚えるのは壁が高い・・・かも？？
というわけで、初心者さんにオススメなのがテーブルを使って作る方法。
今回はテーブルデザインのポイントと初心者さんが間違いやすい部分のお話です。

（１）基本形はこれになります



ソース

---

<table width="500" border="1">
<tr>
<td height="22" colspan="2">ヘッダー</td>
</tr>
<tr>
<td width="129">サイドナビ</td>
<td width="355">メイン</td>
</tr>
<tr>
<td colspan="2">フッター</td>
</tr>
</table>

---

（２）１を改良するコツとしては、すべてのセルに valign="top"を入れて上にくるようにすること

---

<table width="500" border="1">
<tr>
<td height="69" colspan="2" valign="top">ヘッダー</td>
</tr>
<tr>
<td width="132" height="113" valign="top">サイドナビ</td>
<td width="352" valign="top">メイン</td>
</tr>
<tr>
<td height="46" colspan="2" valign="top">フッター</td>
</tr>
</table>

---

（３）で、サイドナビを入れたいですよね・・・。基本枠の中にさらに枠を作りたいときの基本は、こんなふうにするのではなく

---

（これは悪い例です）
<table width="500" border="1">
<tr>
<td height="69" colspan="2" valign="top">ヘッダー</td>
</tr>
<tr>
<td width="145" valign="top">メイン</td>

<td width="339" rowspan="5" valign="top">メニュー１</td>
</tr>
<tr>
<td valign="top">メニュー２</td>
</tr>
<tr>
<td valign="top">メニュー３</td>
</tr>
<tr>
<td valign="top">メニュー４</td>
</tr>
<tr>
<td valign="top">メニュー５</td>
</tr>
<tr>
<td height="46" colspan="2" valign="top">フッター</td>
</tr>
</table>

---

（４）このように、さらに中にテーブルを入れると制御しやすくなります

---

<table width="500" border="1">

<tr>
<td height="69" colspan="2" valign="top">ヘッダー</td>
</tr>
<tr>
<td width="203" height="113" valign="top"><table width="200" border="1">
<tr>
<td>メニュー１</td>
</tr>
<tr>
<td>メニュー２</td>
</tr>
<tr>
<td>メニュー３</td>
</tr>
<tr>
<td>メニュー４</td>
</tr>
<tr>
<td>メニュー５</td>
</tr>
</table></td>
<td width="281" valign="top">メイン</td>
</tr>
<tr>
<td height="46" colspan="2" valign="top">フッター</td>
</tr>
</table>

---

制御しやすいからと、テーブルの入れ子入れ子入れ子・・・をどんどん繰り返していると、
複雑なソースになって、あとで修正したいときなどに混乱する場合もあるので
入れ子は最低限に使うようにしましょう。

この方法の応用編を動画マニュアルにて解説しています。
ドリームウィーバーを使ったテーブルデザインの方法
（１）から（６）まで順番で見ていただくと、どんな手順でやったら効率が良いかわかっていただけると思います。