WPサイトにも使える!アイコン作成方法まとめ

いつも「みなラボ」にアクセスいただいてありがとうございます!(´∀`*)ノシ

↑みなラボのページに「いいね!」はコチラから↑(>∀<)ノ☆ 


アイコンを作成してみました!
「Inkscape」というフリーの描画ソフトを使ってデザインした後、.png⇒.ico変換ソフトで拡張子を変換し、アップロードしました!

インターネットエクスプローラでの認識が上手くいかず、表示されたりされなかったりで、.icoファイルをhtmlのメインルート?に置いたら、なんとか表示されるようになりました。

インターネットエクスプローラで上手くいったと思ったら、今まで上手く表示されていたandroidスマホのブラウザを開いた時のアイコンが表示されなくなってしまいました。なかなかうまくいかないもんですね。。。

ブックマークやショートカットにした時のアイコンは問題なかったので、現状で使っております。

追記(2016.109):現在はスマホでもPCでも問題なく表示されています。あれから何も手は加えてないので、ネット上での認識を安定させる為にも少し時間をおいてみる事が重要かもしれません。

今回のアイコンの作り方をまとめて置いたので、どうぞご覧ください!

 

スポンサーリンク

1.ロゴチックで簡単なアイコンの作成方法(WordPressサイト編)

 

1-1.デザイン描画ソフトのダウンロード

デザインを描く為に、無料ソフトをダウンロードします。
ベクトル形式のデザインが描ける「Inkscape」を使います。

アドビーのイラストレーターより機能は少し劣るんでしょうけど、同じような機能を持っているソフトだったと思います。
あまり使いこんでないので、知識は中途半端です。。。

窓の杜でダウンロードしました!
「Inkscape」ダウンロード

 

1-2.「Inkscape」の使用方法

普通にインストールして、ソフトを起動してみましょう!
こんな画面がでてくると思います。
動画で簡単なデザイン方法をまとめましたので、下のサムネイル画像をクリックしてみて下さい。

フィルターを上手く使うと、もっと凝ったデザインができると思いますので、色々と試してアイコンのデザインを作成してみると面白いのではないかと思います。

 

1-3..icoファイルへの変換ソフトのダウンロード

-[IconSet]-ページより、「PNGtoICO」というソフトをダウンロードします。

「PNGtoICO」ダウンロード

操作方法は非常にシンプルです。
インストール不要で、.zipファイルを展開するとPNGtoICO.exeがあるので、実行。

pngtoico

このようなウインドウが開くので、.icoファイルに変換したい.pngファイルをドラッグ&ドロップするだけです。保存先を指定すれば、そこに.icoファイルに変換されて出力されます。

 

1-4.プラグインのインストールと設定

 
WordPressプラグインの「FaviconRotator」をインストールします。

※icon=Faviconと考えて良いと思います。

ダッシュボード>外観>Faviconとクリックすると、メディアを設定する画面になるので、
ブラウザ用(上側)とモバイル用(下側)に.icoや.png等の画像ファイルをドラッグ&ドロップすると設定できる。

favicon-rotator設定2

ここまでの方法で、WordPressにてFaviconを設定できるはずなんですが、自分の場合、インターネットエクスプローラではなぜか上手く表示されませんでした。

上手くいなかった場合は下の項目も実行してみて下さい。

 

1-5.ルートにファイルを置く

先ほどのデザインしたファビコンファイルを.icoファイルに変換したものをhtml.phpと同じ階層に置いておくと、インターネットエクスプローラでも認識してくれるようなので、そこに置いてみましょう!

この時、ファイル名を「favicon.ico」に変更して、置いておくようにして下さい。

FTPソフトで、サーバーにアクセスし、ドメイン/public_html内に「html.php」があると思いますので、そこに「favicon.ico」をアップロードしてみて下さい。

index.phpと同じ階層2

以上の内容でも上手くいかない場合は、インターネットエクスプローラのキャッシュが影響している場合もあるので、下の項目も実行してみて下さい。

 

1-6.キャッシュを削除して、再度読み込む

まず初めに、対象サイトをブックマークに登録している場合は、ブックマークを削除する。

そして、インターネットエクスプローラの右上歯車マークをクリック。

ie1s

 

プルダウンメニューが開くので、「インターネットオプション」をクリック。

ie2s

 

全般>閲覧の履歴にある「削除」ボタンをクリック。

ie3s

 

「お気に入りWebサイトデータを保持する」チェックを外す。

「インターネット一時ファイルおよびWebサイトのファイル」チェックを入れる。

「クッキーとWebサイトデータ」チェックを入れる。

「履歴」チェックを入れる。

その他項目は、任意で設定する。

ie4s

チェックボックスの設定をした後、「削除」ボタンをクリックすれば、インターネットエクスプローラのキャッシュをクリアできます。

この状態で、再度対象サイトを表示させ、ブックマーク登録すれば、最新の状態に更新できます。

=おしまい=

 
↓ランキング参加してます!よろしければ、クリックで応援して下さいっ!
ブログランキング・にほんブログ村へ
にほんブログ村

 
↓こちらもお願いしますっ!

人気ブログランキングへ

 

スポンサーリンク

この記事を読んでいる人はこちらの記事も読んでいます。(※広告も含む。)

 

 

最後までお読みいただいて、ありがとうございます。

もしこの記事を気に入っていただけたなら、SNSで共有していただけると、とても嬉しいです!どうぞ、よろしくお願いいたします!m(_ _)m

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterで『みなラボ』をフォローしよう!

Feedly、RSS、Push7はこちら!!

follow us in feedly

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です