ソネブロのファビコンを変えてみよう

前回の記事で1000度目のブログ記事投稿であったことから、

いつもLobyのブログを訪問してくださるブロガーさんたちへ感謝の思いをこめて

今日は「So-netブログのファビコン変更」方法をご紹介したいと思います。

 

                                

 

  ちなみに「ファビコン」とはブラウザ（IEやFirefox、Google Chromeなど、インターネットに接続するためのソフト）の上部（ツールバーと呼ばれる）に表れる小さなマークのことです。（Favorite Iconの略字）

CSSとかHTMLとかがまったくわからない方でも出来るようにやさしく説明しています。（つもりです）

（Loby自身もあまり詳しい方ではないので、うまく説明できてないところとか、ほかに簡単な方法などがあるかも知れません。あくまでも、“参考”というお考えで読んでください）

 

ソネブロのファビコン　と　Lobyのブログのファビコン

　　

ファビコン変更のステップ

ステップ-1

IE（Internet Explorer）をメーンブラウザとして使用の方には申し訳ありませんが、説明の都合上、Google Chrome（グーグル・クローム）をベースとして話を進めます。Google ChromeはIEなど足元にもおよばないほど軽いブラウザですし、安全性にもまったく問題はありません。

Lobyが10年以上も主に使用しているブラウザです。 ということで、ファビコンを変更されたい方は、まず最初に Chromeブラウザの公式サイトからダウンロードをしてください。以下の説明はすべてGoogle Chromeを前提としています。また、ほかのブラウザでファビコン変更を行った方からの質問等にはお答えできかねない知れないということを予め書いておきます。


ステップ-2

Chromeをインストールしたら、次はファビコンする画像の選択です。 無難なのはブログのアイコンに使っている画像。 ほかの画像を使いたいのであれば無料の画像編集ソフトであるPhotoscapeなどを使って作ることもいいでしょう。

アドバイスとして言えるのは、あまりゴチャゴチャした画像は避けた方が無難ということ。 ファビコンは16ｘ16ピクセルから最大でも32ｘ32ピクセルくらいの小さな画像なので、あまり複雑な画像では何かわからないからです。 この時作る画像のサイズは500ピクセルでも1000ピクセル（またはそれ以上）でもかまいません。選んだら、分かりやすいフォルダ、またはデスクトップ上に名前をつけて保存します。

ステップ-3

次にFAVICON GENERATOR & GALLERYというサイト（サイト名をクリックすれば開きます）に行き、

①　先ほど保存したファビコンにしたい画像を選択

②ファビコンのサイズ選択（ここでは32ｘ32とする）をクリックしたあとで、

③Generate Faviconのボタンを押す

　　ここではタヌキの画像を使ってファビコンを作ってみます。

　　ごらんのようにファビコン作成画面にタヌキの画像が見えます。



④モニター画面左下に、ダウンロードされたファビコンのファイルがあることが表示されています。 　

 

⑤その表示枠の右端の▼印にカーソル を当て、クリックすると小さなウインドウが開くので
　「フォルダを開く」をクリックします。




⑥　するとファビコンファイルが保存されているフォルダが表示されます。
　（LobyのPCフォルダですので醜いところはお許しください…）

⑦この時、ファビコンに名前をつけたければ、ファビコンファイルの上をクリックして
　名前をつけることもできます。



※ファビコンに名前をつけておけば、もし、変えたくなった時に便利ですけど、名前をつけなくともかまいません。

※ファビコンファイルが探しやすい場所（フォルダ）にあることを確認しましょう。
　あとでアップロードする時に分からなくなったら困ります（汗）

　　（ファビコンファイルの名前を変えた例）
　　

ステップ-4

ここまで問題なくできましたか？

ここから少々話がややこしくなります。
なぜなら、ソネブロでは.ico形式のファイルはアップロード出来ないのです！
FC2ブログでは簡単に出来るのに…

