箱

橙BOX

レッドストーン橙鯖住人よる、らくがき+活動ブログです。何かのお役に立てるブログを目指します(*´ω`*)

Category: スポンサー広告   Tags: ---

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Category: 未分類   Tags: ---

Comment: 6  Trackback: 0

ブログいじり~自作ファビコンを作ってみよう編~

今日はブログいじりに関しての記事を書いてみます。
レッドストーンには関係がない上、
自ブログやサイトを持っている方以外にはあまり意味がない記事です。
ごめんなさい。゚(゚´ω`゚)゚。ピー
今回はちゃんと真面目な記事ですよ!(`・ω・´)キリッ

タイトルにあるようにファビコンを作ってみようなお話です。
すでに2日前くらいからうちのブログのファビコンは変更してあるので、
気が付いた方もいらっしゃるかもしれません。



で。


ファビコンってなんぞ?

という方も多いでしょう。



ファビコンというのは、
IEやクロームなどブラウザでページを開いたときに上のタブにでる
小さなアイコン(ロゴマーク)の画像のことです。




これですよこれ(・∀・)
ファビコン解説0


私がお世話になってるFC2ブログだと赤い馬のマーク、
何も設定されてないところはIEだとeのロゴマークがつきます。


あちこちのサイトを見てみると、
大手のサイトはオリジナルのファビコンにしてあるところが多いですよね。


逆に個人ブログでこのファビコンをいじっているサイトはあまり見かけません。
それどころかRS公式サイトすらデフォルトのファビコンのままですね(笑)。



まあそこまでこだわりたいという人も少ないのかもしれませんが、

ファビコンがオリジナル画像になるだけで、
なにやら素敵サイトみたいに見える気がしません?(*´∀`)
ファビコンマジーック!!+(0゚・∀・) + ワクワクテカテカ +



大手サイトがオリジナルロゴをファビコンで使えるなら、
個人のブログでも使えるはずです。

という適当な考えのもと挑戦してみた結果、
うちのブログでもファビコンをオリジナルにすることに成功しました!ヽ(゚∀゚)ノ

俺のブログも変えてみてえええ!
って方もいるかもしれないのでやり方を簡単に説明してみます。



ファビコン変更手順


・手順①ファビコンに使う画像を作成する。
・手順②画像ファイルの拡張子をicoに変換する。
・手順③ファビコン(favicon.ico)をブログにUPする。
・手順④ブログに自作ファビコンが表示されるように設定する。
追記



手順①ファビコンに使う画像を作成する。 

まずはじめに、ファビコンに使いたい画像を作成します。
ファビコンの拡張子は.icoになりますが、
まずはpngやjpgで画像を作ります。

windowについてるペイントツールでもSAIでもなんでも構わないので、
ファビコン用の画像を作成してください。


サイズは48px48pxで作るのがいいと思います。
保存形式はgif、png、jpgで保存します。(bmpは使えないサイトもあるので避けた方が○)
透過情報のある画像ならgifかpngで保存してください。



とりあえずうちは橙BOXなので、
オレンジ色の箱を描いてみました。




こんなかんじ。
box.png



白背景を前提に描いたので、
画像のふちが白く浮いて見栄え悪くなっちゃってますね。
基本白っぽい背景に表示されるので白フチできちゃってもそんなに気にする必要はないと思います。





手順②画像ファイルの拡張子をicoに変換する。 

先ほど作ったのはあくまで画像ファイルです。
pngやgifなどのままではファビコンとしては使えません。
作った画像ファイルの拡張子を.icoにする必要があります。


.icoに変換してくれるサイトがあるので、
そちらでするのが便利です。


>Dynamic Drive- FavIcon Generator

>favicon.icoを作ろう!



どちらも画像をアップロードするだけで拡張子.icoに変換してくれるサイトです。
ただし、下のサイトは透過画像が透過されない不具合があります。
透過情報を含む画像の場合は上のサイトでicoに変換してください。
(透過情報のない画像ならば下のサイトのほうが使いやすい気がします)



私の作ったのは背景に透過を使っているので、上のサイトを使ってicoに変換してみます。

ファビコン作成解説2
・サイト上にある参照ボタンをクリックして、自分のPC上にある画像をアップロードします。
・Optionalのチェックは両方とも入れてください。
・下にあるCreate iconボタンを押すと、サイトの下部にファビコンのプレビューができます。



ファビコン作成解説3
なぜか白文字の部分も透過されてますが、
icoになったのを見たらちゃんと白でしたのでご安心ください。
Download Faviconボタンで、.icoに変換されたものをダウンロードして保存します。





手順③ファビコン(favicon.ico)をブログにアップロードする。 

icoに変換できるサイトからダウンロードしたファビコン(拡張子ico)を、
ブログやサイトにアップロードします。


ダウンロードしたファビコンはデフォルトの名前だとfavicon.icoとなっていると思います。
拡張子がicoなら名前は変更できますが、
ここでは分かりやすくデフォルトのfavicon.icoのまま使います。


