FC2ブログ

FaviconとApple-touch-icon設置 その2

コンニチハです
(東京から…)

FaviconとApple-touch-icon設置
その2です

設置は
ざっくりいうと
1…アイコンにしたい画像を用意
2…作成したアイコンを
  アイコン用拡張子に変換する
3…変換したアイコンを
  アップロードする
4…ブログのHTMLに追加書き込み

懇切丁寧解説開始!
まず
1…アイコンにしたい画像を用意

  写真でも手作りでもOK
  1つだけの作成でOK
  サイズは250×250ピクセル位
  ファイル形式はpngかjpgで保存
  kikiは写真をMSペイントで加工
  サイズは270×270ピクセル
  pngで保存

  kikiの画像
ちっぷ2顔だけ270

2…作成したアイコンを
  アイコン用拡張子に変換する

  
  自分で拡張子を変換せずに
  オンラインで変換してもらいます
  無料です

  変換してくれるサイト
「iconifier.net]
上記クリックでリンクします

サイトの画面
201504262301422c2.jpg

右にある歯車をクリック
サイズにチェックが入っているか確認
16×16
57×57
72×72
76×76
114×114
120×120
140×140
152×152
8種類のサイズとFaviconです

「ファイル選択」クリック
作った画像を選択します
(メール添付ファイルの要領です)

「Iconify」クリック

画像作成画面
201504262301453e4.jpg

8種類のアイコンとファビコンが作成されます
(気に入らなければ画像を作り直して
 再度同じ手順を繰り返す)

作成された画像中の「Zip」をクリック
まとめてダウンロードされます

作成された画像の下あたりに
コードが表示されています(これ大事)
どこかへコピペしておきます
あとで使うので
コピペはメモでもワードでもいいです
kikiはワードにコピペ!

↓↓これ大事!!
コードは9個あります
2015042800150423e.jpg

ダウンロードされたものを開くと
10個のファイルがあります
20150428001903f2b.jpg

10個のファイルを扱いやすい所へ
移動しましょう
(フォルダのままだとあとで扱いにくい)
kikiは10個のファイルを
ドロップボックスに入れました

3…変換したアイコンをアップロード
「iconifier-readme.txt」以外の9個のファイルを
アップロードします
方法は
ブログ管理画面から
いつも写真をアップする時と同じ要領です

9個の画像をアップロード
20150427215342e07.jpg

ブログの写真をアップするところに
自分で作製したアイコン画像が
ずら~と並んでいます
Favicon用だけは画像じゃなく「表示」と出ます

アップロードしたら
ファイルのある場所をコピペしておきます
ファイル情報の4段目の
「http://blog-imags-…」の部分です
↓↓これ大事!!
9個の画像のhttpをコピペしておきます
kikiはワードにコピペ!

↓↓これ大事!!
コピペしたものは?
✿アイコン作成画面から
 先ほどコピペした9個のコード
✿画像をアップロードしたあとに
 ファイル場所を9個コピペしたもの


4…ブログのHTMLに追加書き込み

これは…

(明日で完成します)
明日に続く…


アニメねずみ
↓↓ポチッと応援してね。


コメント

Secret

メッセージ
プロフィール

kikilalacafe

管理人:kikilalacafe
身近に見たもの
食べたもの
感じたものを
気の向くままに…
iPhoneで撮影して
アップしています
やっと機種変して
iPhone Xs Max 使用しています。

ブロとも申請フォーム

この人とブロともになる

最新記事
カテゴリ
月別アーカイブ
リンク
最新コメント
検索フォーム
全記事表示リンク

全ての記事を表示する