つまり、ソネブロで使える形でアップロードさせてくれるサイト（ファイル置き場）が必要となります。
ここは手っ取り早く（？）、Lobyが愛用しているFC2を使用することにします。
FC2アカウントをもってない方は、この際新規アカウントを作ってください。メールアドレスさえあればできますし、アカウントを長い間使わずに放っておいても削除されたりしません。FC2公式サイト

①　FC2アカウントを新規登録し、「サービス追加」をクリックし


②「FC2ホームページ」を開設します。（これだけではホームページはできませんので安心してください）


④次に「ファイルマネージャー」を開き…


⑤先ほど保存したPCのフォルダからファビコンファイルを選び、アップロードする



⑥アップロードされたのを確認後、ルーペマークをクリックすると…


⑦別のウインドウが開き、ファビコンが表示される


⑧アドレスをコピーして、Windowsの「メモ帳」か何かにペースト（コピー）します。



ステップ-5

さて、いよいよソネブロへのファビコンファイルの挿入です。

①　まず、「管理ページ」「デザイン」 「テンプレート管理」ページを開け




②　「テンプレート管理」ページの下にある「HTMLの追加」をクリック
　　（めったにトラブルは起きませんが、万一起こった場合でもオリジナルのHTMLページはもとのままで安心？）



③　追加した新「HTML」ページには一応名前をつけます。
　　この場合は「Tanukiファビコン入り」としました（汗）

④　次にキーボードの「F3」キーをキーボードの「F3」キーを押すと、「ページ内検索」ウインドウが右上隅に開くので、その中に「favi」と半角英字で記入し、その検索ウインドウの右端にある「V」ボタンを押すと、ファビコンのアドレスを挿入する場所が表示されます。（この例の場合はオレンジ色で表示されている）
　　このあたりの便利さGoogle Chrome特有のものだと思います。

（画像が見にくかったらクリックすれば拡大して見れます）



ステップ-6

いよいよ最終段階です。もう一息です。
ここからはたいへん需要ですので落ち着いてやりましょう。

①　「HTML」ページの「favi」の文字が見つかった場所のHTMLコード、
　＜link rel="shortcut icon" href="<% site_info.blog_url %>/_common/favicon.ico" /＞　の　href="ここから" /＞ここまでをマウスの左ボタンを使ってドラッグします。（ドラッグすると下のように文字色が反転して青くなります）


②　次に先ほど「メモ帳」にコピー保存したファビコンのアドレスをコピーします。
　　タヌキファビコンの場合はhttp://◯◯◯◯.web.fc2.com/tanuki.icoがアドレスですので、これをコピーして（同じようにマウスでドラッグ＆コピーできます）、

③　「HTML」ページの文字が反転して青くなっている個所にマウスカーソルをあてペースト（貼り付け）します。




アドレスをペーストすると、こんな形になります。



これで終わり。
あとは忘れずに新「HTML」を「保存」して、あなたのブログを「開く」か「再度読み込み」をして確認してください。もし、表示されなかったらどこか間違っていると考えられるので、ステップ-5　あたりからやり直してみてください。


分かりやすいように説明したつもりですが、長ったらしい説明のわりには難しかったかも知れません。

ほかにもファビコンの作り方を分かりやすく説明しているサイト＆ブログがあると思います。

Lobyが見つけたものはこんなサイト/ブログです。よろしかったら参考にしてください。

Favicon（ファビコン）を設定して、自分のブログをカスタムしてみよう

お気に入りアイコン（ファビコン）の作り方　

 

今日もご訪問有難うございます♪

 

　                                

 

 

         

 

“備えあれば憂いなし”是非備えておきたい防災グッズ

タグ：ファビコン

コメント 28

説明文がお上手！
もしかしたら、私にもできるかも。
こんど、ＰＣでやってみたい感じ。
私普段は、ケータイっ子♪
by つなみ (2012-09-04 15:52) 

わたしも替えてみました、簡単なのだけど（汗）
（*＾＾*）いつもありがとうございます
by 404 (2012-09-04 17:11) 

以前『nice!』が嫌で、『あしあと』を真似させて頂きました
ファビコンも変えたいと思っていたのですが・・・
分かり易い説明文のお陰で頑張れるかもです♪

