KASABUTA-ENDLESS

*

お気に入りやタブ横のアイコンを作成して変更・表示させる方法

   

お気に入りやタブ横に表示されるアイコンをオリジナルで作成して変更・表示させる方法

お気に入りやタブ、アドレスの横に表示されてるアイコン。

あれって、なんなんでしょうかね?

上の画像でいうと、「a」はアマゾンだとすぐに分かります。

「f」はフェイスブックだし、「G」はグーグル様、

スカイプ、ツイッター、ワードプレス、ヤフーと。

アイコン見ただけで知ってる人は「あのウェブサイトだ!」と理解できるのです。

このアイコン、俗称「ファビコン」というんですが、そのウェブサイトのシンボルマークです。

そのサイトの印象付け、ブランド化になりますね。

あとはお気に入りに入れてもらえたときにアイコンが目立つし、「このブログ作りこんでるなぁ~」感がでるでしょ(笑)

なくても困らないけど、あれば嬉しいんです。

私みたいにカタチから入りたい人とかには特に勧めたいです。

私が今から記事を書きながらファビコン作成・設定していきますので、一緒になって見てみてください。

スポンサーリンク

STINGER5のデフォルトでのファビコン

当ブログでは「STINGER5」というワードプレステーマを使用しています。

このテーマを使用すると、

stigerfavicon

赤丸のところのスタイリッシュな「5」っていうアイコンがデフォルトになります。

このテーマでのデフォルトってことは、他の使用者さんのブログでもこのアイコンが表示されてる、ということですよね。

それはちょっと面白く無いですよね…他の人と同じというのは

ってことで自分だけのお気に入りアイコンを作ります。

ファビコンに使う画像の作成

ファビコンのサイズは16px四方です。

とっても小さいんですよ。

その限られた四方の中に、いかに自分の色を出せるか。

いくつか作ってみたので公開します。

私の色ってどんなモンでしょうか?

kasab

………

buta

……

kabta

……

小さくて申し訳ございませんが、こんな感じ。

最初のが完全自作。ペイントで作成しました。

すごく、ダサいです…

下の2つはフリー素材をいじって16pxにしたのですが、

潰れてしまって何が何だかって感じになってます。

……難しいな……

あまり時間も掛けたくなかったので、こんなサービスを利用してみました!

ミニドット絵メーカー

16×16のドットの絵をウェブ上で作成してダウンロードできます。

早速作ってみました!

kabtfav

結構いい感じ?色味が欲しいかな。

kabtaakai

「おっ、差し色の赤がセンス良いねっ♪」って誰かが言ってくれそう。

どうせならエンドレスも入れたいな~

kasaen

わかります?カサブタの裏に「ENDLESS」って入ってるんです。

これはセンス良すぎ!って思って、ダウンロードしてみたら、

1410575468858

ファビコンサイズで見ると、ごちゃごちゃしてて超見難い(笑)醜い。

今回は2つ目の画像を選びます。

ダウンロードした画像は「.png」形式です。

ファビコンで使用するには専門の「.ico」という形式に変換する必要があります

ここでも便利なウェブサービスがあるので、そこを使わせてもらいます。

ファビコン favicon.icoを作ろう。

アイコン(icon)変換ツール – Favicon Converter

他にも色々とあるようですけど、私は一つ目のサイトを使ってみようと思います。

favtuku

まず、小画像(16×16)の「ファイルを選択」からファビコンにしたい画像を選びます。

選んだら下の「favicon.ico作成」をクリックします。

kekapurebu

変換が終了し、プレビューが表示されます。

ダウンロードは上の赤丸「ダウンロード」から。

これで、オリジナルの「favicon.ico」の作成は完了であります。

