タイトル横のアイコンの変更

お塩

2008年06月08日 10:11

皆さんお待ちかね(?)のタイトル横のアイコンの変更の記事でも。


念のために、現在使用中のテンプレではなく、他のDLしたテンプレで試してみた方が安心かと思われる。
「いや、ワシは大丈夫や!」とか勢いで行ってみる方は、そのままいっても可。
ちなみに俺は、勢いでいってみたが。

さてさて。

ブログの設定>テンプレート
で、編集したいテンプレのカスタマイズをクリック。

スタイルシートの項目の真ん中らへんが、今回の目的地。
tytleと書かれたところ。



で、イジるところは



↑の4か所。

あ。それとアイコンにしたい画像の作成。
ドット絵でもよし、写真から切り抜いたものでもよし、そんなに大きくないものを用意する。
↓↓の記事の絵文字でもOK。

まず「height」から。
これは高さで、変更する画像の縦のピクセル数に合わせる。
ここの数値は画像の縦幅より大きければ、良い感じ。
少なければ、それだけ分カットされる。
50pxの画像に20pxの入力だと、下から30pxカットされる、ということ。

そして次。
「padding-left」は、左から何ピクセル空けるかということで(多分)。
例えば画像の横幅が29ピクセルで、ここの数値を20にすれば、9ピクセル食い込むことになる。



逆に数値をデカくすると、ドーンと離れる。
80pxの場合。↓



ここは画像の横幅+αで、調整するのがよいかと。


3つめは「padding-top」
タイトル文字の上の余白分の数値。
数が小さけれ、画像に対して上の方に、大きければ下の方に行く。
↓の赤ニャーの縦幅は50px。

10pxの場合。


30pxの場合。


となる。


で、最後。
4つめは、表示したい画像のURL。
元画像のURLを消して、画像一覧>ファイル一覧で表示される、使用したい画像のサムネイルをクリックすると、その画像が別窓で開くので、その窓のアドレスバーをコピーして張り付ければ楽チン。

くれぐれも画像は自ブログに保存したものを使用して下さい。
直リンクはしないように注意して下さい。


ちなみに現在のこのブログの仕様。

heightが50pxなのは、その前に縦幅50pxの画像を使っていて、そのままだからw

こんな感じでよろしいでしょうかぁ?
「いや~、ワシにはわかりにくいわぁ(汗」とか
「こんな説明でわかるかいな!」とか思われる方は、その都度聞いて下さい。
さらに分かりにくかもしれないけど、頑張ってお答してみます^^;


さてこれからお出かけ。
帰ってきてネタにできるのだろうか?
とりあえず行ってきますノシ



あなたにおススメの記事
関連記事