▲PAGE TOP

2014年4月18日金曜日

ウェブデザインの参考になるリンク集

favicon を作る


 自前( Photoshop )で作成したfavicon


Faviconデザインの参考になるサイト
http://www.smashingmagazine.com/2007/01/31/inspire-yourself-50-remarkable-favicons/



Photoshopでfaviconを作成する方法

photoshopにfavicon作成プラグインをインストールしていない場合は先にインストールしてください >>インストール方法はこちらへ
  1. faviconに私用する画像をphotoshopで作成する 画像解像度(サイズ)は64×64px
  2. 作成した画像を透過処理する
  3. 画像の画像解像度を32×32pxに変更する
  4. 画像を保存する 保存形式は ICOを指定し、ファイル名をfavicon.icoにする
  5. faviconをサーバーにアップロードする
【注意】Photoshopで保存する際はWEB用ではなく、必ずWindows形式の.icoで保存してアップロードすること そうしなければIEで表示しません。

faviconをウェブサイトで表示させる方法
Bloggerダッシュボード >テンプレート > HTMLの編集 と進み、テンプレート内の青太字の部分をfaviconのURLに書き換えます。
当社で紹介しているホームページ作成方法以外の場合は、ホームページのHTML内に下のHTMLを貼り付けてください。

【参考】IEでファビコンが表示できない場合の対処方法>> http://blog.caraldo.net/2009/01/iefaviconico.php



////////// テンプレート内にあるファビコンの画像URL変更箇所 //////////////// 

<!-- Favicon&#12288;&#9632;&#9632; ■■ファビコンの画像URLを入力する■■&#12288;ここから&#12288;&#9632;&#9632;
============================================================= -->
<link href='http://www.******.com/img/' rel='icon' type='image/x-icon'/>  
<link href='http://www.******.com/img/favicon.ico' rel='Shortcut Icon' type='img/x-icon'/>  
<!-- Favicon&#12288;&#9632;&#9632; ファビコンの画像URLを入力する&#12288;ここまで&#12288;&#9632;&#9632; -->

//////////////////////////////////////////////////////////////////////// 

PhotoshopにICOがプラグインされていない場合は?
Photoshopを起動させていない状態で以下の作業を行います
  1. ICOFormat.zip をダウンロードする
  2. 解凍し、中のプラグイン(ICOFormat)をプログラムファイル内にある Applications/Adobe Photoshop CS/プラグイン/ファイル形式に保存する
  3. PhotoShopを起動する
起動後、アプリケーションメニューから『プラグインについて』メニューでインストールされている事を確認できます。

こちらのサイト Photoshop で背景透過の美しい favicon (ファビコン) を作成する でもくわしく紹介しています。




COMMENT 投稿した内容は「 掲示板 」に掲載されます。
ペンネーム(必須)

タイトル

メールアドレス

話題にするページ/ウェブサイトのURL
メッセージ(必須)
アップロードする画像
パスワード(必須)