ファビコンのアップロードは画像などのアップロードと同じです。
FC2ブログなら左メニューの一番上、
ホームのところのファイルアップロードをクリックしてください。
ファイル管理画面が出てくるので、先ほどダウンロードしたfavicon.icoをアップロードします。






手順④ブログに自作ファビコンが表示されるように設定する。 

差後に、自作したicoファイルを自分のブログのファビコンとして表示できるよう設定します。


ファビコンの設定はテンプレートで変更します。

まず、自分のブログで使っているテンプレートを書き換えるため、
FC2なら管理画面にある左のメニューの環境設定にあるテンプレートの設定を選んで下さい。


ファビコン作成解説4
テンプレートの設定をクリックすると、
デフォで現在使用しているテンプレートがでてきますのでそのままいじりましょう。


ようするにこんな画面です。
ファビコン作成解説5


HTMLをいじったりしたことない方は、ここで逃げ出します。
なにがなにやら分からないと思いますが、簡単ですので焦らずに。




あわてずF3ボタンを押して、検索バーを出して下さい。
検索用語に/headと入力します。
1件の一致があるはずですのでそこを見てください。


ファビコン作成解説6
黄色くなっている部分が一致する部分ですね。
詳しい説明するとややこしいのでとりあえずこの部分の真上に、



<link rel="shortcut icon" href="(保存したファビコンの場所)" type="image/vnd.microsoft.icon">


と、いう文章をコピペして追加します。
※<と>は半角です。
(保存したファビコンの場所)の部分には、先ほどアップロードしたファビコンの場所をいれます。


場所はアップロードしたファイル管理画面にのっています。
ファビコン作成解説8
水色の部分にカーソルを合わせると自動的に選択してくれるので、
右クリックでコピーしてペーストすると早いです。



うちのブログの場合だとこんなかんじになりますね。
ファビコン作成解説7

サイズの都合ではみ出ていますが、
<link rel="shortcut icon" href="http://blog-imgs-54.fc2.com/r/s/o/rsorangebox/favicon.ico" type="image/vnd.microsoft.icon">
となっています。
※太字の部分がコピペしたicoファイルのある場所です。


書き終えたら、編集画面下にある
更新ボタンを押してテンプレートを上書きしてください。




以上でファビコンの設定は終わりです!お疲れ様でしたヾ(*'∀'*)ノ″



うまく設定できていれば、
ブラウザのタグの部分に自作のファビコンが入ります!
FC2ブログでの設定で説明しましたが、
基本はどこのブログでも同じです。

【2.28追記】
忍者HPではファビコンが文字化け(?)のようになってうまく設定できないというコメントをいただきました!
原因は現在不明です、役立たずでごめんなさい。゚(゚´ω`゚)゚。


完成!.:*ヽ(*´∀`)ノ*:.

完成!


オリジナルってなんか嬉しいよね(●ノωノ)

ファビコンとしてページ上に表示されるサイズは16×16pxなので、
複雑な画像や文字を入れると小さすぎてつぶれてしうので注意です。
うちのもかなりつぶれてしまっていますけども(汗)

48pxサイズだとそれなりに見れる画像でも、
16pxまで小さくなるとつぶれたりで訳が分からないことになることが多いです。
できるだけシンプルなほうがいいと思います。
ファビコンが美しいサイトを見ると、やっぱプロはすごいな~と関心しますね!





追記 

蛇足かもしれませんが、
icoファイルには3つの画像情報が詰まっています。

16pxサイズの画像
32pxサイズの画像
48pxサイズの画像


の3つです。


透過画像にこだわらないならば、
先ほど紹介したico変換サイトの下の方のサイトで作ってみましょう。


各サイズの画像をそれぞれ違う画像に設定することも可能です。



このように3つのサイズの画像をそれぞれ別に設定することが可能なのです。
完成3




favicon.icoは先ほどと同様1つが作られるだけですが、
3種類の画像が詰まっていますね。
完成2

