Warning: Constant POST_PLUGIN_LIBRARY already defined in /home/pasora/pasona-sp.com/public_html/wp-content/plugins/similar-posts/similar-posts.php on line 27
WordPressで簡単設定ファビコン(favicon)の作り方 | 思いだし にっき
サイトアイコン 思いだし にっき

WordPressで簡単設定ファビコン(favicon)の作り方

<p><img class&equals;"aligncenter size-full wp-image-10873" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;10&sol;fav0-1&period;png" alt&equals;"" width&equals;"374" height&equals;"61" &sol;><&sol;p>&NewLine;<p style&equals;"text-align&colon; left&semi;">ネットをみていると開いたサイトのタブには名前の頭にアイコンがありますね。<br &sol;>&NewLine;これは自分でも作れるのだろうか?と調べてみました。<&sol;p>&NewLine;<p>&NewLine;<&excl;--more--><&sol;p>&NewLine;<h2>サイトのシンボルマーク・ファビコン<&sol;h2>&NewLine;<p><strong>favicon(ファビコン)<&sol;strong>というんですね<&sol;p>&NewLine;<blockquote>&NewLine;<p><strong>favicon<&sol;strong>(ファビコン)は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したものである。<&sol;p>&NewLine;<&sol;blockquote>&NewLine;<p>とあります。<&sol;p>&NewLine;<p><img class&equals;"alignnone wp-image-935 size-full" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;10&sol;f&lowbar;10&period;png" alt&equals;"いろいろなファビコン" width&equals;"774" height&equals;"51" &sol;><&sol;p>&NewLine;<p>簡単に言えばサイトのシンボルマークのようなものですね。(^^)<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>有名なところでは<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-947" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;10&sol;fa12&period;png" alt&equals;"おなじみファビコン" width&equals;"155" height&equals;"161" &sol;><&sol;p>&NewLine;<p>上のようなものがあります。<&sol;p>&NewLine;<p>自分のブログのファビコンも作りたいと思い立ち、作り方をいろいろ調べてみましたが・・・<&sol;p>&NewLine;<p>画像を用意する。<br &sol;>&NewLine;16ピクセル×16ピクセルと32ピクセル×32ピクセル。<&sol;p>&NewLine;<p>拡張子はpngでweb上で簡単にiconに変換できるサイトがあるので、そこで画像を変換。<&sol;p>&NewLine;<p>そして、それをサーバーのルートディレクトリにアップロードして・・<&sol;p>&NewLine;<p>それからソースに書き加える方法やプラグインを使う方法と・・。<&sol;p>&NewLine;<p>丁寧な説明のサイトがたくさんありました。<&sol;p>&NewLine;<p>早速画像を用意してiconに変換してサーバーのルートディレクトリにアップして・・・・<&sol;p>&NewLine;<p><span style&equals;"font-size&colon; 14pt&semi;">(TT;できません。<br &sol;>&NewLine;<&sol;span>表示されたのはStinger3のファビコン。<&sol;p>&NewLine;<p><span style&equals;"font-size&colon; 14pt&semi;">なんで??<&sol;span><&sol;p>&NewLine;<p>ここでまた躓いてやり直し。<&sol;p>&NewLine;<p>一つでは不安というか、もっとほかのやり方があるかも・・・と<&sol;p>&NewLine;<p>いくつものサイトを参考に、これはという方法で実践した結果です。<&sol;p>&NewLine;<p><span style&equals;"font-size&colon; 12pt&semi;">ここであきらめるわけにはいきません!<&sol;span><&sol;p>&NewLine;<p> <br &sol;>&NewLine;でも、うまくいかなかったことが幸いしました(^o^)ころんでもただ起きないという(^^;<&sol;p>&NewLine;<p>もっともっとも~~っと<strong><span style&equals;"font-size&colon; 14pt&semi;">簡単な方法<&sol;span><&sol;strong>をみつけました(笑)<&sol;p>&NewLine;<p>なんと<span style&equals;"font-size&colon; 12pt&semi;"><strong>WordPressの最近のバージョンでは、いとも簡単にファビコンができるのです<&sol;strong><&sol;span>!<&sol;p>&NewLine;<p>現在使っているバージョンはWordPress4&period;6&period;1<&sol;p>&NewLine;<p>WordPress ã® 4&period;3 からは、<strong>ファビコン(<&sol;strong><strong>favicon<&sol;strong><strong>)が簡単に設定できる仕様に<&sol;strong>なっていたんですね。<&sol;p>&NewLine;<p>WordPress では「<span style&equals;"color&colon; &num;ff00ff&semi;"><strong>サイトアイコン<&sol;strong><&sol;span>」という名称で設定するところがあり、ブラウザのタブやブックマークで読み込まれるファビコンと、スマホで読み込まれる Web Clip アイコンを同時に生成してくれます(^o^)いやぁ、嬉しい限りです。<&sol;p>&NewLine;<p>早速小さくした画像を作り直し。<br &sol;>&NewLine;超簡単な方法でファビコンを作ってみました。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2>WordPress4&period;3からのサイトアイコン設定方法<&sol;h2>&NewLine;<p><strong>画像は<&sol;strong>今まで用意したのが16ピクセル×16ピクセルと32ピクセル×32ピクセルのicon形式。<&sol;p>&NewLine;<p>それを基本として、マルチアイコンが簡単に作れるサイトで、様々なサイズのiconができています。<br &sol;>&NewLine;こんな感じです。↓<&sol;p>&NewLine;<p><img class&equals;"alignnone wp-image-934" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;10&sol;f&lowbar;9-300x219&period;png" alt&equals;"マルチファビコン" width&equals;"347" height&equals;"253" &sol;><&sol;p>&NewLine;<p>でも必要なのは、<span style&equals;"color&colon; &num;0000ff&semi;"><strong><span style&equals;"font-size&colon; 14pt&semi;">幅 512 ピクセル × é«˜ã• 512 ピクセル以上<&sol;span>のpng形式の画像が1枚<&sol;strong><&sol;span>あればOK。<&sol;p>&NewLine;<p>なんということでしょう・・・<&sol;p>&NewLine;<p>でも、今まで苦労して作った小さいアイコンも無駄にはなりません。<&sol;p>&NewLine;<p><strong>Internet Explorer10<&sol;strong><strong>以下のブラウザは&period;icon<&sol;strong><strong>でないと認識してくれないようなのです。<&sol;strong><&sol;p>&NewLine;<p>WordPressのバージョンアップで、サイトアイコン設定が標準機能となったのですが、残念ながら IE10 以下のブラウザはだめなんですね。<&sol;p>&NewLine;<p>IE 利用者の約 20 %は まだ10 以下のバージョンを使っているようです。<br &sol;>&NewLine;そこらへんもカバーしようと思ったら、少し面倒でも、icon形式にして、ルートにiconファイルを置くことも考えた方がいいかもしれません。(今は気力的にやりませんが^^;その気になった時に利用できます)<&sol;p>&NewLine;<p>はなしがそれましたが設定方法を順を追って書いてみますね。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2>画像の用意<&sol;h2>&NewLine;<p>512ピクセル×512ピクセル以上のpng形式の画像を用意します<&sol;p>&NewLine;<p>これが推奨サイズになっています。<&sol;p>&NewLine;<p>形式についてはとくに指示がないのですが、iOS で読み込まれるアイコンが同時生成されるため <strong>PNG 形式で作成<&sol;strong>したほうがよいとのこと。<br &sol;>&NewLine;JPEG 形式でアップするとすべて &period;jpg になってしまい、一部の端末ではうまく読み込まれないようです。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2>ファビコン用画像の設定<&sol;h2>&NewLine;<p>WordPressのダッシュボードで、左サイドのメニュー「外観」から行います。<&sol;p>&NewLine;<p>「外観」の「カスタマイズ」をクリックします。カスタマイズ画面が表示されます。<&sol;p>&NewLine;<p><img class&equals;"alignnone wp-image-936 size-full" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;10&sol;fa1&period;png" alt&equals;"外観&Implies;カスタマイズ" width&equals;"322" height&equals;"221" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>その中の「サイト基本情報」をクリックします。<&sol;p>&NewLine;<p><img class&equals;"alignnone wp-image-937 size-full" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;10&sol;fa2&period;png" alt&equals;"サイト基本情報" width&equals;"309" height&equals;"523" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>画面がサイト基本情報に切り替、一番下に「サイトアイコン」欄があります。<&sol;p>&NewLine;<p>「画像を選択」をクリックします。<&sol;p>&NewLine;<p><img class&equals;"alignnone wp-image-938 size-full" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;10&sol;fa3&period;png" alt&equals;"サイトアイコン" width&equals;"298" height&equals;"461" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>用意した512×512の画像をアップロードします。<&sol;p>&NewLine;<p>ここにも推奨画像サイズが表示されていますね。<&sol;p>&NewLine;<p><img class&equals;"alignnone wp-image-939 " src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;10&sol;fa4&period;png" alt&equals;"アップロード" width&equals;"609" height&equals;"413" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>アップロードした画像を選択します。そのまま「選択」ボタンを押します。<&sol;p>&NewLine;<p><img class&equals;"alignnone wp-image-940" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;10&sol;fa5&period;png" alt&equals;"画像の選択" width&equals;"609" height&equals;"451" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>カスタマイズのサイト基本情報画面に戻ります。<&sol;p>&NewLine;<p>サイトアイコンにアップした画像が表示されていればOKです。<&sol;p>&NewLine;<p>「保存して公開」ボタンを押します。これで完了です(^^)v<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-941" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;10&sol;fa6&period;png" alt&equals;"サイトアイコン完成" width&equals;"303" height&equals;"503" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>ブラウザのタブやお気に入りに登録して確認してみます。<&sol;p>&NewLine;<p>こんな感じですね<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-942" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;10&sol;fa7&period;png" alt&equals;"ブラウザで確認" width&equals;"356" height&equals;"320" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"alignnone wp-image-944 " src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;10&sol;fa9&period;png" alt&equals;"IEの場合" width&equals;"261" height&equals;"43" &sol;><&sol;p>&NewLine;<p>IEの場合<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-943" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;10&sol;fa8&period;png" alt&equals;"chromeの場合" width&equals;"270" height&equals;"54" &sol;><&sol;p>&NewLine;<p>Chromeの場合<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>こんなに簡単にできるとは嬉しい限り!!いろいろ躓いてよかったです(^^;<&sol;p>&NewLine;<p>このファビコンはテーマを変更しても情報が保存されるので、再設定の必要はいりません。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>さて、うまくいったのに味をしめて、他のブログ用のも作ってみました。<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-945" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;10&sol;fa10&period;png" alt&equals;"ブログごとのファビコン" width&equals;"315" height&equals;"38" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>WordPressに設置されるので、ブログごとに違うファビコンの設定ができるんですね。<&sol;p>&NewLine;<p>自分のマークとして同じものを使いたい場合は、他にもWordPressのブログがあれば同じものを設定すれば大丈夫です。<&sol;p>&NewLine;<p>ブログごとにファビコンを作るのもなかなか楽しいものです(^o^)<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>作ってみたのはこんな感じですが、実は、ここに至るまで紆余曲折ありまして &epsi;&equals;&lpar;&DiacriticalAcute;ο`&ast;&rpar;ハアー<&sol;p>&NewLine;<p>次はついでといってはなんですが、<&sol;p>&NewLine;<p>吹き出し記事作成の時、他のWordPressにファビコンを設定した時、<&sol;p>&NewLine;<p>など躓いたあれこれを書き留めておきたいと思います。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>同じように躓くかもしれないあなたのお役に立てればと思います&lt&semi;&lpar;&lowbar; &lowbar;&rpar;&gt&semi;<&sol;p>&NewLine;<p>その前にもう一つ、ショートコードの表示について書き留めておきます<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;902&period;html">記事に吹き出しを入れて会話風にへ<&sol;a><&sol;p>&NewLine;<p><a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;1085&period;html">ショートコードをそのまま表示するにはへ<&sol;a><&sol;p>&NewLine;<p style&equals;"text-align&colon; right&semi;"><a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;page-1472&period;html"><span style&equals;"color&colon; &num;0066cc&semi;">WordPress一覧へ<&sol;span><&sol;a><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><a href&equals;"&sol;&sol;life&period;blogmura&period;com&sol;zatsugaku&sol;ranking&period;html" target&equals;"&lowbar;blank" rel&equals;"noopener"><img src&equals;"&sol;&sol;life&period;blogmura&period;com&sol;zatsugaku&sol;img&sol;zatsugaku88&lowbar;31&period;gif" alt&equals;"" width&equals;"88" height&equals;"31" border&equals;"0" &sol;><&sol;a><br &sol;>&NewLine;<a href&equals;"&sol;&sol;life&period;blogmura&period;com&sol;zatsugaku&sol;ranking&period;html" target&equals;"&lowbar;blank" rel&equals;"noopener">にほんブログ村<&sol;a><&sol;p>&NewLine;<p><a title&equals;"日々の出来事 ブログランキングへ" href&equals;"http&colon;&sol;&sol;blog&period;with2&period;net&sol;link&period;php&quest;1839199&colon;9200"><img src&equals;"http&colon;&sol;&sol;blog&period;with2&period;net&sol;img&sol;banner&sol;c&sol;banner&lowbar;1&sol;br&lowbar;c&lowbar;9200&lowbar;1&period;gif" width&equals;"110" height&equals;"31" border&equals;"0" &sol;><&sol;a><br &sol;>&NewLine;<a style&equals;"font-size&colon; 12px&semi;" href&equals;"http&colon;&sol;&sol;blog&period;with2&period;net&sol;link&period;php&quest;1839199&colon;9200">日々の出来事 ブログランキングへ<&sol;a><&sol;p>&NewLine;&NewLine;

モバイルバージョンを終了