![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
ブログ記事に 詩などをアップした場合に
一行が短すぎてスカスカに見えることがあります。
(記事カラムの幅は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で質問しましょう!
似たような質問が見つかりました
- gooブログ ブログの記事を書きだしのみに表示したい 1 2022/06/25 19:11
- デスクトップパソコン QRコードの作り方と可能な範囲。 4 2022/11/13 13:46
- WordPress(ワードプレス) WordPress のブログを初期化したい。リスクは? 1 2023/01/01 05:47
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- その他(ブログ) シーサーブログのタイトル文字位置とブログ説明文字位置の変更方法 2 2022/09/22 20:55
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- HTML・CSS HTML、cssのatomつぅーやつで 課題Ex1ってやつを表示させたいのですが、 私は課題Ex1が 2 2022/12/15 16:56
- その他(プログラミング・Web制作) ワードプレスのプラグインであるAddQuicktagを使いたいが… 3 2022/04/18 15:03
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
FC2は信用度は大丈夫ですか?
-
FC2ブログってログインせず放置...
-
FC2ブログ、管理画面への不正ア...
-
fc2動画で共有した動画をスマホ...
-
FC2ブログに登録をしていない人...
-
Fc.2動画って有料ですか、無料...
-
アベマブログでこちらの設定が...
-
FC2の掲示板を利用しています。
-
洗濯タグの画像
-
ブログでランキング、順位が上...
-
FC2ブログで文字を小さくしたい...
-
FC2ブログでプロフィールが2つ...
-
「教えてgoo」と、中古車販売の...
-
比較のしようがありませんが、...
-
mbti教えてください
-
元カレが自分の写真を
-
ブログは記事が更新されたら読...
-
テキスト版からURLも表示できる...
-
フロッグフォビアとはなんですか?
-
ブログの記事を勝手に消された...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
wordpress カスタムフィールド...
-
ブログのデザインがずれる原因
-
ライブドアブログにおいて記事...
-
WordPressのヘッダー上部の余白
-
タグ
-
ブログの背景色について
-
CSS疑似フレーム内の文字色の指...
-
FC2ブログで横幅を広げタイトル...
-
アメーバのブログ 画像の貼り付け
-
FC2ブログ タイトルの文字を...
-
記事の見出しタイトル
-
FC2ブログ プロフィールイラス...
-
アンドロイドで文字が左に偏る。
-
fc2ブログで記事とサイドバーに...
-
ブログ記事内に文章を左右2列に...
-
FC2ブログの右サイドバーが落ちた
-
ロリポブログのcss:センターに...
-
ブログのメイン記事の幅を広げ...
-
MovableTypeのサブカテゴリ字下...
-
MovableTypeでCSSにコメントを...
おすすめ情報