ブログ記事内に文章を左右2列に配置したい

質問

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

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

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

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

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

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

回答No.2

naokita · ベストアンサー

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

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

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

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

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

<div class="si"><p>詩１</p></div>
<div class="si si2"><p>詩２</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;}

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

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

お礼

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

回答No.1

pai3_14

CSSで記述するのは　ここで説明するにはちょっと大変かと。
別途「段組み CSS スタイルシート」などで検索し勉強。
簡単には TABLEタグの利用かと。
例えば
<TABLE>
<TR>
<TD width="220" valign="top">
一列目の内容<BR>
ここに　詩などを<BR>
</TD><TD width="220" valign="top">
2列目の内容
</TD>
</TR>
</TABLE>
枠線等は必要に応じて　別途検索して勉強。

お礼

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

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