青BOXのほうが可愛い(ry( ´Д`)=○ )`ъ')・:'.,.言うなァ!
橙鯖だから仕方ないんだよ!!
(一人突っ込みで逆切れするのやめてくださいさくらさん)


透過部分が透過されないという不具合があるため、
本来透明になるはずだった部分が白く表示されてます。
それ以外では使いやすいサイトだなと思います(o´・ω・)´-ω-)



こだわりたい方は是非オリジナルのファビコンを作ってみてはどうでしょう(*´∀`*)


今回マニアックな話でごめんなさい!
分からない部分があればコメントでどうぞ!
それじゃ(*´∀`*)ノ″マタネェ



ボタンっぽいとこに橙文字をいれるシンプルなものも作ってみたけど
橙ボタン


16pxになるともう読めない・・・(´・ω・`)
橙ボタン16px



いつのまにか月末だったのでちょっとだけ|ョ´∀`●)
Sample
もしお気に召しましたらポチっとしていただけると励みになります(●ノωノ)





\美しいファビコン作りたい/
オレンジボックスアイコン1


関連記事

Comments

 
良い事聞いたぜ(ΦωΦ)フフフ…
って感じで、ささっと見よう見まねでいじってみたんですが、いくつか画像作成して、どの画像をアップしても謎の顔文字マーク?しか出ない状態に( ´゚д゚`)
忍者ツールズ側で何か規制でも入ってるんだろうか・・・うーむ

そういえば、褌イラストへの突っ込みメルフォレスが3件を突破しました!
日本ふんどし協会のアドレスを添えて来た人を見つけた時にはさすがにお、おう・・・せやな・・・(;^ω^) ってなりましたw
隠れ褌勢侮りがたし:(;゙゚'ω゚'):
Re: こうひしさん 
なんと・・・忍者HPでは無理でしたか・・・(;゚ω゚)
解決策を探してみようと、忍者HPを適当なやつを作って試してみようと思ったのですが、
なぜかIDが凍結されていて(新IDをつくってもダメでした・・・)自分で試すことができませんでした><


おそらく、ですが、
ウェブサーバ側でファビコンのMIMEタイプが設定できていないのかもしれません。

Favicon の MIME タイプを .htaccess で設定するには
AddType image/vnd.microsoft.icon .ico
というのを.htaccessに追加すればいいはずなんですが、
残念ながら忍者HPは.htaccess はいじれないみたいなんですよねorz

私の環境では自分のブログのファビコンちゃんと表示されてますが、
他の人が見たらちゃんとなってないかもしれません・・・こういうの苦手で正直自身がない。゚(゚´ω`゚)゚。
お役に立てずすみません・・・解決策を見つけたらまたご連絡します!(´;ω;`)ブワッ


>そういえば、褌イラストへの突っ込みメルフォレスが3件を突破しました!
みんな褌好き過ぎwww
隠れ褌勢・・・まさかそんなにいるとは・・・((((;´・ω・`)))ガクガクブルブル
日本ふんどし協会の公式サイトは私も見ましたw
ふんどしの魅力に取り付かれたのはあれが原因な気が激しくしますw

こういうの 
だめなんだよなあ・・・
見ながらでも必ず失敗するって逆に才能だおね・・・・・・・・

何やるにしてもそうだからなwww


あのね・・・ふんどしG作ろうと思うの・・・
Re: 赤まふんどしーふさん 
アメブロもだめなのおおおΣ(´・∀・●)
うう・・・申し訳・・・orz
やっぱファビコンマークはふんどしだよね!?

ふんどしG・・・だと・・・?!
ちょwwなにその素敵ギルド私もはいたいでふんどしぃ!
ふんどしギルド紋章のパターンなんでないのぉ!
チャレンジしたらしいです! 
さくらさんこんばんは^^
いつもお世話になります!

先日うちの義鷹兄さんが
「うおおおおお…遅刻する~~~~www」
と言ってた意味がわかりました!@@

ファビコン作成に
兄さんもチャレンジしたらしいけど
結果は…敢え無く失敗><
プロフに貼って自己満足に終わっちゃいましたw

いつも更新楽しみにしています^^
それではまたRSで><ノ
Re: 緑翠蝶さん 
アメブロオオオオオ!
なんかFC2以外じゃファビコンいじりにくいのかな・・・(´;ω;`)ブワッ
えぅ・・・ごめんよぅ・・・
いつかアメブロや忍者でもファビコン変更できる記事がんばる・・・

このファビコンWIZの頭にカエルのせようぜ!(ぇ
最近RSやってなくて会ってないねー(´・ω・`)
もうちょっと時間に余裕できたらまたインするよ!ヾ(*'∀'*)ノ″

とっても便利サイト


bn_minipet_all.png


赤石10周年おめでとう!

Powered By 画RSS

橙BOX【管理人:さくら】since2012.9.27
orangebox_bn.gif
http://rsorangebox.blog.fc2.com/
ガチムチとビホルダーをこよなく愛するブログ
中の人の通称:「さくら」、「肉」、「桃」
足跡残ブログにはお邪魔してます(●ノωノ)

当ブログはリンクフリーです(´ω`*) Sample«らくがき展示用サイトはこちら
Category
 

訪問ありがとうございます!
ヾ(*'∀'*)ノ″



Copyright © 2013 L&K Logic Korea Co., Ltd. All Rights Reserved. License to GameOn Co., Ltd.
当サイトで利用している画像及びデータは、株式会社ゲームオンに帰属します。許可無くご利用又は転用する事は出来ませんので、予めご了承下さい。

※当サイトの画像などについての取扱
良識の範囲内での使用はご自由にと思っていますが、 絵柄的に見た方が不快になる場合もありますので、万一ご使用になる場合はどうかご注意くださいませ
(A;゚ω゚)
ポタ出しタイマー


NEW« »OLD
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。