#119 WordPress Simplicity でファビコンを設定する方法【Mac版】

「ファビコン」ってなに?

相変わらず Simplicity をカスタマイズしています。今回は、ファビコンを設定しました。

 

『そもそも、ファコンってなに?』という人は多いでしょう。初心者の大半が「ファコン?ファミリーコンピューター?」と勘違いするでしょう。僕もその口です(笑)

 

Wikipediaで調べてみると、

favicon(ファビコン)は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したものである。

Wikipediaより引用

とありました。

 

簡単にいうと、ブックマークした時に左側に出る小さな記号のことです。IEだとホームページを開いた時に、名前の横にも出ます。

 

 

例によって、迷宮に迷い込んだ(笑)ので、備忘録も兼ね、記事にしました。

 

 

画像はどうする?

ファビコンを設定するには画像が必要です。手段は2つあります。

① 自分で作る
② お金を出して他の人に作ってもらう。

 

僕は絵心がない(猫を描いた時に「怪獣?」と言われたことあり)ので、今回は [coconala(ココナラ)] さんにお世話になりました。イラストを有料で頼むことができるサイトです。

 

 

 

 

たくさんいる絵師さんの中で、イメージが合いそうな [にゃろねこ] さんに作ってもらいました。
対応が非常に早く、次の日にはファビコンが完成していました。出来上がったのはこれです。

「やっぱり服が好き3」というタイトルのブログなので、「や」をモチーフにして作ってもらいました。なかなか可愛いものが出来上がったと思います。値段は1,080円でした。

 

 

ちなみに、「① 自分で作る」をやってみたい人は、検索すると色々出てきます。 [A1 Style] さんが秀逸だと思います。

[Favicon & App Icon Generator] という、ドットを指定し、ファビコンを作るサイトもあるみたいです。

 

 

ファビコンを設定する【Mac版】

受け取ったファイルを解凍したら「.ico」という見慣れない形式に変換されました。これをWordpressに保存しようと思ったら読み込まれませんでした(涙目)

 

何が起こったかわからず、さまよっていると、「IE は ico、safariは png/gif 形式にしないといけない」という文言を見つけました。

 

細かいことはよく分かりませんが、Mac版のWordpressでは ico形式のファイルは読み込めないようです。

 

pngに変換するコンバーターに頼ろうとも思いましたが、「コンバーターをダウンロードしたら、ウィルスに感染した」という記述も見つけてしまったので、PCだけで対処することにしました。

 

試行錯誤すること30分、以下の方法で無事に変換されました。

 

ico → png 変換方法【Mac版】

① ico形式のファイルを開く

 

② [ファイル] → [書き出す] をクリック

 

③ PNGで保存する

 

 

 

WordPress の Simplicity にファビコンを登録する方法はいくつかあります。今回は初心者でも気楽にできる方法を2つお伝えします。

 

WordPressの機能を使って登録する方法

[カスタマイズ] → [サイト基本情報] で サイトアイコン を登録できます。

 

 

Simplicityの機能を使って登録する方法

[カスタマイズ] → [その他] でファビコンを設定できます。


 

 

注意点

先に紹介した [Wordpress の機能を使って登録する方法] で画像を登録すると、ファビコンだけでなく、iphone のホーム画面に登録されるアプリアイコンの画像も同時に設定されます。

 

その時に、画像の背景が透過されているとその部分が黒くなります。このような場合は、透過されているところに色をつけるか、背景に図柄を置くと良いでしょう。僕は Photoshop elements で色をつけました。

 

 

 

なお、Favicon checker なるものがあり、ここで、どのように表示されるかを確認できるようです。

検索したらこのようになりました。便利なものがあるのですね。

 

 

なお、変更しても反映されない場合は、「再起動」「閲覧履歴の削除」などが必要だそうです。前に見たデータが残っていて、それが影響するとのこと。

 

関連記事

  1. #1 WordPress始めました

    Wordpressまでの道のり一番最初は、アメーバブログで「やっぱり服が好き」というブログをやっ…

  2. #98 WordPress simplicity のコメント欄を…

    コメント欄にメールアドレスは必要なのか?ブログを読んでいて分からない箇所があるとき、たまにで…

  3. #99 function.phpをいじったら画面が真っ白になった…

    function.phpをいじるときは気をつけよう!トップ画面をワンカラム(サイドの広告などを取…

  4. #97 バイラルシェアボタンを変更しました

    ブログをもっと華やかに今回は、「バイラルシェアボタン」の変更をしたお話です。「バイラルシ…

  5. #140 WordPressの有料テーマ VIEW を購入しまし…

    有名ブロガーの「ごりゅご」さんの『WordPressでブログを作る時に有料テンプレートをオススメする…

  6. #101 Simplicity2 をダウンロードする際に注意する…

    大変だった Simplicity1 → 2 のダウンロード公式のブログでは以下のように書かれてい…

  7. #96 WordPressでカテゴリーの順番を変えたい時はこれが…

    Category Order and Taxonomy Terms Order がうまく機能しない時…

  8. #142 エックスサーバーで複数のブログを運営するには?

    彼女が、突然「私もブログやりたい」と言い出しました。どうやら、本棚にあった、この本を読んだようで…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

プロフィール

銀座近郊に住む、洋服好きな男性の日常を書いた雑記ブログです。

 

体験したことを丁寧に書くように心がけています。

 

『新し物好き』なので、流行りのイベントに関する記事が多く出現します。

 

拙いブログですが、誰かの役に立てば幸いです。

 

ペンネームは「アイスクリーム」です。

 

イラストはあくまでイメージです (笑)

美味しい野菜が食べたくて

記事書きました → こちらからどうぞ



 
 
 

洋麺屋五右衛門パスタを買ってみた

抜群に美味しかったです → 記事はこちらからどうぞ



 

 

人気ブログランキング

ご覧いただきありがとうございました。 このブログはブログランキングに参加しています。ポチッと押していただけると、励みになります。
PAGE TOP