[HP備忘録] FC2ホームページ、Chromeのファビコンの変更と「SNSボタン」の設置方法

毎日、ホームページ「外房雑記録」(http://sotobou.web.fc2.com/)にたくさんのアクセス、ありがとうございます!!

最近おかげさまで、ディリーでユニークの訪問数が終日100名を超えるようになり、NケージのページがGoogleの検索ページの上位に表示されるようになりました! 毎回ご訪問して頂いているみなさま、この場を借りてお礼申し上げます。

今回は、ホームページ用にオリジナルのファビコンを作成しました。「ファビコン」(favicon)というのはブラウザ(Chrome、IEなど)のタブやブックマークに表示されるアイコンの事です。

私のホームページ「外房雑記録」(http://sotobou.web.fc2.com/)は、無料のホームページスペースサービスである「FC2ホームページ」(http://web.fc2.com/)を利用しています。

ここのスペースを借りてホームページを設置すると、上記のようにファビコンがFC2の「一角獣・馬」(ユニコーン?)になります。いろいろとタブを開くと他のFC2のサービスやホームページ・ブログのタブと混在してしてしまうで、以下のようにファビコンを変更しました。

【手順】
1.ファビコン用の画像を準備します。私は「Excel」で適当に絵(.jpg)を作り、画像ビューア「IrfanView 」で絵を「1:1」のサイズで切り出しました。

2.以下のように画像の面取り(丸め)加工をしました。その際、このサイト上で画像を加工しました。(PNG形式で保存)

画像加工サイトQuick Picture Tools　/　角丸
http://www.quickpicturetools.com/jp/rounded_corners/

3.以下のサイトでファビコン用の「 ICOファイル」(.ico)を作成しました。

ファビコン favicon.icoを作ろう!
http://ao-system.net/favicon/index.php

4.ホームページのhtmlのヘッダの「head タグ」内に以下の記述を追加し、ftpツールにてICOファイルと共にアップして完了です。

※うまく変わらない時は、ブラウザのキャッシュ・履歴などを一度削除してください。

また、今回は各ページに「SNSボタン」を設置しました。

以前も各SNSサイトを参照してここに記述をしていたのですが、ボタンとボタンのスペースやサイズが統一出来ずに苦労していたのですが、以下の無料サービスで任意のSNSボタンを設定でき、ホームページに設置できるのでとても助かりました。

忍者ツールズ - 忍者おまとめボタン
http://www.ninja.co.jp/omatome/

今回は、「Twitter」、「Facebook」、「LINE」、「Google+」、「はてなブックマーク」、「mixi」のボタンを設置しました。もし参考になった・お役にたったページがあればツィート、いいねなどをして頂けるとうれしいです!!

ここまで読んで頂きまして、ありがとうございました！！

ぜひ、ホームページ「外房雑記録」(http://sotobou.web.fc2.com/)にも、遊びにきてくださいね♪ 内容は、Nゲージ入門(鉄道模型)ガイド、JR外房線ガイド(車両・歴史・廃線など)、クラブミュージック/クラブジャズ/洋楽の名盤CDガイドです。

もし、この記事が参考になりましたら、応援クリックして頂けると励みになります！

タグ：ファビコン favicon 画像加工サイトQuick Picture Tools　/　角丸 ファビコン favicon.icoを作ろう! SNSボタン 忍者ツールズ 忍者おまとめボタン