ソラマメブログ
< 2024年11月 >
S M T W T F S
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
読者登録
メールアドレスを入力して登録する事で、このブログの新着エントリーをメールでお届けいたします。解除は→こちら
現在の読者数 3人
オーナーへメッセージ

2007年11月01日

ヘッダ画像の差し換え方法

先ほどアップしたカスタムヘッダ:レッド(横幅可変3カラム)について、ヘッダ画像の差し換え方法を補足します。
この画像を自分の好きな画像に差し換えてオリジナルデザインを楽しんでね♪
私はデフォルト画像に、市松人形を配置しました。なんと!カワエエ!!!萌え〜〜〜

さて、まずは画像作りの注意事項です。
画像例:
ヘッダ画像の差し換え方法
・解像度は72dpiにしてください。
・画像サイズは、基本的に自由ですが、私はこのような627px×384pxの画像を使用しています。
・画像の上部でグレーになっている部分は、SLMaMeのヘッダで隠れてしまう部分です。このようにグレーにする必要はありませんが、上部を20px空けてください。
注:画像例には市松人形が居ますが、カスタムヘッダ:レッド(横幅可変3カラム)のデフォルトテンプレートでは市松人形はいませんのでご安心ください。

【画像変更手順】
1.作成した画像に半角英数字の名前をつけ、画像一覧からオリジナルサイズでアップロードします。
2.アップロードした画像を一覧から選択して表示させ、 画像のURLをコピーします。
3.テンプレート>カスタマイズをクリックし、スタイルシートのコードから、以下の部分を2でコピーしたURLに書き換えます。(赤字で表示)
body{
font-family: font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku GothicPro","Osaka","Verdana","Helvetica","Arial","MS Pゴシック","sans-serif";
font-size: 90%;_font-size: 80%;
background-image:url(http://www.slmame.com/usr/tomoyo/cst-red_main.jpg);
background-repeat:no-repeat;
background-position:top right;
color:#666;
}

(メモ帳などに一旦スタイルシートをコピーすると見つけやすいと思います。大体30行目くらいです)
あとは登録するだけです。簡単でしょ♪ やってみてね。

タグ :ヘッダ制作

Posted by Tomoyo at 00:52│Comments(9)
この記事へのコメント
記事が投稿される前に、「ここを変えればいいのかなぁ・・・」と先走って画像差し替えをしてしまっていました・・・(笑)。
これを読んでからやれば良かった・・・
スタイルシートの書き方全然知らないから、いじりたくてもどこを変えればいいのかサッパリです・・・
Posted by Kagami KohimeKagami Kohime at 2007年11月01日 01:17
画像が素敵すぎです!!!
昔HPいじって(部分的に更新)してたの思い出すなぁー。さすがトモ様風邪・・大丈夫??
Posted by jesmin at 2007年11月01日 01:58
>かがみん
ごめん!今日インターネットエクスプローラー6.0で確認したら表示が崩れてた!
早速ダウンロードしてくれたのに、申し訳ない〜><。。
修正したので、もう一度ヨロシクです。

>jesmin
ありがと〜。
葛根湯液飲んだら、だいぶ調子良くなったよ!
Posted by TomoyoTomoyo at 2007年11月01日 15:49
よかったー私も挑戦するよーー!!
Posted by jesmin at 2007年11月01日 16:45
はじめまして!
こういうの探していたんです!!
素敵ですね〜♪
自分で画像つくる楽しさが出てきました☆

さっそく使わせていただきますね♪
Posted by Achi(アチ)Achi(アチ) at 2007年11月12日 23:56
>Achiさん
こんにちは〜。使ってくれてありがとです〜^^
まだまだ種類少ないけど、ちょっとずつ頑張るからね
Posted by Tomoyo at 2007年11月14日 00:14
はじめましてぇ^^
素敵なテンプレートですねぇ
さっそく使用させて頂いております。
説明もわかりやくて助かります!
Posted by Arata at 2007年12月20日 12:08
使わせていただきました。
コードもみやすくて、今後自分でカスタマイズする時も、とても解りやすそうです。
ありがとうございました。
Posted by miki_mmiki_m at 2008年01月10日 15:17
>Arataさん
長いこと放置してました。すんません。
かわいくして、更新が楽しみになっちゃってください。

>mki_mさん
ありがとうございます☆
コードが読みやすいと言っていただけると、WEBデザイナー冥利につきます(笑)
それだけで生きてますからww
Posted by Tomoyo at 2008年01月11日 11:04
 
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。