アフィーロード

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

*

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

    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

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

  関連記事

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

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

アイキャッチ画像を記事の先頭に自動で表示させる簡単な方法!

記事の先頭に画像があると、見栄えが良さそうだなと思います。 しかし、アイキャッチ …

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

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

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

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

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

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

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

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

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

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

変更不可能なWordPressのログインIDを変えてセキュリティアップする方法

ログインIDなんてニックネームみたいなものだからと、適当に付けている人は多いので …

WordPressのログインIDがバレるのをEdit Author Slugで防ぐ

ヤバイよヤバイよ、何て仕様なんだあ。何がヤバイかと言うと、ログインIDがダダ漏れ …

AddQuicktagプラグインでタグ打ちをとことん手抜きしよう

TinyMCE Advancedで基本的な機能は揃える事が出来たのですが、他にも …