The following two tabs change content below.
小澤朋子
Web(ワードプレス)をもっと活かす方法や利用する方法をお伝えしています(^-^)/ Webの活用方法をもっと知って、発信し続ける人を応援します!

ホームページ(Wordpress)の設定って細かいことが多くて、よく忘れがちな@「ノマド」な主婦Toroです。(^-^)/

今回は、その設定の中でも、特に忘れやすい設定、いや、あったほうがオシャレじゃない?

っていう設定をお伝えします。

一昔前までは、ホームページ作ったよ!

っていわれて、そのサイトの内容やTOPページを見て。。

という流れで、サイトの目印となるアイコン表示が施されていない。

または、大手のみが設定されているイメージを持っていた方も多いかと思います。

シロクマ先生
ふふふ。
私がシンボルですよ。



ファビコンて何?

PC表示の場合、タブの左端に、そのサイトマーク(アイコン)が表示されていますよね?

ファビコン

Toroノマドの場合は、シロクマ先生が表示されています。

シロクマ先生
(`・ー・´)ドヤ!

 

FacebookやGメールなどは、付いていることは知られていますよね。

ネットサーフィンをされている人の中には、きっと、ブラウザ上には、たくさんタブが開いていますよね。

それでも、このファビコンが表示されていると、なんのサイトなのか判断しやすいですよね(^-^)/

しかし、これは勝手に付くものではありません。

WordPressのテーマには元々設定できるテーマと、そうでないテーマがあります。

確認してみてくださいね。

ということで、今やこのファビコンが、設置されていないサイトは、ほとんどないと思います。

後忘れがちなのが、スマホ対応です。

スマホだと、このファビコン。。表示されませんよね。。

スマホにもファビコンと同じように、サイトのアイコンを表示させる方法をお伝えします。

ウェブクリックアイコンとは?

この名前が浸透しているかどうかは別として。。

スマホの表示画面で、アイコンがたくさん並んでいると思います。

自分のお気に入りサイトのブックマーク選択表示の際のアイコン。

スマホ画面のショートカットアイコンの表示の際に押せるアイコンのことです。

スマホアイコン
シロクマ先生
ほらほら、いるでしょ?

 

スマホの画面にオリジナル画像設定をしていない場合、

そのサイトのTOPページの上部が表示されます。

スマホ対策

これでも、表示されればいいとお考えの方もいるかもしれませんね。。

でもやっぱり、自分のサイトだったらこだわりたい!あなたへ!

スマホ表示の際に、可愛いオリジナルアイコンにしましょう!

シロクマ先生
やっぱ、オリジナルでしょ!



テーマ内でファビコン&スマホ用のアイコン設置方法

既に、多くのテーマのカスタマイザーに常備されているんです。

ただ、場所がわかりにくく、これ??って感じの場所にあるので、

あえて、プラグインを使用してる方は、一度確認したほうがいいかもしれません。

ちなみに、Toroノマドは、バズ部さんテーマXeory-Extensionです。

管理画面⇒ カスタマイズ⇒ サイト基本情報

カスタマイザー

ここでは、ページヘッダ部の情報が基本です。

その下に。。知らないうちに、アイコン対策もあった!!

 

custam1

意外に、みなさん見逃してるかもです。

私もこの記事書いてるとき、発見して、ちょっと、ちょっと。。って

カスタマイザー

画像を選択したら、「保存して公開」です。

シロクマ先生
一度確認してみてね!

この設定が見つからない人は、下の方法からアイコンの設定をしてください。

スマホ対応!ウェブクリップアイコン設置方法

最近では、いろんなサイトがスマホから読まれていることが多くなっています。

中には、ほぼスマホからの流入というサイトも多いくらいです。

そのため、スマホでのブックマークやショートカットアイコンをオリジナルにする方法をお伝えします。

この方法、とっても簡単に設置ができるの初心者でもすぐに設置ができますよ!

ウェブクリップアイコン用の画像準備

最初に、スマホに表示されたい画像の準備をします。

正方形で(300×300)ピクセルの大きさにで作成します。

ウェブクリックアイコン

画像が用意できたら、簡単にアイコンを作成してくれるサイトがあります。

そこで茶々っと作っちゃいましょう!

アイコン作成ツールサイトはこちら>>

①先程作成した画像を選択します。

Iconifyをクリックすると、下記のようなたくさんの種類のアイコンが作成されます。

もちろん、ファビコン作成も含まれています。

iconifier.net

そしたら、画像ファイルを一括でダウンロードするため、ZIPと表示されている画像をクリックします。

ダウンロード

自分のPCにまとめて、ダウンロードします。

その画像の全てを、そのまま、Wordpress管理画面のメディアへアップロードするだけです。

メディアへアップ

 

シロクマ先生
これで、画像の準備はバッチリ!

テーマ内のheader.phpに追記

テーマ内のファイルに、header.phpというファイルがあります。

そのファイルに、先ほどのアイコン画像を作成したページの下部に表示されたソースをコピペするだけです。

アイコン表示ソース
このページのソース

[php]<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="57×57" href="/apple-touch-icon-57×57.png" />
<link rel="apple-touch-icon" sizes="72×72" href="/apple-touch-icon-72×72.png" />
<link rel="apple-touch-icon" sizes="76×76" href="/apple-touch-icon-76×76.png" />
<link rel="apple-touch-icon" sizes="114×114" href="/apple-touch-icon-114×114.png" />
<link rel="apple-touch-icon" sizes="120×120" href="/apple-touch-icon-120×120.png" />
<link rel="apple-touch-icon" sizes="144×144" href="/apple-touch-icon-144×144.png" />
<link rel="apple-touch-icon" sizes="152×152" href="/apple-touch-icon-152×152.png" />
<link rel="apple-touch-icon" sizes="180×180" href="/apple-touch-icon-180×180.png" />[/php]

ポイントとして、ソースの画像urlのリンク内の変更

例) href=”【この場所に画像のurl】/apple-touch-icon-180×180.png”

↓↓↓↓↓↓↓↓↓

メディア内の画像のurl = /
画像のurl = http://triz-web.com/toronomad/

オレンジ部を追記すればokです。
※アップロードした画像のは、メディア⇒画像⇒編集で、urlを確認してください。

このソースをheder.phpないの</head>より上に追加してください。

そのデータを、子テーマファイル内にアップロードします。
※子テーマを使用していない場合は、そのまま、上書きしてください。

>>子テーマの設定に関してはこちらから

>>ファイル転送(ファイルマネージャー)のアップロード方法はこちらから

スマホ対策!アイコン表示方法

header.phpがサーバー上へアップされたら、もう設置できるので、さっそくやってみよう!

若干タイムラグがあるので、30分くらいは、待ったほうがいいかもしれません。

スマホでそのページを表示させます。

スマホ表示

このボタンをクリックすると、ブックマークや、ホーム画面に追加できます。

ブックマーク

少し、右にスライドすると、「ホーム画面に追加」があるので、クリックします。

画面表示

右上の「追加」ボタンをクリックすれば完了です(^-^)/

シロクマ先生
みんなのスマホに居させてね!

 

まとめ

  • ファビコンとは、PC上でサイトの判別をするアイコンのこと。
    ※現在設定されていいないサイトは珍しい。。
  • ウェブクリップアイコンとは、スマホ上で、気に入ったサイトのショートカットアイコンのこと。
    ※最近では、対応しているWordpressテーマもあるくらい一般的になっている。

自分のサイトやブログサイトを持っている方は、一度チェックしてみてね!

もしかしたら、スマホ対応されていないかも、しれませんね。。

急いで、自分のサイトのウェブクリップアイコン設置してください。

オシャレ度や愛着度も格段にアップするはずです!

ウェブクリップアイコン設置方法

  1. 画像作成(300×300)px。
  2. アイコン作成ツールで茶々っと作成。
  3. WordPressのメディアへアイコン達のアップ。
  4. header.phpへソースの追加。
シロクマ先生
やっぱ、オリジナルアイコンでしょ!