知識、知恵のカタマリ

[PR]365日、乾かない肌へ。

解決済

記事枠(背景?)の変更について教えてください

デザインSolid State Diaryの記事を囲んでいるラインを自画背景に変えたく、自分でやってみましたが、寸足らずになってしまいました。(初心者です)
それと、現状ではコメントの文字が見えません。
どこを変更すればいいのか教えてください。よろしくお願いします。
ちなみに私が変更した箇所は下記の場所です。
#container{
width:775px;
margin:30px auto 0;
text-align:center;
word-break:break-all;
background:url(http://アップロードした画像) repeat-y 100% 0;

.permalink{}
.category{}
.titlebody{
background:url(http://アップロードした画像) no-repeat 5px 0;
height:44px;
}

また、ライン下の幅が記事によって違います。
これを同じ幅にするにはどのようにすればいいでしょうか?
よろしくお願いします。


2006-06-30 19:59の質問
この質問と回答を読んで役に立った場合は「役に立つ質問」に投票してください。投票が多い質問は、役に立つ質問一覧に掲載され、より多くの人に見てもらうことができます。
Ads By Google

回答(1)

1.

2006-07-01 09:45:49ベスト
コメントも文字色についてはCSSの
「.posted_01」「.trackbackurlbody,#trackback,#comment,#takecomment」
という項目の「color:#fff;」を他の色に指定してください。
現在の指定では背景色と同色になっています。
あと日付の下に表示される個別記事やカテゴリへのリンク表示指定「.posted_01」「.posted_01 a」「.posted_01 a:hover」の文字色「color:#fff;」も変更した方が読みやすいのではないかと思います。
同様に記事のタイトル「.title」、次のページへのリンク「.nextpage a」フォーム「.form」の文字色も変更した方が良いと思います。
CSSを変更する際には、全体のバランスや配色を考えた上で変更した方がよろしいかと思います。

ライン下の幅というのは、各記事の間の空白のことでしょうか。
見た感じコメントへのリンクから日付までの間隔は同じ20pxの余白が空いているようです。
CSSで言えば「.fullbody{padding-bottom:20px;}」の箇所です。
背景画像の表示されている部分が異なって見えているだけではないでしょうか。
一番最初の記事の下に
「<div id="ad">」で始まる段落が挿入されていて、CSSで「#ad」に「margin:20px 0;」が指定されていますので、一番上の記事の余白だけが他より大きく見えるのだと思います。
「margin:0;」にするか、
トップページの
<IfFirstArticle><div id="ad"><div id="adbody"><$Advertise$></div></div></IfFirstArticle>
を移動させれば(その際<IfFirstArticle>と</IfFirstArticle>を削除して)、他と同じ余白になると思います。
無料版をご利用の場合、削除してしまうと規約違反になります。
移動させる場合は以下のURL質問の回答が参考になると思います。
http://knowledge.livedoor.com/8348

livedoorブログの独自タグ一覧については以下のWikiの「独自タグ一覧」を参考にしてください。
http://wiki.livedoor.jp/everydaydesign/
livedoorブログをカスタマイズする際には、他のページも参考になると思います。
回答レベル : アドバイス

Hukaminさん ありがとうございます。
コメント、文字色は変更できました。

元のデザインでは赤色で各記事をコの字で囲っているのを、
赤色の部分を自画画像に変更したいのですが、どこを変更すればよいでしょうか?
また、ライン下というのは、各記事間隔ではなく、自分でいじってみたら、コの字の下の部分が記事によって高さが違ってしまうので、揃えたいのですが。
それと、左サイドにある赤色を別の色に変更するにはどこを変更すればいいですか?
よろしくお願いします。

Ads By Google

コメント(2)

#1.  Hukamin
2006-07-01 16:11:03

コの字型に画像を入れたい時は「.blogbody」に「background:url(画像のURL);」「padding-bottom:20px;」を追加し、「.date」の「padding:20px 10px 0 0;」を「padding:10px 10px 0 0;」にしてください。
あと、トップページの「<IfFirstArticle><div id="ad"><div
id="adbody"><$Advertise$></div></div></IfFirstArticle>」を削除して、「<!-- Loop End -->」の下に「<div
id="adbody"><$Advertise$></div></div>」を記述してください。

#2.  Hukamin
2006-07-01 16:16:20

左サイドの縦のラインは「.side」に「background:url(画像のURL) repeat-y;」、横のラインは「.sidebody」の「background:url(画像のURL) no-repeat 0 6px;」ですので、こちらを変更してください。
「background:url(画像のURL) repeat-y」は指定画像を縦に並べるという指定です。
ですので、「.sidetitle」は「background:url(画像のURL) repeat-x;」にした方がより適切ではないかと思います。

いずれもブログの管理画面で「デザインの変更」の「カスタマイズ」の「CSS」で確認できます。

ブログデザインのカスタマイズをしたい場合には、CSSとHTMLの勉強をした方がよろしいかと思いますが、それ以前に、どういうデザインにしたいのか、おおざっぱで良いので、ノートなどに書いてから作業した方が楽なのではないかと思います。
大変だと思いますが、頑張ってください。

トラックバック

トラックバックURL: