ブログ記事に 詩などをアップした場合に
一行が短すぎてスカスカに見えることがあります。
(記事カラムの幅は550pxで、FC2ブログです)
そうした場合だけ
記事内に段落を同じ行数で
左右2列に配置したいのですが
たとえば
<p style=××>~</p>
<div style=××>~</div>
このような形で配置できないものでしょうか。
また
段落タグは無理でも
箇条書きリストやテーブルを使えば
希望の表示になるのでしょうか。
できれば
記事内への記述のみで対応できればと考えていますが
テンプレートのHTMLやCSSの編集も可能です。
よろしくご教示いただけますようお願いいたします。
No.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行にする。
箇条書きは、リストだし、テーブルは、表なので、
詩や文章などをそれらでマークアップするのはおかしいですよ・・・
詳しい記述例を二通りも紹介してくださって
ありがとうございます!
紹介いただいた文字列をお借りして
記事を書いてみたら、思ったとおりの表示になりました!
かさねてお礼申し上げます。
No.1
- 回答日時:
CSSで記述するのは ここで説明するにはちょっと大変かと。
別途「段組み CSS スタイルシート」などで検索し勉強。
簡単には TABLEタグの利用かと。
例えば
<TABLE>
<TR>
<TD width="220" valign="top">
一列目の内容<BR>
ここに 詩などを<BR>
</TD><TD width="220" valign="top">
2列目の内容
</TD>
</TR>
</TABLE>
枠線等は必要に応じて 別途検索して勉強。
テーブルタグと相性が悪くて
ちっとも頭に入らなかったのですが
こんなにシンプルに出来るものなんですね。
勉強になりました。
ありがとうございます!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
FC2ブログテンプレートについて...
-
「fc2ブログへようこそ」を消す...
-
三つ折りのリーフレットを作りたい
-
gooブログ の 下書きの保存 方法
-
コメント部の文字の大きさを変...
-
<至急お願いします!>Wordでテン...
-
wordpressの投稿ページの格納場所
-
自動保存機能について
-
画面の右側にコメントをいれたい。
-
画面を書き換えたいが、やりか...
-
FC2ブログ。過去ログをテーブル...
-
あらかじめ用意したテンプレー...
-
word個人用テンプレートの削除方法
-
Seesaaブログで記事内に表を載...
-
Becky!ver.2で、返信・転送用テ...
-
Wordpressの投稿記事に関する公...
-
アメーバブログのカスタマイズ...
-
tableの中のtableの表示と外側...
-
Word Press内に、HP制作を作成...
-
FC2ブログ【トップページ作成】...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ライブドアブログにおいて記事...
-
中央寄せの解除
-
エキサイトブログで挿入画像を...
-
ライブドアブログのサイドバー...
-
アメブロ。日記から本文がはみ...
-
アメブロでブログタイトル上部...
-
tumblrをやっている方、jsやcss...
-
スタイルシートの使い方について
-
HEAD・HTMLの行間改行が上手く...
-
bloggerブログで画像の枠を消す...
-
FC2ブログで引用に背景色をつける
-
MT4のタイトルを一枚画像(バナ...
-
wordpress カスタムフィールド...
-
ブログ記事内に文章を左右2列に...
-
右サイドバーが下に落ちてしまう
-
お世話になっております。fc2で...
-
FC2 HTML編集について
-
FC2ブログ タイトルの文字を...
-
fc2ブログで記事とサイドバーに...
-
2beeブログで行間と文字の間隔...
おすすめ情報