【初月無料キャンペーン中】gooドクター

ブログ記事に 詩などをアップした場合に
一行が短すぎてスカスカに見えることがあります。
(記事カラムの幅は550pxで、FC2ブログです)

そうした場合だけ
記事内に段落を同じ行数で
左右2列に配置したいのですが

たとえば
<p style=××>~</p>
<div style=××>~</div>
このような形で配置できないものでしょうか。

また
段落タグは無理でも
箇条書きリストやテーブルを使えば
希望の表示になるのでしょうか。

できれば
記事内への記述のみで対応できればと考えていますが
テンプレートのHTMLやCSSの編集も可能です。

よろしくご教示いただけますようお願いいたします。

gooドクター

A 回答 (2件)

別に難しくはないですよ。

ただ、
>記事カラムの幅は550px
これが怪しいので、崩れる可能性はありますよ。
その場合は、width:250px;などを小さくする。
元々のCSSが効いていれば、margin:0;border:0;を入れる。

その他、工夫次第で細かいデザインは好きに出来ます。

枠組みだけで、単純なのが、以下。
----------------------

<div style="float:left; width:250px; padding: 0 12px;">
<p>詩1</p>
</div>
<div style="float:left; width:250px; padding: 0 12px;">
<p>詩2</p>
</div>
<div style=" clear:both;">
<p>締めの一言</p>
</div>

----------------------
かなりの頻度で利用するなら、クラス + 外部CSSで簡素化。

<div class="si"><p>詩1</p></div>
<div class="si si2"><p>詩2</p></div>
<div class="si3"><p>締めの一言</p></div>

/* 外部CSSに以下を追記 */
div.si{ float:left; width:250px; padding: 0 12px;}
div.si2{ border-left:1px dashed silver;} /* 真ん中に縦線 */
div.si3{ clear:both;}

-----------------
注意 ※ 投稿画面が自動改行設定の場合は、タグ間で改行せずに1行にする。

箇条書きは、リストだし、テーブルは、表なので、
詩や文章などをそれらでマークアップするのはおかしいですよ・・・
    • good
    • 0
この回答へのお礼

詳しい記述例を二通りも紹介してくださって
ありがとうございます!
紹介いただいた文字列をお借りして
記事を書いてみたら、思ったとおりの表示になりました!
かさねてお礼申し上げます。

お礼日時:2011/07/19 19:48

CSSで記述するのは ここで説明するにはちょっと大変かと。


別途「段組み CSS スタイルシート」などで検索し勉強。
簡単には TABLEタグの利用かと。
例えば
<TABLE>
<TR>
<TD width="220" valign="top">
一列目の内容<BR>
ここに 詩などを<BR>
</TD><TD width="220" valign="top">
2列目の内容
</TD>
</TR>
</TABLE>
枠線等は必要に応じて 別途検索して勉強。
    • good
    • 0
この回答へのお礼

テーブルタグと相性が悪くて
ちっとも頭に入らなかったのですが
こんなにシンプルに出来るものなんですね。

勉強になりました。
ありがとうございます!

お礼日時:2011/07/19 19:50

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

gooドクター

人気Q&Aランキング