WordPress STINGER7

STINGER7/Plus:ブラウザのブックマークやタブに独自アイコンをキレイに表示する方法

eye_stinger7

今回はメールでご質問頂いた内容をカスタマイズしていきたいと思います。

色んなホームページとか見てるとタブのところにオリジナルのアイコンが表示されているサイトをよく見かけると思います。

20160302

この部分ですね↑
ちなみにこのブログもまだ初期状態なので通常のノート?のようなマークになっています。

このままでも別に困ることは無いんですが、設定してるとサイトの「ちゃんとしてる感」だったり、「ブックマーク一覧から見付けやすい」というメリットがあります。

といことで早速STINGER7でも導入していきましょう!
STINGER7以外の方、WordPressじゃない方でも設定するための方法もご紹介します!

【追記:2016.9.12】
※一部内容を修正しました。
この記事の内容はSTINGER Plusでもそのまま使えます。

オリジナルのファビコンを作ろう!

ブックマークやタブに表示されるオリジナルのアイコンは「favorite icon」というもので、略して「favicon(ファビコン)」と呼ばれています。
ますはオリジナルのファビコンを作りましょう!

ファビコンのサイズは?

2016年現在の一般的なファビコンサイズは以下の2つです。

16×16ピクセル・・・通常のブックマーク、タブ、アドレスバーなど
32×32ピクセル・・・高解像度ディスプレイ用、ショートカットアイコンなど

他にも用途によって色々サイズがあるんですが、あまり使用頻度がないのでこの2つのサイズで作成しておけば大丈夫です!
保存形式は「png」で用意しましょう。
当ブログではサイト名の頭文字でこのように背景を透過にして作成しました↓

icon32

icon16

16×16だとかなり小さくて複雑な柄はつぶれて分かりにくくなってしまうので、多くのサイトでは頭文字だけとか、簡単なマークとかを使用していますね。

.icoに変換しよう!

画像が用意できたら次はファビコン用のデータに変換します。
ファビコン用には複数の画像サイズを格納できる「.ico」という形式のデータを使います。

僕がいつも利用しているのはこちらのサイトです↓

半透過マルチアイコン作成。
半透過マルチアイコン作成。無料で半透明マルチアイコンやファビコン(favicon.ico)が作れます。ギザギザの無い美しい影を持ったアイコンが作成できます。

まず左側の「画像ファイル1を選択」というところをクリックして画像を指定します。

20160302b

こんな感じで2つ選択しました。
そして「アイコン作成 → アイコンダウンロード」と押すと「favicon.ico」が保存されます。

これでファビコン用のファイルができました!
簡単ですね♪

ファビコンを設置しよう!

STINGER7のファビコン設置方法

では作ったファビコンを設置しましょう!
STINGER7(Plus)は管理画面から簡単にファビコンを設置できるようになっています。

管理画面のメニューから「STINGER管理」を開いて「アイコン・ファビコン設定」を探してください。

20160302c

「メディア → 新規追加」で先ほどの「favicon.ico」をアップロードしてから選択し、右側に表示される「URL」をコピーして、「ファビコン画像のURL」のところに貼り付けします。

貼り付けたら一番下の「SAVE」を忘れずに押しましょう。
そうすると、

20160302d

出た−!

すぐに表示されない時は古いキャッシュが溜まってたりするのでページを更新したりすると表示されると思います。

STINGER7(WordPress)以外の設置方法

STINGER7以外のテーマをお使いの場合は以下を参考にしてください。

方法1.ルートディレクトリにファイルを置く

「favicon.ico」をルートディレクトリに置くだけで勝手にブラウザは読み込んでくれます。
FTPソフトなどでアップロードしてください。

WordPressならWordPress本体を格納しているフォルダ(wp-◯◯◯.phpというファイルがたくさんある場所)の中に入れましょう。
https://web-ashibi.net//wp/favicon.ico って感じですね。

WordPressじゃないサイトの場合はトップページ(index.htmlなど)のファイルと同じフォルダです。

方法2.link要素のコードを記載する

favicon.ico 以外の名前にしたい時や格納フォルダを変えたい場合などは、以下のlink要素を<head>~</head>内に記述することでファビコンを表示することができます。
WordPressなら「 header.php 」を編集しましょう。

「ファイルまでのパス」のところに「 images/favicon.ico」などファイルまでのパスを記述します。これで設置完了です!

ファビコンのついでに設定したい「Webクリップアイコン」についても記事を書いたので良かったらどうぞ↓

STINGER7/Plus:apple-touch-icon(Webクリップアイコン)を設置する方法
前回の記事ではfavicon(ファビコン)を設置する方法をご紹介しましたが、今回はそれと一緒に設定しておきたいWebクリップアイコンの設定方法をご紹介します!

【追記:2016.3.24】
STINGER7のカスタマイズ記事をまとめました↓

STINGER7:カスタマイズまとめ
このブログでも使用させて頂いているWordPressテーマ「STINGER7」のカスタマイズ記事をまとめました。

コメント