戯れ言葉

画像の横に文章を回り込ませる為に私がやってる方法

カテゴリ:FC2ブログの色々とカスタマイズとか
タグ:

画像の横に文字を回り込ませる手法で、私がやってる方法を書いてみます。

ただこの方法はレスポンシブ対応のテンプレでないと記事通りの表示にはならないかもしれません。

過去記事で書いた例ですが

1/4W 1% 金属皮膜抵抗

1%抵抗の5本の色帯は分りにくい。

4本帯は右側がいくらか空いているので判別は容易です。

カラーコードの付いた抵抗

で、5本の色帯の見方は、抵抗をよく見ると、色帯の前4本と、後ろの1本は間隔が微妙に違うのでそれで読みます。

で、判らなければ、右端に誤差1%を示す茶色を持ってきて、そうやって左から読む。

ちなみに1kΩ(右下の画像)は、茶黒黒茶茶。

ではその反対の茶茶黒黒茶は 110Ω! こんな抵抗ありそうですね。

他には、11kΩは茶茶黒赤茶。逆は茶赤黒茶茶で1.2kΩ。

こんな具合です。4行目以降で回り込みの処理をしています。

以前の技術系の記事でよく使っていましたが、その時は画像の横に文字というよりは、記事の左右のどちらかに画像や表を挿入するというイメージの方が適していると思います。

画像の横に文字を回り込ませたい時にはCSSの float というプロパティを使います。

MDN web docs:float  には、要素を包含ブロックの左右どちらかの側に沿うように設置し、テキストやインライン要素がその周りを回りこめるように定義します。 とあります。

更にこの記事を、ブラウザを縮小表示にし、ブラウザのウィンドウの横幅を動かしどんな具合になるかを確認してみて下さい。

こうやると、画像が縮小され、画像の横の文字がどの様な挙動をするかが確認していただけると思います。

画像は右に寄せるか、左に寄せるかが選択できますが、画像が右のある方が文字の表示は自然になります。

例えば画像が記事エリアの半分で右に表示する場合は

ここに文章を書きます
2行目
3行目





いろはにほへとちりぬるをわかよたれそつねならんうゐのおくやまけふこえてあさきゆめみしゑひもせす

ブラウザの横幅を狭めて、最後の文字の回り込みがどうなるかを体験してみて下さい。

次に画像を左に表示させると

ここに文章を書きます
2行目
3行目





いろはにほへとちりぬるをわかよたれそつねならんうゐのおくやまけふこえてあさきゆめみしゑひもせす

画像の高さよりも文字部分の高さが大きくなった時、つまり、テンプレートで記事部分の全体の横幅が狭い時、タブレット、スマホを立てて見ている時、そんな時は画像の高さより文字の部分が高くなり最下行の文字が左一杯に回り込んで、表示が不自然になります。

floatプロパティで記事を書く時に採っている私の方法は、記事の編集画面で下記に設定して編集します。HTMLを自分で書く方法なのでそれなりに難しくなります。

  • 記事の編集は旧投稿画面で行う
  • 高機能エディタはOFF
  • 「改行の扱い」は「HTMLタグのみ」

CSSはかんたんなCSSで済むので、HTMLに埋め込むインラインCSSを使用します。

更に文字として表示される部分以外のコード内では全角は厳禁です。特に半角スペースや「 " 」半角クォーテーションマークは要注意です。またタグや属性の区切りには必ず半角スペースが入るので気をつけて下さい。文字が半角なので見落としやすいです。勝手な省略も厳禁。ちょっとしたイージーミスもまるっきり違った表現になるかもしれません。

画像のHTMLの編集


<a href="https://blog-imgs-37.fc2.com/b/l/g/blgid1974/20100320190434a89.jpg" target="_blank"><img src="https://blog-imgs-37.fc2.com/b/l/g/blgid1974/20100320190434a89.jpgalt="20100320190434a89.jpg" width="200" height=171" ></a>

記事の編集画面で画像を挿入するとこんな風にコードが挿入されます。

<a href から </a> 迄の全部が画像のリンクを含めた部分です。

色の部分はFC2のサーバーにアップロードした画像のURLです。ここは使用したい画像によって変わってきます。

