まずWEBクリップアイコンとは!?

WEBクリップアイコンとは、iPhone、iPad、などスマートフォンでホーム画面に追加した際に表示するアイコン(画像)になります。

例

設定前

設定後

WEBクリップアイコンの設定をすると右の画像のように自分で作成した画像がアイコンとして表示されるようになります。

設定をする前にアイコン画像の準備から!!

まずアイコンとなる画像を作成しましょう！！

画像サイズは下記のように違います。

iPhone	114×114(57×57)
iPod touch	114×114(57×57)
iPad	144×144(72×72)

アンドロイド(スマートフォン)は、機種によりアプリ画像の大きさが違います。

それぞれの画像サイズを揃えるのは、面倒じゃないですか！？

なので簡単に大きめの画像を作っておけば大丈夫です!!

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

ちなみにiPhoneのアプリ画像って角が丸くなっていますよね!?

右の画像のように正方形に画像を作っておけばiPhoneが勝手に角を丸くしてくれるみたいです!!

※画像は、PNG形式です。

※右の画像は、別のサイトのアイコンです。

WEBクリップアイコンの設定

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

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

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

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

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

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

画像のURLをコピーする

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

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

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

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

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

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

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

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

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

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

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

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

設定は以上です♪

設定が完了したら直ぐに反映されるのでご自身のスマートフォンでホーム画面に追加をして確認をしてみて下さい。

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

ファビコンとは!?

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

パソコンに表示させるアイコンになります♪パソコンの場合は、ホーム画面のアイコンとホームページを開いた際にURLの左側に表示されます!!

ちなみにホームページ作成でJIMDOを使われている方はご存じかもしれませんが簡単にファビコンを設定できるところがありますよね！？そこで設定すると画像が小さいしボケていませんか？

ヘッダーからすると画像も大きくボケにくくなります♪設定方法はファビコンの設定方法をご覧下さい!!

▶ファビコンの設定方法はこちら

JIMDOとは!?

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

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

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

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

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

アフィリエイトとは!?

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

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

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

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

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

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

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

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

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

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

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

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