本文へジャンプします。

ココログサポート Top>>Questions List>>オリジナルテーマで本文の1行の幅を狭めた...

question

オリジナルテーマで本文の1行の幅を狭めたいのですが

今までリッチテンプレートのアクア（2列／サイドバー右）を使っていました。
本文の1行の文字幅を広げたいこと、行間を狭めたいこと、基本の文字色を黒にしたいこともあり、オリジナルテーマのアクアに変えてみました。
すると、行間は望み通り狭まったのですが、文字幅が広がり過ぎてしまいました。
今まで、幅いっぱいの設定でアップしてちょうどいい見え方と思っていた画像も、広がった文字幅では少し大きすぎてしまいます。

そこでオリジナルテーマのアクアを使いながら、
１）文字幅をリッチテンプレートの時と同じもしくはリッチテンプレートとオリジナルテーマの中間ぐらいの幅にする。
２）基本の文字の色を黒にする
をしたいのですがどのようにcssを設定したらいいのでしょうか。

２）に関してはカステムcssを編集を開き、
.entry-body p,.entry-more{
color:#000000;
}
を入力すればよろしいのでしょうか。

1）に関して。リッチテンプレートからすでに変更してしまっているのでリッチテンプレートのアクアの文字幅がいくつぐらいだったのかがわかりません。おそらく450pxぐらいかと思います。

どうぞご教示お願いいたします。

basic infomations

emi | 2013/04/23 21:14(4441days ago) | permalink | デザインの変更／管理

Please login to comment.

Re: オリジナルテーマで本文の1行の幅を狭めたいのですが
こんにちは。

今現在の設定が

記事表示欄の幅↓

.layout-two-column-right #alpha {
width: 750px;
}

右サイドバーの幅↓

.layout-two-column-right #beta {
width: 200px;
}

基本の文字色

body {
color:#666666;　　　←【ここ】
font-family: 'MS PGothic', 'Hiragino Kaku Gothic Pro W3', Osaka, sans-serif;
font-size: small;
line-height:1.5;
margin: 0;
padding: 0;
background: url(body_bg.gif) repeat-x 50% 0;
background-color:#C7C7C7;

}

となっていますので、それぞれご自分で適当な数値にに修正してみてください。
※修正した内容をカスタムCSSの編集に記述して保存すればOKです。

幅は記事表示欄＋サイドバーで950pxになっていますので、合計を崩さなければいくつづつに振り分けても大丈夫だと思います。
※逆に合計を崩すと変なスペースが空いてデザインが崩れます。
※全体で950pxありますので、記事欄を450pxしかとらないとサイドバーが広くなりすぎておかしなことになるのではないかと…。
※そのあたりはご自分で調整してください。
※どうしても450pxにしたいならCSSをいじるより両サイドバーにしたほうが簡単できれいだと思います。

文字色は全部書くことはないので

body {
color:#カラーコード;
}

だけでよろしいかと。

以上、ご参考まで。

no-name. | 2013/04/23 22:03(4441days ago) | permalink

Re: オリジナルテーマで本文の1行の幅を狭めたいのですが
no-nameさま。
すぐに教えてくださりありがとうございます。
全体の幅を合計950pxにした中での調整となり、本文450pxでこの合計を守ると間延びしてしまいそうなのですね。
そこでno-nameさまが挙げてくださった両サイドバーに設定して、左サイドを空白（余白がわり）、本文、右サイドという設定にしてみようと思います。


3コラムのcssを見ると
.layout-three-column #alpha,
.layout-three-column #gamma {
width: 200px;
}

.layout-three-column #beta {
width: 550px;
}
なっていますので、
もしこの本文550pxを600pxにして、左サイドをその分縮めたい場合は

.layout-three-column #alpha,{
width: 150px;
}
.layout-three-column #gamma {
width: 200px;
}

.layout-three-column #beta {
width: 600px;
}
にすればよろしいでしょうか。

重ね重ねの質問になって恐縮ですがどうぞよろしくお願いいたします。

emi | 2013/04/23 23:42(4441days ago) | permalink

Re: オリジナルテーマで本文の1行の幅を狭めたいのですが
数値的には問題ないようですが、ひとつだけ記述ミスがあります。

.layout-three-column #alpha,{
width: 150px;
}

の

#alphaのあとのカンマ（,）は不要です。
これがあるだけで数値が反映しせんので注意してください。

no-name. | 2013/04/24 06:41(4440days ago) | permalink

Re: オリジナルテーマで本文の1行の幅を狭めたいのですが
no-nameさま。

重ね重ねありがとうございます。

,不要のご指摘もありがとうございます。

早速、3列でおこなってみました。
幅は結局本文を650pxにしてみました。
ちょうど思っていた通りの幅になって助かりました。

リンク先の表示の仕方ほか、cssで微調整したいところはまだありますが、まずはメインの体裁を整えられてうれしいです。

丁寧に教えてくださって本当にありがとうございました！

emi | 2013/04/24 13:20(4440days ago) | permalink