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


念のために、現在使用中のテンプレではなく、他の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
こんな感じでよろしいでしょうかぁ?
「いや~、ワシにはわかりにくいわぁ(汗」とか
「こんな説明でわかるかいな!」とか思われる方は、その都度聞いて下さい。
さらに分かりにくかもしれないけど、頑張ってお答してみます^^;
さてこれからお出かけ。
帰ってきてネタにできるのだろうか?
とりあえず行ってきますノシ
「いや、ワシは大丈夫や!」とか勢いで行ってみる方は、そのままいっても可。
ちなみに俺は、勢いでいってみたが。
さてさて。
ブログの設定>テンプレート
で、編集したいテンプレのカスタマイズをクリック。
スタイルシートの項目の真ん中らへんが、今回の目的地。
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
こんな感じでよろしいでしょうかぁ?
「いや~、ワシにはわかりにくいわぁ(汗」とか
「こんな説明でわかるかいな!」とか思われる方は、その都度聞いて下さい。
さらに分かりにくかもしれないけど、頑張ってお答してみます^^;
さてこれからお出かけ。
帰ってきてネタにできるのだろうか?
とりあえず行ってきますノシ
Posted by お塩 at 10:11│Comments(4)
│日記
この記事へのコメント
素人には難しいけど気長にやってみます!
Posted by イツハル at 2008年06月08日 22:05
>イツハルさん
頑張ってください。
パワーアップしたブログになるのを楽しみにしときます^^
頑張ってください。
パワーアップしたブログになるのを楽しみにしときます^^
Posted by お塩 at 2008年06月09日 12:27
こんばんは、uaramamaです.
やっぱり無理です~難しい!
アイコンの事で教えてください!!
私は【かえる】のテンプレートを使っています.
お塩さんのアイコン変更の記事見てカスタムしていたのですが、高さと画像URLは自分で変更できるのですが、左からのスペース分と上余白分の変更位置が分からないのでどうしたらいいか教えてください.
【かえる】には、pedding-leftとpadding-topが見当たらないのです.
それに変わるところが分かりません・・・お時間のある時に教えてください.
ちなみに画像のリサイズは何pxに処理していますか?
やっぱり無理です~難しい!
アイコンの事で教えてください!!
私は【かえる】のテンプレートを使っています.
お塩さんのアイコン変更の記事見てカスタムしていたのですが、高さと画像URLは自分で変更できるのですが、左からのスペース分と上余白分の変更位置が分からないのでどうしたらいいか教えてください.
【かえる】には、pedding-leftとpadding-topが見当たらないのです.
それに変わるところが分かりません・・・お時間のある時に教えてください.
ちなみに画像のリサイズは何pxに処理していますか?
Posted by pokkupapa
at 2008年06月20日 22:59

こんばんは〜。
【かえる】ですね?
明日にでも見てみます^^
リサイズは…基本的にケータイの写真をアップするので、オリジナルサイズです。
デジカメ写真をアップする時は、あらかじめPCで幅350pxぐらいにリサイズしてます。
【かえる】ですね?
明日にでも見てみます^^
リサイズは…基本的にケータイの写真をアップするので、オリジナルサイズです。
デジカメ写真をアップする時は、あらかじめPCで幅350pxぐらいにリサイズしてます。
Posted by お塩 at 2008年06月20日 23:57