アフィーロード

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

*

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

    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

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

  関連記事

「SyntaxHighlighter Evolved」と「SH TinyMCE Button」を使ってコードをスマートに表示する

相変わらず四苦八苦しているのですが、今回はソースコードをどうやって綺麗にブログに …

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

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

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

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

STINGER5
STINGER5をWordPressのテーマに選んでみた

WordPressをインストールして、まずやるべきは記事を書くことではなく、ブロ …

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

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

ビジュアルエディタのレイアウトをブログと同じにする

記事を書いてはプレビュー、また書いてはプレビュー・・・・・ 少々几帳面なのか、文 …

Google ChromeでWPの管理画面が崩れた時の対処方法

みなさん普段、WordPressの作業をどのブラウザでしていますか? 私は、Fi …

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

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

WordPressをインストールした後やっておきたい事のまとめ

新しいサイトを作って、WordPressをインストールした後に毎回しておくべき事 …

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

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