WordPress

WordPressサイト・ブログにも使える!フリーソフトのみでアイコン作成する方法まとめ

★累計PV数:2,027views アクセス頂いてありがとうございます! (*ᴗˬᴗ)⁾⁾ 
 
 
いつも「みなラボ」にアクセスいただいてありがとうございます!(´∀`*)ノシ
▼「みなラボ」は「ブログランキング」と「ブログ村」の2つのランキングに参加しています!クリックで応援していただけると、もの凄く励みになります!↓(∩´∀`)∩ ※右クリック(または、長押し)「新しいタブで開く」が非常に便利です♪
 

 
ブログランキング・にほんブログ村へ

※↑それぞれクリックで「みなラボ」へ1票応援&「みなラボ」のランキング状況をご確認いただけます! 


 

WordPressサイト・ブログにも使える!フリーソフトのみでアイコン作成する方法まとめ

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

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

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

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

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

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

 

1.フリーデザイン描画ソフト「Inkscape」のダウンロード

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

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

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

 

2.「Inkscape」の使用方法

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

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

 

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

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

「PNGtoICO」ダウンロード

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

pngtoico

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

 

4.WordPressプラグイン「FaviconRotator」のインストールと設定

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

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

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

favicon-rotator設定2

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

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

 

5.サーバーの『ルートに』ファイルを置く

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

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

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

index.phpと同じ階層2

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

 

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

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

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

ie1s

 

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

ie2s

 

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

ie3s

 

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

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

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

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

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

ie4s

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

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

=おしまい=

 

おすすめのレンタルサーバー

 
『XSERVER』

みなラボもこの『XSERVER』を使っています!^^
プランによっては最安月額900円(税別)で、200GBのサーバー容量を確保できます!

継続更新は、クレジット引き落としで自動更新出来て楽チン!

サーバーデータは、7世代に遡ってバックアップしてくれているので、もしもの時にも安心!

サーバーをコントロールするの為のインタフェースとなる「サ-バーパネル」の操作性も抜群!

サーバーデータの復元も、過去7日以内ならば、「サ-バーパネル」から簡単に操作可能!

もちろん、サーバーとしての基本となる処理速度、安定性も申し分ないと思います♪

 


 

ランキング

 
↓ランキング参加してます!よろしければ、クリックで応援して下さいっ!

にほんブログ村

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

人気ブログランキングへ
 

『WordPressブログの作り方』※初心者必見!(>∀<)ノ☆
 
①どんなブログにするのか考える。
 
 ⇒さあ始めよう!なせば成る「0から始めるwordpressサイトづくり」
 
②レンタルサーバーを借りる。
 
③ドメインを取得する。
 
④ネームサーバーDNS設定をする。
 
 ⇒ムームードメインで取得した独自ドメインをエックスサーバーで使う設定方法
 
⑤WordPressをインストールする。
 
 ⇒エックスサーバーへワードプレスを簡単にインストールする方法
 
⑥テーマをインストールする。
 
 ⇒僕が「AFFINGER5」を激推しする「3つの理由」
 
 ⇒【かんたん解説】AFFINGER5(アフィンガー5)テーマを購入する方法&手順
 
 ⇒「AFFINGER5」をWordPressへインストールする手順
 
⑦アイコン、ヘッダーなどを作る。
 
 ⇒フリーソフトのみでアイコン作成する方法まとめ
 
 ⇒WPサイト用オリジナルヘッダーデザイン作ってみた
 
⑧お好みにサイトデザインする。
 
⑨サーチコンソール、アナリティクスへ登録する。
 
⑩アドセンスや各アフィリエイトへ登録する。
 
⑪記事を書く。
 
⑫試行錯誤しながら、ブログ運営を続けていけば、徐々に収益を上げることができると思います!(>∀<)ノ☆
 
 
こちらの記事もオススメ!(>∀<)ノ☆
 
楽天市場のお買い物でもらえるポイント(ポイントアップ含む)と同時に、さらなる上乗せポイントを確実にゲットできる方法(※現金への換金も可)
 
【エントリー忘れで損してるかも!?】楽天市場お買い物マラソン&楽天市場スーパーセールのお得なポイントアップキャンペーン、クーポン、SPUなど、おすすめエントリー11選一覧まとめ
 
僕が「AFFINGER5」を激推しする「3つの理由」~WordPressブログ収益化への近道のために~
 
たぶん新型コロナウイルスに感染したであろう僕が完治するまでの症状を記録した闘病日記
 
Androidスマホで楽天モバイルの申し込みができない時の解決方法
 
【7/1までに申し込み完了で1回線目は1GBまで無料!(10月末まで)】急げ!楽天モバイルが最大25,000ポイント還元キャンペーン実施中!【祝300万回線達成】
 
『2022年更新版』Windows11も可! Movie Maker「ムービーメーカー」をダウンロードする方法
 
嫁の遺伝子検査結果をコソッと紹介(笑)GeneLife(ジーンライフ)の肥満遺伝子検査DIET(ダイエット)を試してみた結果。。。
 
【2022年版】(6/17更新)メルカリ匿名配送「らくらくメルカリ便」「ゆうゆうメルカリ便」の使い方、送料・サイズ・重量一覧&出品手数料について
 
 

こちらの記事もよく読まれています。↓(※広告含む)

 

 

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

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

▼「LINEいいね」ボタンを押して、この記事をタイムラインでシェアして頂けると、非常に喜びます!(∩´∀`)∩
 

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

最新情報をお届けします

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

▼「Feedly」、「RSS」、「Push7」での購読はこちらから設定して頂けます!
 
follow us in feedly
 
 
▼「みなラボ公式LINE」の友だち追加はこちらからお願いいたします!
新規記事更新時に「お知らせ」させて頂きます!
 

-WordPress
-,

© 2024 みなラボ