by Klose (2012-09-04 17:52) 

＞つなみさん、どうも有難うございます^^;
　分かりやすい説明を…と考えながら書きました。
　これで、ソネブロ・ブロガーのみなさんが可愛いファビコンや格好いい
　ファビコンを作るお手伝いになれば嬉しいです♪

＞404さん、おっ、早速変えられましたね＾＾ｂ
　404じゃなくて01としたのはどういう理由でしょう？

＞Kloseさん、そうですね、nice!は記事によってはnice!と押せない
　場合もありますものね。
　今回の説明でファビコンを変えることができたら嬉しいです＾＾ｂ


by Loby (2012-09-04 21:06) 

こんばんは
私もChrome使いッス。ファビコン・・・参考にさせていただきます！
by mk_papanero (2012-09-04 21:36) 

ファビコン・・・この言葉自体初めて知りました＾＾；
ふむふむ、なるほど～
興味深い内容なので、自分も試してみたいなぁーと思います♪
by せいまる (2012-09-04 23:38) 

なるほど～（汗）
ご教示に沿って
この週末にトライしてみます～♫

by rtfk (2012-09-05 07:38) 

こんにちは＾＾
訪問してくださる方が増えるとデザインを変えたり見やすく工夫したくなるものですね～　疎いので理解に苦しむ事も多いですが色んな事にチャレンジしてみたいです＾＾；
by 雪花 (2012-09-05 08:19) 

手さぐりでブログをはじめたおかげで、ＰＣ苦手意識が克服できました。
みなさんのブログを見せていただくと、どうやってするんだろう？と
思う事ばかりです。
いろんな方法があるんですねー。勉強になります＾＾
by asty (2012-09-05 10:17) 

＞mk_papaneroさんもChrome派ですか＾＾ｂ
　素敵なファビコンができたらいいですね♪

＞せいまるさん、難しくなかったら是非トライしてみてください。
　できたら知らせてくださいね。見に行きます＾＾ｂ

＞rtfkさん、是非トライして見てください＾＾ｂ

