「サイトの名刺?」ファビコン設置方法 -ファビコンテスト前哨戦-

くつキッチュ!アイコン wordpressカテゴリへ

本日はサイトの名刺『ファビコン』に関しての記事です。

サイトの名刺ファビコンテスト前哨戦-ファビコン設置方法-* アイキャッチ画像 Favicons by Loozrboy, on Flickr
Favicons by Loozrboy, on Flickr

サイトの名刺『ファビコン』

先日こちら⇒「オッス!オラSTINGER!」……のカスタマイズ、検索ボックス編 あとちょろっとbtn素材配布♪の記事で…

STINGERで目立つパーツベスト3は

  1. 検索フォーム
  2. SNSボックス
  3. ファビコン

※くつき調べ。

という、生意気な記事を書かせて頂きました。

これってSTINGERがまだここまで普及してなかった頃ならなんとも思わなかった事なんですけどね。

STINGERが流行り過ぎてしまったがゆえ、なんでもないことが気になるようになってしまったんだと思います。

というわけで、今回は前回の検索窓カスタマイズに続き、『できればやっておきたいファビコンカスタマイズの巻』です。

ファビコンてそんなに大事?

まずは「ファビコンなんてちっこいアイコンでしょ?そんなに大事?」というところから…

ファビコン…ChromeやFirefoxなどのタブブラウザに慣れている方なら結構大事なポイントだと思います。

FeedlyなどRSSリーダーでチェックしているときは、簡単に10~20くらいはタブを開いてしまいますし…。

そんな時に道しるべとなるのはやはりファビコンです。

例えば…

デフォルトのままの場合

サイトの名刺ファビコンテスト前哨戦-ファビコン設置方法-* アイキャッチ画像 favicontest2

例えばこれはSTINGER公式サイトとSTINGERのテーマをデフォルトまま使用しているサイトです。

ファビコンをデフォルトのままにしておくと、最悪、公式サイトとも被ってしまってかなり紛らわしいのがお分かりいただけるかと思います。

これはサンプルですので、わざと隣にしてありますが隣り合わせにならない場合でも、クリックする時に一瞬迷ってちょっと厄介;

ファビコンなしの設定の場合

ではファビコン設定が無いサイトの場合はどうなるかというと…

サイトの名刺ファビコンテスト前哨戦-ファビコン設置方法-* favicontest4

重なるとこんな感じです。

これもわかりやすいよう大げさにしてますが、 オリジナルでファビコンを設置しているサイトに比べてかなり判別しづらいのがわかります。

サイトの名刺ファビコンテスト前哨戦-ファビコン設置方法-* favicontest3

ちなみにWordpressの編集ページもファビコン設定がありませんので、Wp編集中ですとさらに複雑なことになります。

STINGERのファビコンカスタマイズ方法

というわけで、できればやっておきたいSTINGERのファビコンカスタマイズ方法ですが…

こちらもは先日の検索窓のカスタマイズとほぼ同様、方法は2つ。

※必ずバックアップを取ってから作業して下さい。

その1:rogo.icoをimageフォルダに放り込む

STINGERの場合、

/wp-content/themes/stinger3ver20140124/images

というフォルダに『rogo.ico』というファビコン画像ファイルがありますので、お好みのファビコン画像の名前を同名にしてimageフォルダに放り込んで上書きします。

