広告

posted by fanblog

ブログロゴとファビコン作成してみました

このエントリーをはてなブックマークに追加
ド素人なので、こんなもんかな、って感じですが完成しました、ブログロゴ。ついでにファビコンも作ってみました。

作成したブログロゴとファビコン


ブログロゴ
ブログロゴ
ファビコン
ファビコン

ブログタイトルに画像を使う方法


ぐぐればたくさん情報はあるので、設置方法の詳しい説明とかは省きますが、ブログロゴはcssで設置しました。少し有名な方のブログをいくつか見て回ったら、imgタグを使って設置しているブログの方が多かったんですが、hover時に画像切り替えとかしたかったので、cssでやりました。imgタグでも出来ますけどね。
一応今回使った訳ではありませんが、その方法を説明している記事を2つ程紹介します。

ブログのタイトルを画像にする | ここにブログの名前を入れます
さっき言ったimgタグを使う方法です。htmlを書き換えるわけです。imgタグを使う時は、alt, width, height, の3つの属性は指定する様にした方が良いので忘れずに。特にブログロゴの場合ならブログタイトルをalt属性でちゃんと書くように。

【カスタマイズ】タイトルロゴを変更してみよう|ファンブログ カスタマイズ ぽあろの休日
こっちはcssを使う方法です。cssを書き換えるだけです。説明されているのは、ブログロゴ、ってよりはブログタイトルの背景画像の話です。

画像の切り替え


自分が参考にした記事はこれです。
hoverでリンク画像を切り替える - スタイルシートTIPS ふぁくとりー

ぐぐったら最初に出てきたw
ちなみに、画像をホバー用と2種類作って、それをくっつけるわけですが、それはこちらを参考にしました。
「CSS Sprite」で画像の表示速度を高速化する [ホームページ作成] All About

ここの手法は今回は関係ありませんが、ここで紹介されているウェブサービスを利用して画像をくっつけました。ま、ロゴを作るのに使ったドローソフトで普通にくっつければ良かったのかもなんですけどね。。w

ファビコンの設置


ファビコンのデザインはブログタイトルを参考にしました。参考に、って言わないかw
作成方法や設置方法はこちらの記事を参考にしました。
【カスタマイズ】ファビコンを作ってブログの独自性を出してみよう|ファンブログ カスタマイズ ぽあろの休日

icoファイルがアップロードできないため、どうしようか迷ったんですが、とりあえず拡張子書き換えてファンブログにアップロードしてみたら、Internet Explorer 9ではちゃんと表示されました。やふー!w
ぽあろの休日さんの記事では表示されない、って書いてあったので、ie8とかだと表示されないのかもですが、とりあえず良いやww

最後に


一応今回のロゴは、このブログのデザインが正方形が並んでる感じ、ってのもあって、こんな感じにしてみました。いや、実は理由はあんまりないんですけどねw単に電車の中で見かけた何かの広告で、正方形に文字の白抜きのやつがあって、これはどうだろ、って思ってやってみたらそれなりだったので、これで良いや、とw

でも、見慣れないせいか、ロゴが浮いちゃってる感じもなくもない。ま、見慣れれば大丈夫ですかね。ちょっとでかいのか?
ま、今後ともファンブログハックをよろしくお願いします。ブログタイトルもロゴも、またそのうち変更するかもですけどねw

このブログの更新情報は TwitterRSS でチェック出来ます。是非、フォロー、またはRSSの購読をよろしくお願いします。
「RSSの購読って何?」って人は、 ブラウザ毎のRSS購読方法の簡単なまとめ を読んでみて下さい。

このエントリーをはてなブックマークに追加
人気記事

PAGE TOP

×

この広告は30日以上新しい記事の更新がないブログに表示されております。