＞雪花さん、こんにちは。
　オリジナルのままで続けられる方もいますけど、
　色々変える人もいますね。私も後者ですけど…(^^ゞ
　ブログのカスタマズはやり始めるとハマってしまいます。

＞astyさん、ブログもそういう意味ではPC克服のツールに
　なりますね＾＾ｂ
　ブロガーさんの中にはため息が出るほど素敵なのもあります。
　

by Loby (2012-09-05 10:26) 

こんにちは。
皆さん可愛らしいのを付けているなとは思っていたのですが
ファビコンという名前のものなのですね。初めて知りました。
読んでいるとできるような気もするのですが^^;
by kuwachan (2012-09-05 12:32) 

わぁ、素晴らしいですね☆！！。
ぼくもやってみます♪。
by SU-SAN (2012-09-05 16:08) 

＞kuwachanさん、こんにちは。
　それほど難しいものではないと思います。
　チャレンジされてみてはいかが？

＞SU-SANさん、是非、やってみてください♪
　素敵なのができたらいいですね。

by Loby (2012-09-05 21:10) 

なるほど～☆
こういう手順を踏んで
変更していくのですね～(^^)

私、自分のＨＰを立ち上げる時に
ひとつのイメージで
統一しようかと思ってたのですが…

なかなか立ち上げに
至っておりません^_^;
その際にはぜひ参考にさせてただきますネ☆ヽ(*‘-^*)
by MILK (2012-09-05 21:20) 

ソネブロは、カスタマイズがあまり出来ないので、他のところからLinkを張るしかないんですよね。
FC2ブログ登録してみるかな・。。。
by なんだかなぁ〜。横　濱男です。 (2012-09-05 21:51) 

こんばんは(*´∀｀*)♪
新しいPCに変えてから、Lobyさんのブログに早く入れるようになり、
とても快適なPC生活を送れるようになりましたヽ(*^^*)ノ♥
Lobyさんが詳しく書いてくださったファビコン・・・
私も挑戦して見ようかと思ってますが・・・できるかな？！(⌒-⌒; )
by くるめっち (2012-09-05 23:02) 

詳しい解説、ありがとうございます♪
やってみたいけど、ちょっと難しそう・・・。
今度時間がある時にやってみたいです☆
by sarisari (2012-09-06 00:41) 

＞MILKさんほどのグッドセンスの持ち主なら、
　HPもきっと素敵なものとなることでしょうね＾＾ｂ

　HPのデザインは気に入ったものを作るのは
　デザインセンスのあまりない者（私のような）にはかなり
　難しいです(^^ゞ

＞なんだかなぁ〜。横　濱男ですさん、そうですね、
　残念ながら、ソネブロは制約が多すぎますし、テンプレートも
　オプションが少なすぎます。
　FC2など、選ぶのに困るくらいありますからね…
　でも、ソネブロはそれなりの良さがありますよね♪

＞くるめっちさん、おニューのPCでサクサクインタネットですね＾＾ｂ
　ファビコンの変更はそれほど難しいことではないので、
　よかったらトライしてみてください♪

＞sarisariさん、どういたしまして～
　解説すると難しいみたいですけど、それほどでもないですよ。
　コピー・ペーストが出来れば意外と簡単にできます。
　ツールも揃っていますし。ぜひ、やってみてください。



　
　
by Loby (2012-09-06 05:10) 

私もブラウザはChromeを使っていますよ。
5年ほど前に自分の事務所のHPを作ったときには、HTMLもCSSもけっこう詳しくなりましたが、今ではすっかりきれいに忘れてしまいました。
by heroherosr (2012-09-06 09:40) 

やってみたい！
時間がない！！
近いうちにやってみせます。
by さくらこ (2012-09-06 16:08) 

ブラウザの違いって重要ですよね。
IEはエラーが多く、勝手に自動更新されるのに不具合が多発するので、クロームと併用するようになりました。
IE9で別のことをやりながら、クロームの方でもう1方の事が出来るなど、結構便利に併用しています。
by 麻能 (2012-09-06 21:15) 

こんばんは。
結構ファビコンを変えておられる方がいらっしゃるので、
どうしているのかな？っと疑問に思っていたのですが、
なるほど！！です。
私も、いじってみようかな＾m＾
あっ、そろそろデザインも変えてみようかな？？（笑）
by perseus (2012-09-06 22:07) 

＞heroherosrさんもChromeを使っているんですね＾＾ｂ
　これを使い始めるとIEはとても使えませんね。
　HTMLもCSSも使っていたら慣れますけど、使わなかったら
　忘れますね^^;

＞さくらこさん、案ずるより産むがやすし、です。
　やってみるとそれほど難しくありませんよ♪

＞麻能さん、私は
　1、Chrome
　2、Firefox
　3、Safari
　4、Opera
　で、最後の最後がIEです^^;

＞perseusさん、ソネブロでのファビコン変更は、クリアしなければ
　ならない問題があるため、通常の方法ではできないんですよ。
　私もかなり苦労して変更しました。
　なので、今回紹介している方法は、いわば”伝授”です＾＾ｂ


by Loby (2012-09-07 02:34) 

なるほどーこれでnice!をあしあとに変えられるのですね。
私はChromeとExplolar両方使っています。ソネブロと一部相性の悪い機能があるようで使い分けています。
by moumou (2012-09-07 07:52) 

ありがとうございます。
今度チャレンジしてみます！
by 駅員3 (2012-09-07 12:05) 

＞moumouさん、これはファビコン変更の説明です。
　Chromeは文句なしにベストブラウザですが、Firefoxも快適ですよ＾＾

＞駅員3さん、ぜひチャレンジして見てください。


by Loby (2012-09-11 23:16) 

初めまして、そしてありがとうございました！
こちらの記事を参考にして、無事ファビコンを設定できました。本当に助かりました～～～＞＜！
by しょう子 (2014-03-05 23:11) 

＞しょう子さん、はじめまして。
　お役に立てて良かったです❢
　
by Loby (2014-03-06 06:04)