画像回り込みテスト

更新
2012年10月27日(土)

この記事は現在利用しているテンプレート【customtemplate ver1.3.0】における回り込み用クラス class="floatl"(左回り込み) class="floatr"(右回り込み) のテスト用に作成した記事です。

同時に製作者様への質問用の記事でもあります。

問題解決後、記事の削除または非公開を予定していましたが、解説記事中にこのサンプルを引用していただいている箇所がありますので、テンプレート利用者の後学のためにも残すべきと思いました。

そこで【customtemplate】を利用している間はこの記事を公開することにしました。

将来テンプレートを変更することになった場合は、製作者様にご連絡をした上で、どのような形で残すか再度検討したいと思います。

また、記事を公開する上で若干の加筆修正を行いました。

テンプレート製作者のブログ『カスタムテンプレート

カスタムテンプレート トップ
⇒http://customtemplate.blog112.fc2.com/
fc2blog共有テンプレート customtemplate の説明
⇒http://customtemplate.blog112.fc2.com/blog-entry-1.html
長文を書く時に使える構造化文章用サンプル一覧
⇒http://customtemplate.blog112.fc2.com/blog-entry-2.html
コピペでOK!長文作成時の各パラグラフや文章の装飾用タグ一覧
⇒http://customtemplate.blog112.fc2.com/blog-entry-5.html
記事内の本文や画像などの回り込み設定(CSSのfloatを手軽に使う)
⇒http://customtemplate.blog112.fc2.com/blog-entry-57.html

画像回り込みテスト