(追記:後日こんなサイトを見つけました。ここ使えば、紹介している方法より簡単にできると思います。ウェブ上で16×16のドット絵を作成して.ico形式でダウンロードできるサービスです。→Favicon Editor

次に自分のウェブサイトで表示されるようにします。

お気に入りアイコンが表示されるように設定する

左メニューの「メディア」→「新規追加」

faviapuro

作成した「.ico」ファイルをアップロードしてください。

アップロードできたら、「メディア」→「ライブラリ」よりアップロードした.icoファイルをクリック。

apurositayat

ファイルのURLが表示されているのでコピーしてください

メモ帳などにペーストしておいてもいいと思います。

urarukopi

次に「外観」→「テーマ編集」→右側の「ヘッダー(header.php)」を選択。

コードがずらっと並んででビビるかもしれませんが大丈夫です。安心してください。

最初のほうに<head>とあるのを探してください。

次に</head>を探してください。…ありましたか?

その<head>と</head>の間に次のコードを打ってください。

<link rel=”shortcut icon” href=”先ほどコピーした.icoファイルのURL” />

両端の<>は半角で入力してください!

kopisitayo

あとは「ファイルを更新」を押せば終了です。

ちゃんと表示されるでしょうか…

dekitayan

出来てますね!やったー!

お疲れ様でした~。

まとまらないまとめ

オリジナルのファビコンが表示されると、

「うぉー俺のサイトだぜぃ!」

と感激するし愛着が出ますね。

そういう気持ちがブログ更新への意欲になるかもしれませんし、人気ブログへの道に近づくかもしれません。

今回ファビコン作りましたけどホントのホントは満足いってません(笑)

できたらもうちょっと目立って、スタイリッシュな感じにしたいんだよな~。

あとファビコンが俗称だというのも知りませんでした。

てっきり正式名称だと思ってましたもん。

favicon=favorite icon

お気に入りアイコンだそうです。

というわけでオリジナルお気に入りアイコンの作成にお付き合いいただき誠にありがとうございました。

 

 - WordPress, 使い方

336adosensu

336adosensu

Message

メールアドレスが公開されることはありません。

  関連記事

By: Angie Garrett
[WordPress]記事の終わりにプロフィール・著者情報を自動挿入してくれるプラグインですって

スポンサーリンク [WordPress]記事の終わりにプロフィール・著者情報を自 …

By: Maria Keays
[WordPress]投稿日付と時間の表示を変更する。あと投稿者名を削除する方法(Hueman)

スポンサーリンク [WordPress]投稿日付と時間の表示を変更する。 あと投 …

By: Chris Potter
画面のキャプチャ後に編集まで出来ちゃう拡張機能(アドオン)が便利らしいゾ♪

スポンサーリンク クロームやインターネットエクスプローラー、ファイアフォックス等 …

108901r
KASABUTA-ENDLESS(かさぶたエンドレス)について

スポンサーリンク KASABUTA-ENDLESS運営者のプロフィール プロフィ …

By: jeffreyw
助けて!ワードプレスのビジュアル編集のレイアウトぐっちゃぐちゃ\(^o^)/

スポンサーリンク 助けて!ワードプレスのビジュアルモードでの編集で画像をいれると …

By: Waiting For The Word
WordPressインデックスされない!原因と理由は?

スポンサーリンク WordPressブログがインデックスされない原因と理由を調査 …

By: Linus Bohman
[WordPress]プロフィールをサイドバーに載せるプラグイン4つを試してみた

スポンサーリンク [WordPress]プロフィールをサイドバーに載せるプラグイ …

By: eyeliam
パーマリンクのカスタムURLは日本語の記事タイトル名じゃあかんのや!!

スポンサーリンク ワードプレスの記事をツイートボタンからツイートしてもらったとき …

By: loomingy1
[STINGER5]カテゴリーでの親子階層の段差を表示する方法

スポンサーリンク STINGER5カスタマイズ…カテゴリーの親子で階層表示の段差 …

By: Elliott Brown
[WordPress]フッターのトップへ戻るボタンの位置を変更する方法(Hueman)

スポンサーリンク [WordPress]フッターのトップへ戻るボタンの位置を変更 …