解決済
Ads By Google
Business style2カラムのヘッダーのデザインを変えたいのですが、どちらのを参考にしてもうまくいきません。どなたか教えていただけませんか？
ｃｓｓのどこをどのように変えたらいいのでしょうか？
2007-07-27 13:43の質問
この質問と回答を読んで役に立った場合は「役に立つ質問」に投票してください。投票が多い質問は、役に立つ質問一覧に掲載され、より多くの人に見てもらうことができます。
回答(2)
1.
2007-07-27 17:15:02
カスタム内容が分からないのでとりあえず簡単に挙げておきます。
最上部のライブドア関連のラインは削除不可なので説明は割愛します。
ヘッダーの背景画像の中央部が、ここのbackground要素で指定されているが重要です。
ここにヘッダーと重なるように背景画像が指定されているのが重要です。
最上部のライブドア関連のラインは削除不可なので説明は割愛します。
#bannerヘッダー部分全体のスタイルです。
#banner aヘッダー内のリンク文字のスタイルです。
#banner a:hoverヘッダー内のリンクにマウスを置いたときのスタイルです。
#cgmmenuタブメニュー全体のスタイルです。
ヘッダーの背景画像の中央部が、ここのbackground要素で指定されているが重要です。
background:url(http://parts.blog.livedoor.jp/img/usr/business_style_2c/banner.gif) no-repeat 50% 0;
#cgmmenu ulタブメニューのulタグ（リスト全体）のスタイルです。
#cgmmenu ul li上記ulタグ内のliタグ（各リストの行）のスタイルです。
#cgmmenu ul li a上記liタグの中にあるリンクのスタイルです。
#cgmmenu ul li a:hover上記リンクにマウスを置いたときのスタイルです。
bodybody=ページ全体のスタイルです。
ここにヘッダーと重なるように背景画像が指定されているのが重要です。
background:#ececec url(http://parts.blog.livedoor.jp/img/usr/business_style_2c/header.gif) repeat-x;
imgさん、この回答ではなく次に詳しくコメントしてくださったぶんでよくわかりました。本当にありがとうございます。ただ、タイトルバナーの大きさはもとの画像と同じにしたら、実際には下地が両端からみえてしまいましたので、横幅を大きくしました。
解決しました。感謝です。
2.
2007-07-28 06:26:48
html+cssになれていないユーザーにとってオリジナルデザイン作ることは大変なこととおもいます。
imqさんもわかりやすい説明です。
この件ですが、私が思うことは「スタイルシート」内の
「background:ul(http://image.blog.livedoor/～/～.jpg《もしくは.gif》」等のように
.jpg
.gif
と記載されているURL全てを確認してみると
非効率ですがcssデザイン構成がわかると思います。
めんどくさいと思いますが
「いいデザインのブログを作りたい！」という
意志があれば必ずできます。
imqさんもわかりやすい説明です。
この件ですが、私が思うことは「スタイルシート」内の
「background:ul(http://image.blog.livedoor/～/～.jpg《もしくは.gif》」等のように
.jpg
.gif
と記載されているURL全てを確認してみると
非効率ですがcssデザイン構成がわかると思います。
めんどくさいと思いますが
「いいデザインのブログを作りたい！」という
意志があれば必ずできます。
Ads By Google
コメント(6)
さっそくご回答ありがとうございます。ひとつひとつ説明してくださってありがとうございます。ですが、わたしが変えたいのは、ヘッダー部分にあるタイトルを載せる画像を自前のにかえたいのですが、わたしが使用しているBusiness style2カラムの、
#bannerの部分には今使われている画像のurlはありませんし、テンプレートによって訂正する部分が違うのだなとわかりました。そこでbusiness style 2カラムのどこをどういう風に直すと指摘してくださると
助かるのですが・・・・
#2. imq
2007-07-28 02:07:37
手順の概要は以下のとおりです。
1.画像を作成する
2.ブログに画像をアップロードする
3.CSSで画像を差し替える
ですが、このデザインの場合少し厄介なのが画像が二重構造になっていることです。とりあえず楽な方法で実現可能な、二重の後ろの画像を消してしまうという方針で書いてみます。
#3. imq
2007-07-28 02:19:21
まず画像の作成ですが、現在の画像
http://parts.blog.livedoor.jp/img/usr/business_sty...
と同じ大きさで作成してください。
次に作成した画像をブログにアップロードします。
管理画面から
ブログの投稿 -> ファイルのアップロード -> ファイルをアップロードするでPCの該当するファイルを選択してアップロードします。
次に『ファイルのアップロード/管理』画面でアップロードしたファイルをクリックするとファイルがブラウザで開きますので、アドレスバーに表示されるURLをコピーしておきます（ただし、?blog_id=とそれに続く数字の部分は不要です）。
#4. imq
2007-07-28 02:39:12
CSSは以下の部分を修正します。
#cgmmenuのbackground要素
background:url(アップロードした画像のURL) no-repeat 50% 0;
bodyのbackground要素をコメントアウト
//background:#ececec url(http://parts.blog.livedoor.jp/img/usr/business_style_2c/header.gif) repeat-x;
あとは「クリップ」「ピクス」などのタブメニューがはみ出すかと思います。画像も新しいものとは繋がらないと思いますので、とりあえず消してみます。
#cgmmenu ulの中に以下の1行を追加してください。
display:none;
一応こちらの都合で書いてしまったところがありますので、もっと詳細を詰めたければコメントしてください。
#5. imq
2007-07-28 02:42:55
#6. imq
2007-07-28 20:24:26
どういたしまして。
ベストありがとうございました。