左回り込み

  1. テスト左回り込み 画像をdivで囲ってclass="floatl"を設定しました。

  2. Deka-E なるほど
  3. 独立した文章その1『第1条 天皇は、日本国の象徴であり日本国民統合の象徴であつて、この地位は、主権の存する日本国民の総意に基く。』

  4. 独立した文章その2『第2条 皇位は、世襲のものであつて、国会の議決した皇室典範の定めるところにより、これを継承する。』

  5. 独立した文章その3『第3条 天皇の国事に関するすべての行為には、内閣の助言と承認を必要とし、内閣が、その責任を負ふ。 』

  6. 独立した文章その4『第11条  国民は、すべての基本的人権の享有を妨げられない。この憲法が国民に保障する基本的人権は、侵すことのできない永久の権利として、現在及び将来の国民に与へられる』

  7. 独立した文章その5『第34条  何人も、理由を直ちに告げられ、且つ、直ちに弁護人に依頼する権利を与へられなければ、抑留又は拘禁されない。又、何人も、正当な理由がなければ、拘禁されず、要求があれば、その理由は、直ちに本人及びその弁護人の出席する公開の法廷で示されなければならない。』

  8. 独立した文章その6『第97条 この憲法が日本国民に保障する基本的人権は、人類の多年にわたる自由獲得の努力の成果であつて、これらの権利は、過去幾多の試錬に堪へ、現在及び将来の国民に対し、侵すことのできない永久の権利として信託されたものである。』

  9. [li][/li]で囲う範囲は文章のみ

    [div class="floatl"]画像[/div][li][p]文章[/p][/li]
    画像の高さ height="300" 各文章の長さ短め


  10. Deka-E 拍手
  11. 長文とのバランス確認『日本国民は、正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民との協和による成果と、わが国全土にわたつて自由のもたらす恵沢を確保し、政府の行為によつて再び戦争の惨禍が起こることのないやうにすることを決意し、ここに主権が国民に存することを宣言し、この憲法を確定する。そもそも国政は、国民の厳粛な信託によるものであつて、その権威は国民に由来し、その権力は国民の代表者がこれを行使し、その福利は国民がこれを享受する。これは人類普遍の原理であり、この憲法はかかる原理に基くものである。われらは、これに反する一切の憲法、法令及び詔勅を排除する。日本国民は、恒久の平和を念願し、人間相互の関係を支配する崇高な理想を深く自覚するのであつて、平和を愛する諸国民の公正と信義に信頼して、われらの安全と生存を保持しようと決意した。われらは、平和を維持し、専制と隷従、圧迫と偏狭を地上から永遠に除去しようと努めてゐる国際社会において、名誉ある地位を占めたいと思ふ。われらは、全世界の国民が、ひとしく恐怖と欠乏から免かれ、平和のうちに生存する権利を有することを確認する。われらは、いづれの国家も、自国のことのみに専念して他国を無視してはならないのであつて、政治道徳の法則は、普遍的なものであり、この法則に従ふことは、自国の主権を維持し、他国と対等関係に立たうとする各国の責務であると信ずる。日本国民は、国家の名誉にかけ、全力をあげてこの崇高な理想と目的を達成することを誓ふ。』

  12. [li][/li]で囲う範囲は文章のみ

    [div class="floatl"]画像[/div][li][p]文章[/p][/li]
    画像の高さ height="160" 文章の長さが画像の高さを越える場合


  13. Deka-E おなか

    長文とのバランス確認『日本国民は、正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民との協和による成果と、わが国全土にわたつて自由のもたらす恵沢を確保し、政府の行為によつて再び戦争の惨禍が起こることのないやうにすることを決意し、ここに主権が国民に存することを宣言し、この憲法を確定する。そもそも国政は、国民の厳粛な信託によるものであつて、その権威は国民に由来し、その権力は国民の代表者がこれを行使し、その福利は国民がこれを享受する。これは人類普遍の原理であり、この憲法はかかる原理に基くものである。われらは、これに反する一切の憲法、法令及び詔勅を排除する。日本国民は、恒久の平和を念願し、人間相互の関係を支配する崇高な理想を深く自覚するのであつて、平和を愛する諸国民の公正と信義に信頼して、われらの安全と生存を保持しようと決意した。われらは、平和を維持し、専制と隷従、圧迫と偏狭を地上から永遠に除去しようと努めてゐる国際社会において、名誉ある地位を占めたいと思ふ。われらは、全世界の国民が、ひとしく恐怖と欠乏から免かれ、平和のうちに生存する権利を有することを確認する。われらは、いづれの国家も、自国のことのみに専念して他国を無視してはならないのであつて、政治道徳の法則は、普遍的なものであり、この法則に従ふことは、自国の主権を維持し、他国と対等関係に立たうとする各国の責務であると信ずる。日本国民は、国家の名誉にかけ、全力をあげてこの崇高な理想と目的を達成することを誓ふ。』

  14. [li][/li]で囲う範囲を変えてます。

    [li][div class="floatl"]画像[/div][p]文章[/p][/li]
    画像と文章をまとめて囲うと序数が割り当てられません。


  15. 長文とのバランス確認『日本国民は、正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民との協和による成果と、わが国全土にわたつて自由のもたらす恵沢を確保し、政府の行為によつて再び戦争の惨禍が起こることのないやうにすることを決意し、ここに主権が国民に存することを宣言し、この憲法を確定する。そもそも国政は、国民の厳粛な信託によるものであつて、その権威は国民に由来し、その権力は国民の代表者がこれを行使し、その福利は国民がこれを享受する。これは人類普遍の原理であり、この憲法はかかる原理に基くものである。われらは、これに反する一切の憲法、法令及び詔勅を排除する。日本国民は、恒久の平和を念願し、人間相互の関係を支配する崇高な理想を深く自覚するのであつて、平和を愛する諸国民の公正と信義に信頼して、われらの安全と生存を保持しようと決意した。われらは、平和を維持し、専制と隷従、圧迫と偏狭を地上から永遠に除去しようと努めてゐる国際社会において、名誉ある地位を占めたいと思ふ。われらは、全世界の国民が、ひとしく恐怖と欠乏から免かれ、平和のうちに生存する権利を有することを確認する。われらは、いづれの国家も、自国のことのみに専念して他国を無視してはならないのであつて、政治道徳の法則は、普遍的なものであり、この法則に従ふことは、自国の主権を維持し、他国と対等関係に立たうとする各国の責務であると信ずる。日本国民は、国家の名誉にかけ、全力をあげてこの崇高な理想と目的を達成することを誓ふ。』

    Deka-E 上かっ?
  16. 文章と画像の順序を交換

    [li][p]文章[/p][div class="floatl"]画像[/div][/li]
    画像は文章の下で回り込まれています。


右回り込み

  1. テスト右回り込み 画像をdivで囲ってclass="floatr"を設定しました。

  2. Deka-E テレ
  3. 独立した文章その1『第10条  日本国民たる要件は、法律でこれを定める。』

  4. 独立した文章その2『第13条  すべて国民は、個人として尊重される。生命、自由及び幸福追求に対する国民の権利については、公共の福祉に反しない限り、立法その他の国政の上で、最大の尊重を必要とする。』

  5. 独立した文章その3『第16条  何人も、損害の救済、公務員の罷免、法律、命令又は規則の制定、廃止又は改正その他の事項に関し、平穏に請願する権利を有し、何人も、かかる請願をしたためにいかなる差別待遇も受けない。』

  6. 独立した文章その4『第19条  思想及び良心の自由は、これを侵してはならない。』

  7. 独立した文章その5『第96条 この憲法の改正は、各議院の総議員の3分の2以上の賛成で、国会が、これを発議し、国民に提案してその承認を経なければならない。この承認には、特別の国民投票又は国会の定める選挙の際行はれる投票において、その過半数の賛成を必要とする。』

  8. 独立した文章その6『第99条 天皇又は摂政及び国務大臣、国会議員、裁判官その他の公務員は、この憲法を尊重し擁護する義務を負ふ。』

  9. [li][/li]で囲う範囲は文章のみ

    [div class="floatr"]画像[/div][li][p]文章[/p][/li]
    画像の高さ height="300" 各文章の長さ短め


  10. Deka-E がっくり
  11. 長文とのバランス確認『日本国民は、正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民との協和による成果と、わが国全土にわたつて自由のもたらす恵沢を確保し、政府の行為によつて再び戦争の惨禍が起こることのないやうにすることを決意し、ここに主権が国民に存することを宣言し、この憲法を確定する。そもそも国政は、国民の厳粛な信託によるものであつて、その権威は国民に由来し、その権力は国民の代表者がこれを行使し、その福利は国民がこれを享受する。これは人類普遍の原理であり、この憲法はかかる原理に基くものである。われらは、これに反する一切の憲法、法令及び詔勅を排除する。日本国民は、恒久の平和を念願し、人間相互の関係を支配する崇高な理想を深く自覚するのであつて、平和を愛する諸国民の公正と信義に信頼して、われらの安全と生存を保持しようと決意した。われらは、平和を維持し、専制と隷従、圧迫と偏狭を地上から永遠に除去しようと努めてゐる国際社会において、名誉ある地位を占めたいと思ふ。われらは、全世界の国民が、ひとしく恐怖と欠乏から免かれ、平和のうちに生存する権利を有することを確認する。われらは、いづれの国家も、自国のことのみに専念して他国を無視してはならないのであつて、政治道徳の法則は、普遍的なものであり、この法則に従ふことは、自国の主権を維持し、他国と対等関係に立たうとする各国の責務であると信ずる。日本国民は、国家の名誉にかけ、全力をあげてこの崇高な理想と目的を達成することを誓ふ。』

  12. [li][/li]で囲う範囲は文章のみ

    [div class="floatr"]画像[/div][li][p]文章[/p][/li]
    画像の高さ height="160" 文章の長さが画像の高さを越える場合

