さっそくKamimuraさんに教わった方法をまねして
ブログタイトルまわりを写真に変えてみました。
使った写真はこの時のもの...
この画像を、90度、時計と逆まわりに回転させ
J-trimを使って適当にトリミング。（実は背景のサイズも写真をそのサイズにあわせて切り出すすべもわかりません...)
以下は神村的日常から、引用させていただきまっす！
background: #ffffff url(http://servernourl/gazou.jpg) no-repeat
#ffffff…背景画像の背後の色(だと思う)をコードで入力
http://servernourl/gazou.jpg…画像のURL
この文を、テンプレートの定義部の、背景画像を表示したいパーツに挿入する。
#header {
width:720px;
margin:0 auto 10px;
border:1px solid #ccc;
background: #ffffff url(http://servernourl/gazou.jpg) no-repeat
}
もともとのテンプレートが違うので、すっかり同じようにはいかないようす。
私の場合は、2箇所に画像を入れました。（グリーンの箇所が画像の位置です。）
/* Header */
#blog-header {
color: #fef;
background: #e8b url(http://www.blogblog.com/moto_ms/headbotborder.gif) bottom left repeat-x;
margin: 0 auto;
padding: 0 0 15px 0;
border: 0;
}
#blog-header h1 {
font-size: 24px;
text-align: left;
padding: 15px 20px 0 20px;
margin: 0;
background-image: url(http://www.blogblog.com/moto_ms/topper.gif);
background-repeat: repeat-x;
background-position: top left;
}
正直に言うと、サイズのことがわからないまま"えーい！やってみるか！"と勢いで変更したのでこれで良かったのかどうかわかりません^^;
でも、やり方がわかってうれしいです（○^0^○）//
kamimuraさん、お察しのとおり、こちらで試してみましたょ。
チャンチャンっと（笑）
2 comments:
カッコ良いですね！
cavacavien さんは抽象的な画像にもセンスがありますね。
普段の写真も綺麗だし。
で、画像サイズの件ですが、「ウラブログforbidden chat」のコードを拝見したところ(※)、690pxでいけるんじゃないかと…。
(根拠)
#wrapper {
・
・
width: 690px;
・
・
}
私も良く判っていないので、適当な推測です。
クリボウさんや@akaさん、satomiさんなら、ビシッと答えをくれると思うのですが…。
あと、画像の縦方向の幅なのですが、description(このブログなら「Webの世界若葉マークの…」の部分)の長さが、ブログによって異なるので、適宜、合わせてみるしかないみたいですね。
あと、ヘッダー部分なのですが、このブログの場合は、次のように推測しています。
・#blog-header→ヘッダー全体(タイトルとdescriptionをあわせた全体)
・#blog-header h1→ヘッダーのタイトル部分(ウラブログforbidden chat)のみ
恐らく、#blog-headerで挿入した画像を、#blog-header h1の画像が上書きしていると思います。
あくまで、推測です(笑)。
同じ手を使うと、「ちゃめのBlog」のコメント表示部分のように、単独ページのコメントの背後のみとかにも、画像を表示する事ができますよ。
※：
ご存知かと思いますが、キツネだと「"表示"＞"ページのソース"」で、HTMLを表示する事ができます。
役に立つかどうか判りませんが、お邪魔しました。
いやー。どーなるかな？と思って行き当たりばったり（いつものことですが）で。
なんかウラってかんじの絵になってしもた（笑）
#690px;また、みてみますー。
> 恐らく、#blog-headerで挿入した画像を、#blog-header h1の画像が上書きしていると思います。
#blog-headerに挿入したらdescriptionのほうだけに反映されたんです #blog-header h1タイトルのほうはもう一回同じのを、はっつけちゃいました（笑）もう、ここはサイボーグ状態ですよー。
ちょっと休憩。またいじると思いますがそのうちマイケルみたいになんじゃー？？ってことになるんじゃないかと･･･
どうもありがとう！です！
Post a Comment