1. TOP
  2. スティンガー5のファビコンの作成や設定方法を解説!

スティンガー5のファビコンの作成や設定方法を解説!

ワードプレス この記事は約 3 分で読めます。

今回は、ファビコンの作成と設定方法について、
画像をたっぷり盛り込みながら解説していきます。

ファビコンを変えることで、
サイトの独自性はかなり上がりますし、
他とちょっと違う感を出せるんじゃないかと。


そもそもファビコンって、何?

それよりも何よりもとりあえず、
そもそもファビコンが何なのかわからない人も
恐らく多いんじゃないでしょうか。

 

ファビコンというのは、
サイト名の前に表示される小さいアイコンのことです。

 

ファイスブックだとこんな感じ。

2014-11-06_224418

グーグルだとこんな感じです。

2014-11-06_224436

ちなみにスティンガー5のデフォルトはこんな感じです。

2014-11-06_224542

 

サイトデザインなどにある程度気を遣っていても、
ここまでいじってる人ってそんなに多くないんですよね。

なので、いじってやりましょう。

 

ファビコン作成方法は2つ

①画像を変換する

Favicon Converterというサイトがあるので、
そこにアクセスします。



ファビコンにしたい画像を選んで、
「アイコン作成」をクリックするだけで、
簡単に作成することができます。

 

②自分で作る

私はこちらを選びました。

Favivon Editorというサイトがあり、
シンプルなものであれば簡単に作れます。

 

見ればわかるでしょうが(笑、
私のサイトのファビコンはこちら、

2014-11-06_225446

「第3の選択肢」の意味を込めて、
「3」をかたどったシンプルな作りにしました。

 

ちゃんと凝れば、もっと良いものになるかもしれませんが、
私はこれで結構満足しています。

サイトが表示される度に、何だか嬉しくなりますよ。

 

ファビコンの設定方法

まずはファビコンをアップロードするため、
「メディア」→「新規追加」をクリック。
設定方法は「外観」→「テーマ編集」をクリック。

2014-11-06_230541

対象のメディアをアップロードしたら「編集」をクリック。

2014-11-06_230806

そして「ファイルのURL」をコピーしてください。

2014-11-06_230845

次にスタイルシートを書き換えるので、
「外観」→「テーマ編集」をクリック。

※事前にバックアップはとっておきましょう!

 

2014-11-03_204424

そして「ヘッダー」をクリックします。
2014-11-06_231242

すると、下記のようなタグがあります。
<link rel=”shortcut icon” href=”<?php echo get_template_directory_uri(); ?>/images/logo.ico” />

Ctel+Fで「shortcut icon」と検索すると、
すぐに出てくると思います。

 

これを下記のように書き換えます。
<link rel=”shortcut icon” href=”先ほどコピーしたファイルのURL” />

そして「ファイルを更新」をクリックすれば設定完了。

 

自己満足の要素も強いですが(笑、
他サイトとの差別化には繋がると思います。

そんなに何時間もかかる作業ではないので、
面白そうだと思ったら是非ともやってみてください。

\ SNSでシェアしよう! /

LSCの注目記事を受け取ろう

この記事が気に入ったら
いいね!しよう

LSCの人気記事をお届けします。

  • 気に入ったらブックマーク! このエントリーをはてなブックマークに追加
  • フォローしよう!

関連記事

  • ユーチューブ動画が埋め込めない?ワードプレスの権限とユーザー設定

  • 【スティンガー5】トップのサイトタイトルを消す方法とリンク追加

  • ワードプレスで使わないテーマを消すための方法を画像付き解説

  • Browser Shotsの設定や導入方法を画像付解説!

  • freedigitalphotosの使い方を画像付きで解説

  • RSS Footerはどんなプラグイン?設定や導入方法を解説!