重なりのテスト

    Deka-E 腰痛
  1. q類を得pvpmjp@おq対vんー@【q9うvt09-q4んぶv09つq4m09jm区0板mんcf-t09うんmた0-9w4fくー0tq9うdxmkrkじぇsんc-09くぅんv0-9く54p@qtjんー09r8c42ん05q8ん75vん09467rqv097ん856094-8ん5v9084vんt8743-q075v84q3れいうんv-04q9285q類を得pvpmjp@おq対vんー@【q9うvt09-q4んぶv09つq4m09jm区0板mんcf-t09うんmた0-9w4fくー0tq9うdxmkrkじぇsんc-09くぅんv0-9く54p@qtjんー09r8c42ん05q8ん75vん09467rqv097ん856094-8ん5v9084vんt8743-q075v84q3れいうんv-04q9285

  2. Deka-E ノーマル
  3. 独立した文章『第32条  何人も、裁判所において裁判を受ける権利を奪はれない。』


  4. Deka-E ノーマル
  5. 独立した文章『第100条 この憲法は、公布の日から起算して6箇月を経過した日から、これを施行する。』

  6. Deka-E 腰痛
  7. q類を得pvpmjp@おq対vんー@【q9うvt09-q4んぶv09つq4m09jm区0板mんcf-t09うんmた0-9w4fくー0tq9うdxmkrkじぇsんc-09くぅんv0-9く54p@qtjんー09r8c42ん05q8ん75vん09467rqv097ん856094-8ん5v9084vんt8743-q075v84q3れいうんv-04q9285q類を得pvpmjp@おq対vんー@【q9うvt09-q4んぶv09つq4m09jm区0板mんcf-t09うんmた0-9w4fくー0tq9うdxmkrkじぇsんc-09くぅんv0-9く54p@qtjんー09r8c42ん05q8ん75vん09467rqv097ん856094-8ん5v9084vんt8743-q075v84q3れいうんv-04q9285

  8. 画像の高さの分だけの文章が存在しない場合

    続く画像・文章も回り込みの影響が続く
    ※回り込みが解除されていないから。


  9. Deka-E ノーマル
  10. 独立した文章『第23条   学問の自由は、これを保障する。』

  11. Deka-E 腰痛
  12. q類を得pvpmjp@おq対vんー@【q9うvt09-q4んぶv09つq4m09jm区0板mんcf-t09うんmた0-9w4fくー0tq9うdxmkrkじぇsんc-09くぅんv0-9く54p@qtjんー09r8c42ん05q8ん75vん09467rqv097ん856094-8ん5v9084vんt8743-q075v84q3れいうんv-04q9285q類を得pvpmjp@おq対vんー@【q9うvt09-q4んぶv09つq4m09jm区0板mんcf-t09うんmた0-9w4fくー0tq9うdxmkrkじぇsんc-09くぅんv0-9く54p@qtjんー09r8c42ん05q8ん75vん09467rqv097ん856094-8ん5v9084vんt8743-q075v84q3れいうんv-04q9285

  13. 2番目の画像を右に回り込ませた場合のレイアウトです。

    これなら様になりますが、プレビュー時に画像と文字のバランスをチェックする必要がある。


  14. Deka-E ノーマル
  15. 独立した文章『第30条  国民は、法律の定めるところにより、納税の義務を負う。』


  16. Deka-E 腰痛
  17. q類を得pvpmjp@おq対vんー@【q9うvt09-q4んぶv09つq4m09jm区0板mんcf-t09うんmた0-9w4fくー0tq9うdxmkrkじぇsんc-09くぅんv0-9く54p@qtjんー09r8c42ん05q8ん75vん09467rqv097ん856094-8ん5v9084vんt8743-q075v84q3れいうんv-04q9285q類を得pvpmjp@おq対vんー@【q9うvt09-q4んぶv09つq4m09jm区0板mんcf-t09うんmた0-9w4fくー0tq9うdxmkrkじぇsんc-09くぅんv0-9く54p@qtjんー09r8c42ん05q8ん75vん09467rqv097ん856094-8ん5v9084vんt8743-q075v84q3れいうんv-04q9285

  18. 区切りとして水平線[hr size="1" /]を入れたら画像は重ならなくなった。

    ※本来は解除用クラス class="clear"が用意されてます。

製作者様への質問用サンプル

