人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

WordPressを使っているブログ。左寄せで書いています。図を入れると、文字が右側に回ってしまいます。これを避けるために、<div style=”clear:both;></div>を使ってみたのですが、やはり、元のまま、文字が右側に回ったままです。以下、タグをそのままコピー&ペーストします。どうぞ、間違いをご指摘くださいませ。

<a href="http://tsurumaki-office.com/wp/wp-content/uploads/2014/10/8c3c101989a1eccf23cf64c6eb096b56.png"><img class="alignleft wp-image-1194 size-medium" src="http://tsurumaki-office.com/wp/wp-content/uploads/2014/10/8c3c101989a1eccf23cf64c6eb096b56-300x137.png" alt="" width="300" height="137" /></a>

<div style=”clear:both;>サーバーコントロールパネルの左側には、「お客さま情報」「サーバー情報とパスワード」…といった項目が並んでいる。5つ目の「運用に便利なツール」の中の「ファイルマネージャ」をクリックする。</div>

1412247644
●拡大する

●質問者: torimaki
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● Q-A
●30ポイント

右に回るのが不満なのはわかるのですが、どうしたいのでしょう?

左に回らせたいのなら、以下のような感じです。
<a href="http://tsurumaki-office.com/wp/wp-content/uploads/2014/10/8c3c101989a1eccf23cf64c6eb096b56.png"><img class="alignleft wp-image-1194 size-medium" src="http://tsurumaki-office.com/wp/wp-content/uploads/2014/10/8c3c101989a1eccf23cf64c6eb096b56-300x137.png" alt="" width="300" height="137" style="float:right"/></a>

最後に「style="float:right"」を入れただけです。

また、ソースに「class="alignleft」とあります。おそらくこれが、図が左による原因です。

クラスはテンプレの設定次第なのでcssのソースを見せていただかないと、確たることは申し上げられませんが、「class="alignright」にしたら、「style="float:right"」は入れなくても同じ効果があるように思います。


torimakiさんのコメント
Q-Aさん、ご回答、ありがとうございます。言葉足らずにて、失礼しました。図の右側に回る文字を、図の下に入りたいので、あります。

質問者から

& nbsp;
& nbsp;
& nbsp;
& nbsp;
というふうに、& nbsp;を続けて入れることで、図の右側ではなく、下側に文が入るようになったのですが。ただ、当方のパソコンではイメージ通りになっているものの、スマホで見たばあい、図と文のスペースが空き過ぎになっていまして。ならば...ということで<divstyle=”clear:both;>を試してみた次第です。


2 ● a-kuma3
●270ポイント ベストアンサー

質問に書かれた clear:both の書き方では、以下の問題があります。

無理矢理入れた &nbsp; を消して、以下のようにしてください。

<a href="http://tsurumaki-office.com/wp/wp-content/uploads/2014/10/8c3c101989a1eccf23cf64c6eb096b56.png"><img class="alignleft wp-image-1194 size-medium" src="http://tsurumaki-office.com/wp/wp-content/uploads/2014/10/8c3c101989a1eccf23cf64c6eb096b56-300x137.png" alt="" width="300" height="137" /></a>

<div style="clear:both;">サーバーコントロールパネルの左側には、「お客さま情報」「サーバー情報とパスワード」…といった項目が並んでいる。5つ目の「運用に便利なツール」の中の「ファイルマネージャ」をクリックする。</div> 

記述を div で括らなくても良いですし、

<a href="http://tsurumaki-office.com/wp/wp-content/uploads/2014/10/8c3c101989a1eccf23cf64c6eb096b56.png"><img class="alignleft wp-image-1194 size-medium" src="http://tsurumaki-office.com/wp/wp-content/uploads/2014/10/8c3c101989a1eccf23cf64c6eb096b56-300x137.png" alt="" width="300" height="137" /></a>

<div style="clear:both;"></div>サーバーコントロールパネルの左側には、「お客さま情報」「サーバー情報とパスワード」…といった項目が並んでいる。5つ目の「運用に便利なツール」の中の「ファイルマネージャ」をクリックする。 

br タグでやる手もあります。

<a href="http://tsurumaki-office.com/wp/wp-content/uploads/2014/10/8c3c101989a1eccf23cf64c6eb096b56.png"><img class="alignleft wp-image-1194 size-medium" src="http://tsurumaki-office.com/wp/wp-content/uploads/2014/10/8c3c101989a1eccf23cf64c6eb096b56-300x137.png" alt="" width="300" height="137" /></a>

<br clear="both">サーバーコントロールパネルの左側には、「お客さま情報」「サーバー情報とパスワード」…といった項目が並んでいる。5つ目の「運用に便利なツール」の中の「ファイルマネージャ」をクリックする。

a-kuma3さんのコメント
回答者は、みんながみんな、質問履歴をさかのぼってチェックしてくれるわけではないので、インターネット上で確認できるサイトであれば、面倒でも、質問するたびに URL を書いた方が良いと思います。

torimakiさんのコメント
Kuma3さん 参考にしたウェッブサイトの記述をそのままコピー&ペーストしたため、全角になってしまっていたようです。WordPressの編集画面に直接打ち込むことで、問題を解決することができました。教えていただいた他のタグも試してみました。あ、できますねぇ。コメントのURLの件、承知しました。末筆になりましたが、ありがとうございました。

torimakiさんのコメント
先のコメント、kuma3さんになっていました。a-kuma3さん、でした。重ね重ね、失礼しました。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