忍者ブログ
TMP*blog
  • « 01月 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  •  »
January 17'2017
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

November 12'2006
画像の回り込みについて。
回り込みと言うのは下の画像のように画像の横に文字などがある状態です。
方法はスタイルシートであったりHTMLであったり様々ですが、今回は記事内の話にしぼるのでHTMLのほうを。
(文字だけでなく他にも色々置けますし、画像以外にも指定できます)


回り込み自体は記事の投稿をHTMLエディタで行っていればかなり簡単にできるものです。(そういうボタンがついてますので)
で、じゃあ問題ないじゃないと思われがちなんですけども、実はこの回り込みと言う物は
解除する必要があるのです。
回り込みは簡単にできるのに、解除を簡単に行うボタンがついていなかったので少々ご説明を。

まずは回り込みを解除しなかった場合に起こりえる問題を。
HTMLエディタの「雛形」を利用して「回り込み解除のタグを追加しなかった場合」です。
普通に使用するとソースはこうなっています。
オレンジ色が回り込みの指定です。
<img width="100" height="100" align="left" alt="" style="margin-right: 10px;" />
<h3>Type the title here</h3>
Type the text here
実際の表示はこんなかんじ。

記事内の文字の量が少ないとこうなります。画像の下にまで文字があふれ出る状態であれば記事枠からはみ出すといった状況にはなりませんが、画像とちょっとした言葉を…なんて場合にはこうなります。

で、これに回り込みの解除タグを追加するとどうなるか。
赤文字が回り込みを解除するための部分です。
<img width="100" height="100" align="left" alt="" style="margin-right: 10px;" />
<h3>Type the title here</h3>
Type the text here<br clear="all">
スッキリ枠に収まります。

解除タグを追加するかしないかで、他が同じでも見た目にこれだけの差がでてくる事になります。
<br clear="all">はHTML4.01では非推奨要素とされていますが、使えるものは使っていったほうが良いとわたくしは思っております。
また、これ以外にもスタイルシートで回り込みを解除する方法なども色々ありますので、非推奨要素が気になる方はそっちのほうも調べてみるといいかもしれません。
記事に画像を多く扱われる方で記事のレイアウトにもこってみたいと言う方はこの「回り込みの解除」も覚えておくと思い通りのレイアウトに近づけるのではないかと思います('-'*
記事内にテーブルを使ってテーブルでレイアウトする方法なんかもありますが、基本的にはテーブルはあまり多用しないことをオススメ致します。
一見便利ですが、テーブルがブログのレイアウトを崩す原因になったりもしますので。

わたしは<br clear="all">をPCの辞書に登録して「かいじょ」で変換できるようにしてあります。よく使うタグとかは辞書にいれてしまうと非常に便利でございます。

この解除をスタイルシートのほうであらかじめこっちで指定しておくことも可能ではあるんですが…。
それで回避できるのは記事の最後にあるものだけなんでして…orz
根本的な解決にはいたらないような気がします(・ω・`

回り込みを指定する、指定したら解除する。その二つがセットであると思っていれば問題ないかもしれません。

拍手

PR
Post your Comment
・メールアドレスは入力しても管理画面でしか表示されないようにしてあります。
・テンプレートのカスタマイズはなるべく自力でお願いします。
・テンプレートに関するお問い合わせの際はブログアドレスの記入をお願いします。
・アダルトな内容、英語のみの内容のコメント、トラックバックはできません。
・不適切な書き込みは管理人の独断で削除させて頂きます。あらかじめご了承ください。
Name:
Title:
Mail:
URL:
Color:
Comment:
pass: emoji:Vodafone絵文字 i-mode絵文字 Ezweb絵文字
trackback
・言及リンクを含まないトラックバック、記事内容が英語のみのトラックバックはできません。
この記事のトラックバックURL:
Blogpetの可愛さに惹かれて、赤貧を顧みずプラチナオーナの登録をしました。広告が出なくなり、公式以外のフレームが使えるようになり、ペットが短冊を残してくれたりします。でも諸事情により桃うさぎだけーーー!(笑) 
茶々猫カンタービレ 2006/12/04(Mon) 11:36
[109] [107] [106] [103] [102] [100] [101] [99] [98] [97] [96
«  BackHOME : Next »

About this site
  • 「忍者ブログ」と「忍者式メールフォーム」のテンプレートを作成配布しています。
search this site
Web clap!
拍手する

カスタマイズに関する質問を拍手で送信するのはどうかご遠慮ください。

PR

» Link Menu

» Other Menu

RSS
あわせて読みたい
Recommend


line

相変わらず常備するお気に入りの「牛とろフレーク」最近また入手困難で、確保に必死です^-^;


TMP*blog@koro wrote all articles.
TemplateDesign by TMP photo by たいしたことないもの

忍者ブログ[PR]