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行目くらいです)
あとは登録するだけです。簡単でしょ♪ やってみてね。
この画像を自分の好きな画像に差し換えてオリジナルデザインを楽しんでね♪
私はデフォルト画像に、市松人形を配置しました。なんと!カワエエ!!!萌え〜〜〜
さて、まずは画像作りの注意事項です。
画像例:
・解像度は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 Kohime at 2007年11月01日 01:17
画像が素敵すぎです!!!
昔HPいじって(部分的に更新)してたの思い出すなぁー。さすがトモ様風邪・・大丈夫??
昔HPいじって(部分的に更新)してたの思い出すなぁー。さすがトモ様風邪・・大丈夫??
Posted by jesmin at 2007年11月01日 01:58
>かがみん
ごめん!今日インターネットエクスプローラー6.0で確認したら表示が崩れてた!
早速ダウンロードしてくれたのに、申し訳ない〜><。。
修正したので、もう一度ヨロシクです。
>jesmin
ありがと〜。
葛根湯液飲んだら、だいぶ調子良くなったよ!
ごめん!今日インターネットエクスプローラー6.0で確認したら表示が崩れてた!
早速ダウンロードしてくれたのに、申し訳ない〜><。。
修正したので、もう一度ヨロシクです。
>jesmin
ありがと〜。
葛根湯液飲んだら、だいぶ調子良くなったよ!
Posted by Tomoyo at 2007年11月01日 15:49
よかったー私も挑戦するよーー!!
Posted by jesmin at 2007年11月01日 16:45
はじめまして!
こういうの探していたんです!!
素敵ですね〜♪
自分で画像つくる楽しさが出てきました☆
さっそく使わせていただきますね♪
こういうの探していたんです!!
素敵ですね〜♪
自分で画像つくる楽しさが出てきました☆
さっそく使わせていただきますね♪
Posted by 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_m at 2008年01月10日 15:17
>Arataさん
長いこと放置してました。すんません。
かわいくして、更新が楽しみになっちゃってください。
>mki_mさん
ありがとうございます☆
コードが読みやすいと言っていただけると、WEBデザイナー冥利につきます(笑)
それだけで生きてますからww
長いこと放置してました。すんません。
かわいくして、更新が楽しみになっちゃってください。
>mki_mさん
ありがとうございます☆
コードが読みやすいと言っていただけると、WEBデザイナー冥利につきます(笑)
それだけで生きてますからww
Posted by Tomoyo at 2008年01月11日 11:04