解決済
「続きを読む」で個別記事を表示した後、無意味に行間が開きます。カスタマイズで・・
「続きを読む」で個別記事を表示した後、無意味に行間が開いてしまい、「投稿時間」「コメント」「トラックバック」が目立たなくなっています。カスタマイズでこれを調整したいのですが、おそらく個別記事HTMLかと思いますが、どのようにいじれば良いでしょうか？
念の為、私のブログは、こちらです↓
回答(2)
2.
単純に記事を書く時の " 癖 " の問題です。
例えば、2006年07月04日 のヴェニスの商人の記事。
最後の文章の・・・
とりあえず、私の教授に、これをどう思うか、恐ろしいけど聞いてみたいもんだ・・・
この文章を現在の HTML の状態で記してみますね。↓
とりあえず、私の教授に、これをどう思うか、恐ろしいけど聞いてみたいもんだ・・・<BR><BR><BR><BR></P><P></P><br>
となっています。この余分な <br> と <p> ～ </p> を削除するだけでだいぶんその間は縮まります。それをしてから、まだ、間隔が広いような気がするのであれば、CSS をさわって調整する事になります。
こんな感じで文章を、修正してみてください。↓
とりあえず、私の教授に、これをどう思うか、恐ろしいけど聞いてみたいもんだ・・・<BR>
<br> １個ぐらいでどうでしょうか？
皆様色々と有難うございました。
私のは、一番新しいテンプレートに変えたばかりですので、えむの国さまのおっしゃるように、
.main,.mainmore{padding: 15px 0 30px 14px
と、なっていました。そこで、お気楽さまの言うように、フォントとtext-align、line-heightをつけたし、0 0 0 14pxにしてみたのですが、今だ、下余白が詰まりませんでした。でもこれは、もう仕方がないと諦めるべきなのでしょう。
もしや、新しい“タグ”機能がついているせいかと思います。タグの前で、だいぶ行間が開いていますので。
blogbodyは、全く関係ないのでしょうか？
.blogbody{margin:10px 0;padding:5px 10px 40px auto;line-height:150%;text-align:left;border:0px;
と、なっています。これを念のため、paddingを0px 10px 0px autoにした状態が、現在の状態になります。
この、autoがちょっと気になります。タグの前部分が、どこかが気になりますが。
1.
コメント(16)
＞ＡＱさま
イエあの、<br><br><br>は、一個もやっていないんでございますのよ。
で、やっぱりＣＳＳなのですね。念の為、ＣＳＳを見てみたのですが、どこがブラブラしちゃってるんでしょう！？
おそらく、ｂｏｄｙがブラブラしちゃってるんですよネ。
念の為、個別記事も見てみましたが、やはり、ブラブラしてる箇所がみつけられません・・・。
＞ＡＱさま
イエあの、<br><br><br>は、一個もやっていないんでございますのよ。
で、やっぱりＣＳＳなのですね。念の為、ＣＳＳを見てみたのですが、どこがブラブラしちゃってるんでしょう！？
おそらく、ｂｏｄｙがブラブラしちゃってるんですよネ。
念の為、個別記事も見てみましたが、やはり、ブラブラしてる箇所がみつけられません・・・。
ちなみに、もう一度「ヴェニス」記事をブラブラを消して、再構築にかけましたが、やはりブラブラしています。
ん？ とらねこさん。
ゆっくり話し合おうね (^^)
CSS でもなく、HTML でもなく、投稿記事だよ？
初めから HTML に <br> などを書き込んでいないのでしたら、自動的に <br> は、付かないですよ。
その <br> に関しては、絶対に CSS は関係ないです。
" 投稿記事 " を確認して下さい。
あっ！ ↑このコメント書き込んだ後にわかった！
管理画面 ＞ カスタマイズ/管理 ＞ の設定画面の中で、
『 投稿フォームの設定 』 のところで、" 改行をそのまま
反映 " にチェックいれているでしょう？
だから、自動的に投稿記事の文末の空白行のところで
<br> が自動的に入っているんだ ^^;
該当する投稿記事のところに入って、記事文末のところの
空白行を Delete していってみて下さい。
>ＡＱさま
やはり・・「ヴェニス」の記事で、確認してみたんですが。
＞投稿記事の文末部分
を消しても、このようになってしまうのです。もう一度やってみたんですが・・・だめでした。
http://knowledge.livedoor.com/2570
にありました。
padding:0px 15px 0px;
>>#7
すでに答えが出ていましたね！実験していたのですが、参りました。
一応補足しておきますと、
.main,.mainmore{ のところにあるpadding: 15px 0 30px 14px; は
padding: 上余白 右余白 下余白 左余白;という意味です
だから上余白と下余白をつめてやれば思ったデザインに近づきます
padding: 0 0 0 14px;といった感じでしょうか？
ただし間に
<div>による境目があるため、完全には詰まりません
後は人気ブログランキングの後のコメントを短くすることでしょうか
猫マークだけ次の段にいっているので、その分空白が広く見えます
それとカスタマイズの個別記事のところで
<$ArticleBody$><br><br clear="all">の<br>を消去すればその分は詰まります
(<br clear="all">は残しておいたほうが無難と思います)
Σ( ﾟ∀)ｹﾞｯ!! うそ～
なんでこの回答でベストが付いてるの？
ダメですよ、とらねこさん^^;
解決していないのに、ベスト出しちゃ。
回答者としてはずかしいです (>_<)
このままでは終われないので、もう一度検証してみます。
もう一度、ヴェニスの商人の記事のソースを見て確認しました。
私が初めに見た時と違い、だいぶん行間は縮まっていました。
やはり、コメント >>#5 の件が一部関係している事は間違いないです。現在の 『 ヴェニスの商人 』 のソースでは、記事文末に余分な <br> は無いですから。他の記事には当然ソース内に残されています。
さて、その部分を Delete されて次ですが、言われているとおり、blogbody の margin が若干関係しています。これは現在の blogbody の記述です↓
.blogbody{
margin:10px 0;
padding:0px 10px 0px auto;
line-height:150%;
text-align:left;
border:0px;
}
これの margin を少し変更します。こうです↓
.blogbody{
margin:10px 0px 0px;
padding:0px 10px 0px auto;
line-height:150%;
text-align:left;
border:0px;
}
これでやってみて下さい。
縮まっているかどうかの確認は、ヴェニスの商人の記事だけで確認して下さい。他の記事では文末に複数の <br> が残されているので参考になりませんから。
それと、えむの国さん、POPさん、私がいない間に補足で回答していただきありがとうございます。.main,.mainmore の padding の調整があったからだいぶん縮まっているのはわかっているのですが ・・・
みなさん、一度、Firefox や Netscape などの、Mozilla 系で閲覧してみて下さい。Mozilla 系は縦の解釈が IE と違います。IE でピッタシサイズになっても Firefox などでは、重なったり崩れたりします。現在も、上部に置かれている画像と記事が重なっています。
そこで、とらねこさん。
.main,.mainmore と blogbody で変更した padding の " 上 " に関する数字は元に戻して下さい。さわるのは、" 下 " に関する部分だけにして下さい。
.main,.mainmore は padding: 15px 0px 0px 14px
.blogbody は padding:5px 10px 0px auto; です。
わからなくなったら、以前のカスタマイズ部分の CSS と HTML をバックアップ、そしてデフォルトに戻す。そしてもう一度やり直す。これが基本です。
デフォルトテンプレートにある " 余白 " は、ある程度のブラウザーでの閲覧を考えられて作られた余白です。ひとつのブラウザーで検証しながらカスタマイズすることは、危険ですしお薦めしません。
>>#12 #13
そうでした。画像のことを失念していました、すみません。
しかしこれはすべての修正をする前からFirefoxでは重なっていました。
ただ、私の修正でかぶりが大きくなってしまいました。
画像を
<img src="(画像URL)" width="160" height="120" border="0" alt="表示文字">にしてもらえるといいのですが……
後は
#banner
の height: 214px; を変えるくらいでしょうか
>>#13
うわぁ～ (>_<) POP さんじゃなかった、お気楽さんでした ^^;
すみません！ カン違いして名前出しちゃって ^^;
>>#15 えむの国さん
しかしこれはすべての修正をする前から Firefoxでは重なっていました。
そうだったんですか。その時点では、Firefox では
確認していなかったです。
いずれにしても、同じテンプレートを選択して検証してみた結果、私のブログではご質問のような広い空白行は出てこなかったんです。ここは、もう一度デフォルトに戻し、根本的におかしくなった原因のカスタマイズは何なのかを見つける方が良いかと思います。
>_<。。
皆さま、ご丁寧に本当にありがとうございました！！
せっかくいろいろご回答いただいたのに、すぐに出来ずにすみませんでした！！
確認しましたところ、すべて解決できた様です。
なんというべきか・・・お礼の言葉もございません。
本当に有難うございました。
