今日の講義はライセンスフリーの無料素材(画像)から秒速でファビコン(Webサイトの正方形の小さなアイコン)を作成し、WordpressのHeader.phpにタグを挿入してファビコンを表示させます。
Wordpressプラグインを使用するよりも、この方法はより確実なもので、難しく見えるかもしれませんが、実はとても簡単で重要なWordpressの勉強になります。
しっかりとマスターして反復して刷り込むと良いでしょう。

無料素材からファビコンにする画像を選ぶ

pixabay.com
出典:pixabay.com
まず対象のWEBサイトやブログのロゴが既にある場合はそのロゴをファビコンのサイズ「16×16」ピクセルに縮小して使用すればよいでしょう。
しかし、ロゴが無い場合や16ピクセル四方という小さな面積でインパクトある表現をしたい場合などは、ライセンスフリーで商用利用可能な無料素材(画像)からファビコンを作成すると良いでしょう。
ライセンスフリーで商用利用可能、高品質な無料素材(画像)を扱うサイトとして、筆者が世界で最も優れているサイトだと思ってこのサイトの記事でもよく利用させてもらっているのがpixabay.comです。
82万点以上の有料級で高品質な画像がジャンルごとに分かれて選ぶことが出来、そのほとんどが商用利用可能なライセンスフリーです。
pixabay.com貴方のWEBサイトのジャンルやイメージにあった画像を選択したら、マウスを右クリックをして(画像URLをコピー)または(コピー)を選択します。


選んだ画像を画像処理ソフトで正方形にして縮小

pixlr
出典:pixlr.com
次に、WEB上でブラウザで無料で使用できる『Pixlr Express』でオープンURLをクリックしポップアップウィンドウに先程選んだ無料画像のURLをマウスを右クリックしてペースト(貼りつけ)ます。
次に画像を「Crop(クロップ)」して正方形にして、「Resize(リサイズ)」で16×16ピクセルもしくは、32×32ピクセルに縮小しましょう(50×50ピクセルなど正方形で小サイズであればOK)。
あとは色調補正やエフェクト、枠などを付けて、任意の名前で画像を保存します。(例:貴方のサイト名+favicon)
これでファビコンが完成です。


Wordpressのheader.phpにファビコンをタグで挿入

ファビコンをWordpressにアップロード
Wordpressで構築された対象のサイトの「ダッシュボード」⇒「メディア」⇒「新規追加」からファビコンの画像をアップロードし「タイトル」欄に「ファビコン」と記入し、画像URLをコピーします。
「ダッシュボード」⇒「外観」⇒「テーマの編集」⇒右側一覧の「テーマヘッダー(header.php)」をクリックします。
PCのメモ帳などを開いてファビコンを挿入する下記のタグをコピー&ペーストして、”アップロードしたファビコンの画像URL” 欄にたった今アップロードしてコピーしたファビコンの画像URLをペースト(貼り付け)します。

" type="image/vnd.microsoft.icon" />

そうして出来上がったファビコンを表示させる為のタグを、
「テーマヘッダー(header.php)」内の、タグから始まり、タグに終わる範囲内のいずれかの行に挿入すればOKです。 後々ファビコン画像のみ編集することなどもありますので、タグ直下か真上が良いでしょう。 これで「ファイルを更新」ボタンをクリックすればファビコンが瞬時に表示されています。 この方法は筆者の経験上、不安定で変更を即認識しないでいるWordpressの未発展な部分に影響されない最も確かな方法だと思います。プラグインよりも今日のやり方が一番有効です。

この記事を実演したものを動画で観る




☥IBORCを応援して下さい。