【マナブログminimal】ファビコンの設定方法【お気に入り・ブクマでの表示画像】 | MUKKUN QUEST
MUKKUN QUEST     

【マナブログminimal】ファビコンの設定方法【お気に入り・ブクマでの表示画像】

minimal

こんにちは!初心者ブロガーの味方むっくんです

マナブログのマナブさんが作成したWordPressテーマMinimalを使用しています。

今回は、ファビコン(Favicon)の設定を説明します!
ファビコンとは、現在開いていただいているこのページ、一番上のタブを見て下さい。拡大するとこのように画像が表示されています。

この赤矢印で示した部分がファビコンです。また、下記の画像をご覧ください

これは、ブックマークの画像ですが、このブックマークやお気に入りで表示される時の画像。これがファビコン(Favicon)です。
つまり、ブログの顔ですね。初期設定だと、いかにもダサいので、しっかり設定しましょう!

スポンサードサーチ

ファビコン(お気に入り・ブックマークで表示される画像)の設定方法

マナブログのマナブさん作成のWordPressテーマMinimalは、自分でCSSをイジることでブログを自分で育てている実感を感じる事ができる素晴らしいテーマです。

初心者にとっては少々敷居が高いような気がしてしまいますが
ファビコン(Favicon)の設定自体はかなり簡単なので、一緒にやっていきましょう!

まずはファビコン(Favicon)に設定する画像を決める

ファビコン(Favicon)に設定する画像は自分で用意をお願いします。
最近では、Twitterでアイコンを無料で描いてくれる人も増えてきたので、Twitterの育成も兼ねてそのあたりを訪ねてみるのが吉かと!

画像をico形式に変換する

これが、ややこしいのですが、ファビコン(Favicon)に設定する画像の形式はico形式である必要があります。簡単にやり方を説明します。

まずは専用サイトへ

コチラをクリックして、まずは専用のサイトに飛んでください。すると画面はこのような状態になるので、画像の赤矢印の部分をクリックして下さい。
すると、画像を選択する画面が表示されるので、そこに先ほど決めて頂いた画像を選択して下さい。

すると、下の赤枠のように自分の選択した画像が表示されますので、赤矢印のボタンをクリックして下さい。これで画像のico形式化は完了です。

ファビコン(Favicon)の画像をMinimalに導入する

ファビコン(Favicon)画像を決めたら、Minimalにそれを導入します。

画像の通りですが、Minimalにログインした画面から、赤矢印の部分をクリックすると、画面が【メディアライブラリ】というタイトルの内容に変わります。この画面に、デスクトップから画像をドラックするだけでOKです。

例えば、上の画像の一番左上にあるGoogleと書かれた画像をクリックすると、下のような画面に変わるので、URL(黄色の矢印で示した部分)をコピーしましょう!

※こんな画像をファビコン(Favicon)に選ぶ方はいないと思いますが、ほんの一例なので気にしないで下さい。

テーマヘッダー(header.php)の変更

それでは、マナブログのマナブさんが作成したWordPressテーマMinimalの醍醐味である、CSSの変更を説明していきます!

まずは任意の画面を開いてもらいます。
下の画像の通りですが、赤枠➀「外観」→赤枠②「テーマエディター」→赤枠③「テーマヘッダー(header.php)の順です。

CSS変更箇所

テーマヘッダー(header.php)を1度もイジったことの無い方は41行目が下記のようになっています。

<link rel=”shortcut icon” href=”<?php echo get_template_directory_uri(); ?>/images/favicon.ico”>

この部分を下の英文に変えてください。

<link rel=”shortcut icon” href=”ファビコン画像のURL“>

画像のURLを入れる

それでは、変更した英文の中の赤文字部分に、さきほどコピーしたファビコン画像のURLを入れてください(赤文字の日本語は消します)
これで設定完了です!更新ボタンを忘れずに押しましょう!

以上で、マナブログのマナブさん作成のWordPressテーマMinimalで、任意のファビコンを設定する方法の説明を終わります!

どうでしたか?他のサイトを経由する部分もあったので、やや難しかったでしょうか?しかし、ファビコンを設定したことで、また1つランクアップしました!どんどんMinimalをあなた色に染めていきましょう♪