アフィーロード

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

*

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

    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のログインIDを変えてセキュリティアップする方法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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