この辺りは、「オッス!オラSTINGER!」…(ry  FTPソフトに放り込んで上書き♪と同じ方法です。

その2:header.phpのファビコンURLを入れ替える。

こちらは同じく検索窓カスタマイズ記事の 4 2. searchform.phpの画像URLを直接書き換え。と、同じです。

メディア⇒アップロード⇒編集⇒[ファイルのURL]をコピー⇒header.phpのファビコン画像のURLを書き換え⇒ファイル更新

header.phpの変更部分 ※stinger3ver20140124の場合は、38行目あたりです。

<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/rogo.ico" />shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/rogo.ico" />

こちらの<link rel=”shortcut icon” href=”<?php echo get_template_directory_uri(); ?>/images/rogo.ico” />部分を…

<link rel="shortcut icon" href="ファビコン画像のURL" />

に書き換え、ファイル更新します。

以上です。

オマケ:お手軽アイコンツール

ファビコン変換サービス 画像⇒アイコン変換ツール
ファビコン変換サービス 画像⇒アイコン変換ツール
ファイルをアップロードして『アイコン作成』をクリックするだけで簡単にアイコンが作成できるオンラインツールです。

なるべくタブを複数開かないのが一番なのですが…

ここまで来てなんですが、あまり開き過ぎるとブラウザが重くなりますし、本当はやたらとタブを開かないのが一番なんですよね。

それは分かってはいてもGunosyやはてぶなどで上がってくる記事を読み込むべきかどうか判断するためにだけちょっとだけタブを開きたい…

なんてことはよくあると思います。

くつきも気になるタイトルをクリックしまくった後、サイトに行って自分が欲している記事かどうか確認して取捨選択したりしてます。

サイトの名刺ファビコンテスト前哨戦-ファビコン設置方法-*  favicontest8

この場合、タブが10個以上開いてしまうなんてザラ。

さらにそこにFlickrからメールで「大英図書館に新着でいいの入ったよ!見る?」なんて言われてしまうと、最終的に結構な数のタブが開きまくってしまいます。

なるべくタブを開き過ぎないのが理想、しかし、現実的なところではなかなか難しい;;

現状は「わかっちゃいるけど、新着が目につくとどうしてもタブを開きまくっちゃうんだよね~」という方も多いのではないかと。

となると、「せめてオリジナルファビコンでわかりやすく」というのがリアルな対応策になるのではないかと思います。

予告:後日(こじんまりと)ファビコンテスト開催♪

くつきの独断ですが、ファビコンで一番目立つのは

  • ファビコンで使用できるスペースを余すところなく使える四角系
  • 濃い色の背景色に白抜きのテキスト

タイプかなと。

例えば、googleやJPGmini、ライフハッカーさんなど。

サイトの名刺ファビコンテスト前哨戦-ファビコン設置方法-* favicontest7

また、何かの形になっているファビコンの場合は…

  • 色数が少ないもの。
  • 塗りが一色(アウトラインがない)
  • コントラストのハッキリしたもの。

が、比較的見やすいのではないかと思います。

サイトの名刺ファビコンテスト前哨戦-ファビコン設置方法-* favicontest5

FlickrやYouTube、twitterなど。

その他、特徴的すぎて素晴らしいなと思うのはこんな感じのファビコン。

サイトの名刺ファビコンテスト前哨戦-ファビコン設置方法-* favicontest6

このメガネの人の良さそうなキャラクターは一瞬でデイリーポータルZと分かりますし、それほど読み込んでいない(スミマセン;)47ニュースもこれを見れば一瞬で判別できます。

そんなわけで、最近ファビコンに目がないくつきです。

もう少ししたら、ファビコンテスト(素敵ファビコンランキング)記事でも書こうかなと。

今回はその前哨戦ということで…

『ファビコンテスト』は、素敵ファビコンがストックでき次第回収いたす予定です♪

でっは~(*´∀`*)ノシ

ブログランキング・にほんブログ村へ
にほんブログ村

ちなみに、こちらはくつきのサイトのファビコンです。

黄色が『日々一素材』、白が『イチパン!』、ピンクが『くつキッチュ!』ですが、アウトラインが残っているのでちょっと見づらいかも;;

サイトの名刺ファビコンテスト前哨戦-ファビコン設置方法-* アイキャッチ画像 favicontest

  • このエントリーをはてなブックマークに追加
  • Share on Tumblr

関連記事

お世話になっているのに、忘れがちな「ブログ村」のぷちメンテ♪「(関連)画像メンテナンス」と「関連キーワード確認・変更」 該当記事とは関係ない「ドナルド」と「ミクさん」が表示されている場合など[再取得]をクリックします。 ※または、ドナルドを[代表表示]したい場合は、ドナルドにチェックを入れ直しておきます。

お世話になっているのに、忘れがちな「ブログ村」のぷちメンテ♪「(関連)画像メンテナンス」と「関連キーワード確認・変更」

なぜかどの記事にも頻繁に出没する記事にぜんぜん関連してない、ド+ルド  

記事を読む

ネットオウルでワードプレスをインストしてもログイン画面が表示されない時の対処法 default_page画像

ネットオウルでワードプレスをインストしてもログイン画面が表示されない時の対処法

 もくじ これまで無料サーバーのめちゃくちゃお手軽なインストールに頼りきりだったくつき

記事を読む

写真公開時のセキュリティに関して Online safety for kids by IntelFreePress, on Flickr

意外と知られていないExif情報のこと/写真公開時のセキュリティに関して

  Online safety for kids by IntelFreePress, on

記事を読む

shout! by su neko, on Flickr Wordpressの画像編集に絶望したーっ アイキャッチ画像

WordPress3.9更新後の画像編集画面に絶望したーっ!…ので、よく使うスタイル指定をメモメモ…

なんだか最近Wordpressの画像編集機能が微妙です。 3.9に更新してからというも

記事を読む

Tumblrボタン(フォロー、共有)設置方法 記事下設置やプロフィールへの設置、その他シェア方法など イチパン!サンプル

WordPressでTumblrボタンを実装してみた(記事下、サイドバーへの設置、その他シェア方法など)

  Share on Tumblr こちら、昨日作ったくつキッチュの姉妹サイト『イチ

記事を読む

「サイトへの AdSense 広告配信が停止されています」がSeesaaのタグ検索結果ページだった場合 Seesaa問題のタグ検索結果ページ

「サイトへの AdSense 広告配信が停止されています」が、Seesaaのタグ検索結果ページだった場合の対応メモ

問題のSeesaaのタグ検索結果ページのイメージ↑怖い……((((;゚Д゚))))カ

記事を読む

人生でやりたい100のリスト アイキャッチ画像 Miami Beach sightseeing bus tour - Ocean Drive by interbeat, on Flick

記事を書いているだけで人生が楽しくなった!「人生でやりたい100のリスト」がめっちゃオススメ!!

昨日こちらのテーマ(子テーマヘッダー部分CSS)でお世話になっておりますQtaro さん

記事を読む

ブラウザのみでWordPressが使える無料サービスCloud9を使ってみたッチュ!

ブラウザのみでWordPressが使える無料サービスCloud9を使ってみたッチュ!

クラウド最強エディタ「Cloud9」が、WordPressもブラウザのみでインスト・開発・公開が

記事を読む

【お知らせ】姉妹サイト『イチパン!』を半年後をめどに閉店させていただきます。 アイキャッチ画像 illust by くつきちよこ

【お知らせ】姉妹サイト『イチパン!』を半年後をめどに閉店させていただきます(*´▽`*)ノシ~

イラスト:くつきちよこ   登場人物:くつきちよこ ※管理人   佐

記事を読む

創作支援屋靴キッチュスクラップス!くつきちよこアイコン木の実モザイクVer  Illust by 佐藤利音 ベジェ化 by くつきちよこ

ランボー 怒りの新規ファイルのアップロードが出来ないWordPressトラブル※未解決 と、電子書籍出版お手伝い裏舞台

Panic stations ! by Craig Sunter - Thanx 2 Milli

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


Time limit is exhausted. Please reload CAPTCHA.

  • 創作クラスタ応援し隊のくつきちよこ(崛起智世子)です。 このブログは、「ネット著 作権」、「セルフプロモーション」、「ワードプレス運用」、「電子書籍サービス」、 「自己出版(セルフパブリッシング)」、「創作」等に関する情報をお届けしておりま す。 ※Wiki『創作ステージ@まちペディア』(ちょっと押してますが)作成中です♪
  • follow us in feedly
  • くつキッチュ/スクラップス! on Tumblr

  • 「表現の自由を守る党」自作応援バナー くつきちよこ

  • パソコン工房「CLIP STUDIO PAINT PRO推奨パソコン」エントリーモデル登場