ブログ記事に 詩などをアップした場合に
一行が短すぎてスカスカに見えることがあります。
(記事カラムの幅は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ブログで横幅を広げタイトル...
-
記事の見出しタイトル
-
ワードプレスを使用して作成し...
-
2beeブログで行間と文字の間隔...
-
三つ折りのリーフレットを作りたい
-
FC2ブログでプロフィールが2つ...
-
ホームページビルダーのナビゲ...
-
紙だけで立つタイプのメニュー...
-
ブログの一番上に常に同じ記事...
-
wordpress,simplicity スマホ時...
-
テンプレート編集にモジュール...
-
gooブログのテーブル崩れ助けて...
-
楽天アフィリエイトについて 現...
-
fc2掲示板 「メッセージ表示...
-
fc2ブログで、記事の文章を中央...
-
Excelのクールな調査報告書テン...
-
文字に背景色を入れる時、隙間...
-
FC2ブログ、追記の編集が出...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ライブドアブログのサイドバー...
-
中央寄せの解除
-
ライブドアブログにおいて記事...
-
WordPressのヘッダー上部の余白
-
fc2ブログのアクセス解析がう...
-
wordpress カスタムフィールド...
-
gooブログの画像を背景に文字を...
-
ワードプレス、cocoonでタイト...
-
ライブドアブログで字間を変えたい
-
アメブロ。日記から本文がはみ...
-
アメーバブログの両サイドの余...
-
アメーバのブログ 画像の貼り付け
-
bloggerブログで画像の枠を消す...
-
エキサイトブログで挿入画像を...
-
ライブドアブログのまとめブロ...
-
ブログのデザインがずれる原因
-
ワードプレスでタイトルの字数...
-
CSS html ブログの横幅の編集
-
タグ
-
ブログ記事内に文章を左右2列に...
おすすめ情報