色の部分はaltオルト属性と言います。詳細はググるなり、<img>: 埋め込み画像要素  の属性の項を参照して下さい。ダブルクオーテーション( " )の中は省略することができるので、私はいつも alt="" の形にして省略しています。 alt だけの記述でもOKです。

色の属性部分は書換えます。


<a href="https://blog-imgs-37.fc2.com/b/l/g/blgid1974/20100320190434a89.jpg" target="_blank"><img src="https://blog-imgs-37.fc2.com/b/l/g/blgid1974/20100320190434a89.jpgalt="カラーコードの付いた抵抗" style="float: right; width: 35%; height: auto; margin: 0 1rem;"></a>

style=" xxxx " の部分がインラインCSSと言ってHTML内でCSS装飾を行う部分で、その詳細を記します。

  1. float: right; の部分はこの画像を右側に配置し、画像の左側にこれ以降の文章を回り込ませます。 left を指定するとその逆に、画像が左、文章が右になります。
  2. width: 35%; height auto; 横幅の指定を%指定したかったので、CSSでの指定になります。因みに属性による width="35%" と云う書き方はできません。これで挿入された画像は記事幅全体の35%と云う相対指定になり、表示画面の大きさに従って縮小されます。

    画像の表示する最大の横幅を100px程度の小さな画像を使用する時、スマホなどの小さな画面では画像が小さくなりすぎるので width: 100px; (px は必ず記入)などと絶対値指定する方が良いかもしれません。こうすれば表示画面の横幅の大きさにかかわらず、画像が必ず100pxで表示されます。200pxとかこれより大きな画像を指定してはいけません。スマホではとんでもないことに。

  3. margin: 0 1rem; で、画像の横に書かれた文章との隙間を確保しています。 margin プロパティには数値の指定に微妙な差があるので、ご注意を。

    ここでは左右を一括して一文字の隙間を確保していますが、勿論画像の左右の配置に応じて margin-leftmargin-rightを使い分ける方が良いと思います。

float の解除

上記の様に記述した画像の続きに文章を書くのですが、そのままでは後続の部分や最悪テンプレ自体のデザインが壊れてしまいます。

そこで float を解除してやる必要があります。

これにはClearFix と云う方法が良く紹介されています。私は最近までそれとは違う <br style="clear: both;"> で解除していました。でもこれは構文的になんだかなぁという雰囲気も否めません。

Akira氏が結局floatはどう解除するのが簡単なのか  で違った解除方法を書かれていまして、これは簡単で判りやすいと思いました。そこでその方法がお勧めなので紹介します


<div style="overflow: hidden;">
  <a href="https://blog-imgs-37.fc2.com/b/l/g/blgid1974/20100320190434a89.jpg" target="_blank"><img src="https://blog-imgs-37.fc2.com/b/l/g/blgid1974/20100320190434a89.jpgalt="カラーコードの付いた抵抗" style="float: right; width: 35%; height: auto; margin: 0 1rem;"></a>


  ここに文章を書きます。

</div>

画像(リンク)と画像の横に回り込ませる文章、その全体を <div style="overflow: hidden;"></div> で挟みます

これは必須です。

特に記事最後に書く時にはこれを忘れると悲惨なことになります。

この文章の回り込みという手法は画像に限らず他の事にも使えます。引用文などの文章でも。

Internet Explorerは互換性ソリューションです。 私たちは新しいWeb標準をサポートしていませんし、多くのサイトは問題なく動作していますが、最近ではほとんどの開発者は

右記の様に米Maicrosoft自体がIEは新しいブラウザに対応し切れていないと発表していますので、もうIEの使用はやめるべきでしょう。

ChromeやFirefoxといった無料の優秀なブラウザがあるのですからIEに固執している方がおかしいのではないでしょうか。

こんな風に

この記事はずいぶん以前に戴いていた宿題です。

Comments 6

There are no comments yet.

金  

( ゜▽゜)/コンバンハ!

今年は此処でhigeさんと出逢えてとても楽しかったです
金の「我儘」にもお付き合いして頂いたりと 御迷惑もお掛けしてしまいましたね(;´∀`)
そして、年末最大のアクシデントが起きちゃってしまったんです(´;ω;`)ウッ…

金のFC2ブログに出来なく成ってしまったんです
最近、ソロソロ年末の御挨拶でもアップしようかとおもうたら
アラララΣ(゚Д゚)!
メールアドレス/ブログID:
パスワード:
が、思い当たるものをいれても、「ログイン」出来なくて
サポートセンターに問い合わせて、返信された通りにしようとしてもアカンでした
で、今以て「ログイン」できない儘の状態です。

それでも、訪問する事は出来るので、higeさんには、御挨拶に上がりました

ホンマに、本年有難う御座いました(*- -)(*_ _)ペコリ。
良いお年、迎えて下さいネ!

ではでは・・・又何時か!   マタネ―ヾ(●´・∀・`●)―!!

2019/12/31 (Tue) 17:49 | 返信を書く |   
hige

hige  

To 金さん

あれま それは大変ですねぇ。
なんとか回復できることを願っています。
ブラウザが記憶していると、取り出せるんですがねぇ。

金さんこそ良いお年を。

2019/12/31 (Tue) 17:55 | 再編集 | 返信を書く |   

金  

再訪です!

higeさんの「願掛け」が効いて呉れたのか、何か今エエ感じ観たいです
金の事ヤケ、アンマシ当てにならんですけれど 頑張ってみます❕
今年最後の頑張りですわ( ^ω^)・・・
お騒がせしました

素敵な「除夜の鐘」聞いてね!  (∩´∀`)∩。

2019/12/31 (Tue) 19:00 | 再編集 | 返信を書く |   
hige

hige  

To 金さん

higeの力も見捨てたもんじゃありませんねぇ。
お困りの方は是非私まで願掛けしてみて下さい。
取りあえず良かったです。

紅白を観ながらチョビチョビやってます。

2019/12/31 (Tue) 20:09 | 再編集 | 返信を書く |   

-  

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2020/05/17 (Sun) 15:16 | 返信を書く |   
hige

hige  

To 鍵コメントさん

少しずつ覚えていかれれば良いと思います。

CSSの競合ですか。重複して書かれたCSSの事ですかね。

これには法則があります。詳細に書かれた方が優先するとか、後に書かれた方が優先するとか。
「CSS 優先」で検索されると色々解説があると思います。

例えば

.entry p { color: gray; }
p { color: red; }


p { color: blue; }

と記載されているとp要素の中の文字は後で指定された青色になります。
なのですが、entry というclassの中の、p要素の中の文字は灰色のままです。こちらの方が優先度が高い。

ところが更に記事中で

<p style="color: black;"> ・・・・ </p>
などとインラインCSSを書くと黒になります。

と言うことなんですかね。

2020/05/17 (Sun) 20:48 | 再編集 | 返信を書く |   

Leave a reply
コメントをどうぞ

ブログやホームページのURLをどうぞ

パスワードを入力すると投稿後、訂正・削除が出来ます