B5 ファビコン設定方法

まずファビコンとは!?


ファビコンとはパソコンのデスクトップにホームページやブログを追加した際に表示されるアイコン画像です。

ファビコンを設定するとデスクトップに追加された方があなたのホームページを探しやすくなります♪

デスクトップ

アドレスバー

ファビコンの設定をすると上記2つの画像のように自分で作成した画像がアイコンとして表示されるようになります。

設定をする前にファビコン画像の準備から!!


通常ファビコンの表示サイズは 16px × 16px や 32px × 32px ですが、画質がとても悪くなります(>_<)

私も昔は 16px × 16px や 32px × 32px でしていましたがファビコン画像がモザイクが掛かっているような感じで見栄えがとても悪かったです。

そこで色々試していたらキレイに見えてパソコンのアイコンサイズに自動で対応するやり方を見つけました♪

それでは、まずファビコン画像を作ります!!

ここでポイント自動でサイズ対応してくれるならデカいファビコン画像を作っておけば大丈夫!!

横150㎜ 縦150㎜の画像を作成しました⇒

あり合わせの画像を使ったのでかなり大きめです!!

でもこんなに大きくても読み込んでくれます♪

※画像は、PNG形式です。

ファビコンの設定


ファビコン画像の準備ができたら、あとはホームページに設定するだけですね♪

設定方法は、かなり簡単です。

まずホームページ作成画面からファビコン画像を貼り付けて下さい。(ページは、どこでも構いません)

ホームページに画像を貼り付ける

ホームページに画像を貼り付けたら、画像のURLをコピーします!!

作成画面からはURLのコピーができないのでホームページを観覧する方からURLをコピーして下さい。(マウスで画像の上部から右クリックをすると下記の画像URLをコピーを選択して下さい)

画像のURLをコピーする

画像のURLをコピーをしたらメモか何かに貼り付けておいて下さい。

そして下記のタグをコピーしてメモか何かに貼り付たら画像URLのところに画像のURLを貼り付けしたら準備は完了です♪

タグ


<link rel="icon" type="image/png" href="画像URL" sizes="16x16" />

<link rel="icon" type="image/png" href="画像URL" sizes="32x32" />

<link rel="icon" type="image/png" href="画像URL" sizes="96x96" />


画像URLの文字は消して "" これの間に画像のURLを貼り付けて下さいね♪

【参考タグ】下記の用になります!!


<link rel="icon" type="image/png" href="http://u.jimdo.com/www59/o/sd2aa8ac392febebe/img/i79d0ae221020e3e4/1439645633/std/image.png" sizes="16x16" />

<link rel="icon" type="image/png" href="http://u.jimdo.com/www59/o/sd2aa8ac392febebe/img/i79d0ae221020e3e4/1439645633/std/image.png" sizes="32x32" />

<link rel="icon" type="image/png" href="http://u.jimdo.com/www59/o/sd2aa8ac392febebe/img/i79d0ae221020e3e4/1439645633/std/image.png" sizes="96x96" />


色は、分かりやすくオレンジ色にしているだけなので色はつけないで下さいね!!

では、画像のURLを貼り付けたタグが完成したら最後に完成したタグをhead(ヘッダー)に貼り付けるとパソコンでファビコン画像が表示されるようになります♪

ジムドゥーで画像説明します!!

右にある設定をクリックすると下記の設定画面が表示されますよね!?

設定画面が表示されたらヘッダー部分を編集をクリックして下さい!!

ヘッダー部分を編集をクリックすると下記の画面が表示されます!!

今回は、ホームページ全体にタグを設定します。

通常何も設定をしていなければ<head>の変更の下にあるタグは白紙のはずです!!

そこに完成したタグを貼り付けて保存をクリックすると設定は完了します♪

設定は以上です♪

設定が完了したら直ぐに反映されるのでご自身のパソコンでトップ画面に追加をして確認をしてみて下さい。

ちなみにページごとにファビコン画像を変えたい場合は、個別ページもしくはブログ記事をクリックしてページごとにファビコン画像を設定するとページ別でファビコン画像が変わりますよ♪

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


WEBクリップアイコンとはファビコンと似たようなモノです。

スマートフォンやiPadなどに表示させるアイコンになります♪

ウェブクリップアイコンの設定をしないと見えにくいサイト画面が画像としてホーム画面に登録されてしまいます(>_<)

ウェブクリップアイコンの設定方法の説明記事を書いているので興味があれば観覧して下さい(^o^)

ウェブクリップアイコンの設定方法の説明

JIMDOとは!?


WEBクリップアイコンの説明でよくでてくるJIMDOとはボッタ君が利用しているホームページを簡単に作成ができるサイトです♪

みなさんがご存じのKDDI!そこが提供しているホームページ作成サイトJIMDOのようです!!

JIMDO(ジムドゥー)の説明記事を書いているので興味があれば観覧して下さい(^^)/

簡単にホームページ作成ができるJIMDOの機能説明

ブログで稼ぐアフィリエイト

アフィリエイトとは!?


ブログやホームページなどでよく広告など目にしませんか!?

その広告がブロガーさんの収入源です♪

でも広告を貼りませんか!?って会社に営業かけるのは大変で難しいですよね!?

そこで簡単に広告の掲載ができるようにしてくれる会社さんがあります。

いわゆる会社とブロガーの仲介さんですね♪

詳しく説明記事を書いているので興味があれば観覧して下さい(^o^)

ブログで稼げるアフィリエイト説明

ちなみに右にあるのがアフィリエイト広告⇒

この広告をクリックすると私にお金が入る仕組みです(^_^;)イッシッシッシッシー

広告のサイズは色々あるのでとりあえずアフィリエイト説明からご覧下さい♪

登録方法なども掲載しています♪