アフィーロード

アフィリエイトがあるじゃないか!

*

ブログのファビコンを変更しました

    2016/05/21

favicontop

ブログのファビコンをSTINGER5のまま放置していたので、そろそろ変えることにしました。このままだと、誰のブログか判別しにくので早めに変更しておきましょう。

favicon1

ファビコンとは、タブなどに表示されているwebサイトを象徴するアイコンの事です。ファビコンを見ただけでサイトの識別が付くので印象に残りやすく、ブックマークからクリックしてくれやすくなるのでオリジナルなものを設定した方が良いです。

ファビコンの変更をする

まず始めにファビコンの表示設定は、header.phpに設定されているので、子テーマのheader.phpを作って、親テーマのheader.phpを全てコピーします。

子テーマの作り方は、WordPressのテーマをカスタマイズするなら、まず子テーマを作ろう!を参考にしてください。

ファビコンを設定しているのは、header.php内にある下記のコードです。

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

 このコードから、親テーマのimagesフォルダ内にあるlogo.icoがファビコン画像という事が分かります。

logo.icoを新しい画像で上書きしても変更は可能ですが、テーマを変更した時にimageフォルダは上書きされるので、テーマとは別の画像フォルダに保存して利用します。

  1. 新たに作成したファビコン画像をメディアを追加でアップロードする。favicon1
  2. アップロードした画像のURLを下記の部分にコピペする。
    <link rel=”shortcut icon” href=”ここに画像のURLを記入する” />

favicon3

はい、オリジナルのファビコンに変わりました。

ファビコン画像を作成する

ファビコンの変更方法が分かったので、オリジナルのファビコンを作成できるサイトの紹介です。

ファビコン画像は基本16×16で、拡張子は.icoになります。

faviconist

 faviconist

絵心と時間があるなら、ドット絵でオシャレな画像を作成してもいいのですが、手っ取り早く作りたい場合は、こちらのfaviconistがオススメです。

文字のみのデザインですが、サイト名やハンドルネームの頭文字などを使って、様々なデザインのフォントで作成できます。背景もグラデーションをかけることができるのでシンプルながらおしゃれです。

※作成後は、画像の上で右クリックメニューから画像を保存してください。

Favicon Converter

faviconconverter

ツールで作成した画像などをファビコンにしたい場合は、こちらのFaviconConverterで変換できます。

free favicon

freefavicon

自作は面倒だ、という人にはフリーのアイコン素材を利用するのも手です。freefaviconには大量のファビコン素材があるので一度チェックして見てはどうでしょうか。

まとめ

今回は、取り合えずシンプルなデザインにしましたが、気が向いた時にでもオリジナル画像のファビコンを作成してみたいです。でもコロコロ変えるとユーザーが混乱するので変更のタイミングは迷いますね。

 - WordPress

Message

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

  関連記事

STINGER5の子テーマでCSSが上手く反映されない原因を解決!

子テーマを作ったので、取り合えず文字サイズでも変更してみようと思ったのですが、な …

リビジョンは便利機能だけど、溜まり続けるので何とかするプラグイン「Revision Control」と「Delete Revision Manager」

記事を書いていると、保存する前にうっかりページを移動したり、閉じてしまう事があり …

目次
「Table of Contents Plus」プラグインで目次を簡単に作成!

雑誌を読む時は、まず目次から見るという人は多いと思います。 目次を見ると、記事の …

WordPressで定番のメールフォーム用プラグイン「Contact Form 7」を導入する

ブログには、お問い合わせ用のメールフォームが必須ですよね。 記事の内容に関する問 …

Google Analytics by Yoastを使えばトラッキングコードを貼るのも簡単です!

解析ツールの定番Google Analytics(アナリティクス)を導入するとき …

挿入画像のデフォルト値を変更して無駄な手間を省こう

WordPressで画像を挿入する時の話しですが、気が付いたら毎度ブログに表示す …

TinyMCE Advancedを導入してブログ記事の作成を捗らせよう

ビジュアルエディタは楽で良いですね。 テキストエディタだと、コードとテキストがご …

ワードプレスのロゴ
エックスサーバーにWordPressをインストールする

サーバーを借りました、ドメインも取りました、次が何をするの? それは、WordP …

WordPressのテーマをカスタマイズするなら、まず子テーマを作ろう!

そろそろブログのデザインをどうにかしたいなと思うわけですが、どうやらいきなりテー …

Akismetでスパムコメントをフィルタリングする

我がブログ最初の訪問者はスパムサイト様でした(笑)どこから嗅ぎ付けるの分かりませ …