サンプル1

    表情 イマイチ
  1. 『最近、テレビの映りが悪くて困ってるんだ。』


  2. 表情 普通
  3. 『最近は大型テレビが安くなっているから、買い換えたら?』


  4. 表情 イマイチ
  5. 『そうだな~今度のボーナスで買っちゃおうかな~』
    『今の相場はいくら位になってるの?』


  6. 表情 普通
  7. 『グレードにもよるけど、50インチTVが15万円位かな』


  8. 表情 グッド
  9. 『なにそれ!! 超~安いじゃん』


  10. 表情 普通
  11. 『いつからテレビの映りが悪くなったの?』


  12. 表情 グッド
  13. 『2011年7月25日から』


  14. 表情 イマイチ
  15. 『まだアナログTVだったのかよっ!!』


サンプル2

    表情 イマイチ
  1. 『最近、テレビの映りが悪くて困ってるんだ。』

  2. 表情 普通
  3. 『最近は大型テレビが安くなっているから、買い換えたら?』

  4. 表情 イマイチ
  5. 『そうだな~今度のボーナスで買っちゃおうかな~』
    『今の相場はいくら位になってるの?』

  6. 表情 普通
  7. 『グレードにもよるけど、50インチTVが15万円位かな』

  8. 表情 グッド
  9. 『なにそれ!! 超~安いじゃん』

  10. 表情 普通
  11. 『いつからテレビの映りが悪くなったの?』

  12. 表情 グッド
  13. 『2011年7月25日から』

  14. 表情 イマイチ
  15. 『まだアナログTVだったのかよっ!!』

  16. [hr size="1" /]で区切らなかった場合

質問解決まとめ

  1. カスタムテンプレート
    記事内の本文や画像などの回り込み設定(CSSのfloatを手軽に使う)
    ⇒http://customtemplate.blog112.fc2.com/blog-entry-57.html

  2. ポイントその1

    解除用クラス class="clear" を入れる。

  3. 上記では回り込み解除のために 水平線[hr size="1" /] を入れているが、本来は解除用クラス class="clear" 等を利用すべきだった。

  4. 画像を回り込ませた段落の、下部に続ける段落にクラス class="clear" を設定する。

  5. ポイントその2

    適宜 class="ofh" を利用する。

  6. 下部に潜り込ませないために設定するクラスです。

  7. 段落終了後に強制解除の効果もあります。

  8. class="ofh"については、解説記事を参照のこと。

  9. ポイントその3

    序数を割り当てる記述方法は
    [li][div]画像[/div][p class="p"]文章[/p][/li]
    ※あくまでも一例です

  10. 文章にきちんと序数を割り当てたい場合
    [li][div]画像[/div][p]文章[/p][/li] では序数が割り当てられないので、
    [li][div]画像[/div][p class="p"]文章[/p][/li] で対処する。

  11. 序数を割り当てるクラス class="p" が用意されています。

  12. class="p"については、解説記事を参照のこと。

問題解決後のサンプル

  1. 表情 イマイチ

    『最近、テレビの映りが悪くて困ってるんだ。』

  2. 表情 普通

    『最近は大型テレビが安くなっているから、買い換えたら?』

  3. 表情 イマイチ

    『そうだな~今度のボーナスで買っちゃおうかな~』
    『今の相場はいくら位になってるの?』

  4. 表情 普通

    『グレードにもよるけど、50インチTVが15万円位かな』

  5. 表情 グッド

    『なにそれ!! 超~安いじゃん』

  6. 表情 普通

    『いつからテレビの映りが悪くなったの?』

  7. 表情 グッド

    『2011年7月25日から』

  8. 表情 イマイチ

    『まだアナログTVだったのかよっ!!』

  9. 記述方法

    [li class="ofh"][div class="float"]画像[/div][p class="p"]文章[/p][/li]

関連記事
この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m
ページ下部までご覧いただきありがとうございました。
プロフィール

Deka-E

Author:Deka-E

ブログ4年目のブロガーです。
HTML/CSSが理解できる程度で成長が止まってます。
JavaScriptはサッパリ分からんです。

カウンター
総閲覧者数:
現閲覧者数:
検索フォーム
ジャンル別リンク
★は相互リンクさせていただいています

RSSリンクの表示
カレンダー
05 | 2017/06 | 07
- - - - 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 -
Twitter
管理人Deka-Eのツイート
サイドバー2下の追尾スペース