画像回り込みテスト

画像回り込みテスト

左回り込み

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



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

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

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

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

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

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

8. [li][/li]で囲う範囲は文章のみ
   
   [div class="floatl"]画像[/div][li][p]文章[/p][/li]
   画像の高さ height="300" 各文章の長さ短め

---



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

10. [li][/li]で囲う範囲は文章のみ
    
    [div class="floatl"]画像[/div][li][p]文章[/p][/li]
    画像の高さ height="160" 文章の長さが画像の高さを越える場合

---

11. 

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

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

---

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

    

14. 文章と画像の順序を交換
    
    [li][p]文章[/p][div class="floatl"]画像[/div][/li]
    画像は文章の下で回り込まれています。

---

右回り込み

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

2. 

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

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

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

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

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

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

9. [li][/li]で囲う範囲は文章のみ
   
   [div class="floatr"]画像[/div][li][p]文章[/p][/li]
   画像の高さ height="300" 各文章の長さ短め

---



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

11. [li][/li]で囲う範囲は文章のみ
    
    [div class="floatr"]画像[/div][li][p]文章[/p][/li]
    画像の高さ height="160" 文章の長さが画像の高さを越える場合

重なりのテスト

1. q類を得pvpmjp@おq対vんー@【q9うvt09-q4んぶv09つq4m09jm区0板mんcf-t09うんｍた０－９ｗ４ｆくー０ｔｑ９うｄｘｍｋｒｋじぇｓんｃ－０９くぅんｖ０－９く５４ｐ＠ｑｔｊんー０９ｒ８ｃ４２ん０５ｑ８ん７５ｖん０９４６７ｒｑｖ０９７ん８５６０９４－８ん５ｖ９０８４ｖんｔ８７４３－ｑ０７５ｖ８４ｑ３れいうんｖ－０４ｑ９２８５q類を得pvpmjp@おq対vんー@【q9うvt09-q4んぶv09つq4m09jm区0板mんcf-t09うんｍた０－９ｗ４ｆくー０ｔｑ９うｄｘｍｋｒｋじぇｓんｃ－０９くぅんｖ０－９く５４ｐ＠ｑｔｊんー０９ｒ８ｃ４２ん０５ｑ８ん７５ｖん０９４６７ｒｑｖ０９７ん８５６０９４－８ん５ｖ９０８４ｖんｔ８７４３－ｑ０７５ｖ８４ｑ３れいうんｖ－０４ｑ９２８５



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

---



3. 独立した文章『第100条　この憲法は、公布の日から起算して６箇月を経過した日から、これを施行する。』



4. q類を得pvpmjp@おq対vんー@【q9うvt09-q4んぶv09つq4m09jm区0板mんcf-t09うんｍた０－９ｗ４ｆくー０ｔｑ９うｄｘｍｋｒｋじぇｓんｃ－０９くぅんｖ０－９く５４ｐ＠ｑｔｊんー０９ｒ８ｃ４２ん０５ｑ８ん７５ｖん０９４６７ｒｑｖ０９７ん８５６０９４－８ん５ｖ９０８４ｖんｔ８７４３－ｑ０７５ｖ８４ｑ３れいうんｖ－０４ｑ９２８５q類を得pvpmjp@おq対vんー@【q9うvt09-q4んぶv09つq4m09jm区0板mんcf-t09うんｍた０－９ｗ４ｆくー０ｔｑ９うｄｘｍｋｒｋじぇｓんｃ－０９くぅんｖ０－９く５４ｐ＠ｑｔｊんー０９ｒ８ｃ４２ん０５ｑ８ん７５ｖん０９４６７ｒｑｖ０９７ん８５６０９４－８ん５ｖ９０８４ｖんｔ８７４３－ｑ０７５ｖ８４ｑ３れいうんｖ－０４ｑ９２８５

5. 画像の高さの分だけの文章が存在しない場合
   
   続く画像・文章も回り込みの影響が続く
   ※回り込みが解除されていないから。

---



6. 独立した文章『第23条 　　学問の自由は、これを保障する。』



7. q類を得pvpmjp@おq対vんー@【q9うvt09-q4んぶv09つq4m09jm区0板mんcf-t09うんｍた０－９ｗ４ｆくー０ｔｑ９うｄｘｍｋｒｋじぇｓんｃ－０９くぅんｖ０－９く５４ｐ＠ｑｔｊんー０９ｒ８ｃ４２ん０５ｑ８ん７５ｖん０９４６７ｒｑｖ０９７ん８５６０９４－８ん５ｖ９０８４ｖんｔ８７４３－ｑ０７５ｖ８４ｑ３れいうんｖ－０４ｑ９２８５q類を得pvpmjp@おq対vんー@【q9うvt09-q4んぶv09つq4m09jm区0板mんcf-t09うんｍた０－９ｗ４ｆくー０ｔｑ９うｄｘｍｋｒｋじぇｓんｃ－０９くぅんｖ０－９く５４ｐ＠ｑｔｊんー０９ｒ８ｃ４２ん０５ｑ８ん７５ｖん０９４６７ｒｑｖ０９７ん８５６０９４－８ん５ｖ９０８４ｖんｔ８７４３－ｑ０７５ｖ８４ｑ３れいうんｖ－０４ｑ９２８５

8. 2番目の画像を右に回り込ませた場合のレイアウトです。
   
   これなら様になりますが、プレビュー時に画像と文字のバランスをチェックする必要がある。

---



9. 独立した文章『第30条 　国民は、法律の定めるところにより、納税の義務を負う。』

---



10. q類を得pvpmjp@おq対vんー@【q9うvt09-q4んぶv09つq4m09jm区0板mんcf-t09うんｍた０－９ｗ４ｆくー０ｔｑ９うｄｘｍｋｒｋじぇｓんｃ－０９くぅんｖ０－９く５４ｐ＠ｑｔｊんー０９ｒ８ｃ４２ん０５ｑ８ん７５ｖん０９４６７ｒｑｖ０９７ん８５６０９４－８ん５ｖ９０８４ｖんｔ８７４３－ｑ０７５ｖ８４ｑ３れいうんｖ－０４ｑ９２８５q類を得pvpmjp@おq対vんー@【q9うvt09-q4んぶv09つq4m09jm区0板mんcf-t09うんｍた０－９ｗ４ｆくー０ｔｑ９うｄｘｍｋｒｋじぇｓんｃ－０９くぅんｖ０－９く５４ｐ＠ｑｔｊんー０９ｒ８ｃ４２ん０５ｑ８ん７５ｖん０９４６７ｒｑｖ０９７ん８５６０９４－８ん５ｖ９０８４ｖんｔ８７４３－ｑ０７５ｖ８４ｑ３れいうんｖ－０４ｑ９２８５

11. 区切りとして水平線[hr size="1" /]を入れたら画像は重ならなくなった。
    
    ※本来は解除用クラス class="clear"が用意されてます。

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

サンプル１

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

---



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

---



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

---



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

---



5. 『なにそれ!! 超～安いじゃん』

---



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

---



7. 『2011年7月25日から』

---



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

---

サンプル２

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



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



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



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



5. 『なにそれ!! 超～安いじゃん』



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



7. 『2011年7月25日から』



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

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

質問解決まとめ

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

2. ポイントその１
   
   解除用クラス class="clear" を入れる。

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

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

5. ポイントその２
   
   適宜 class="ofh" を利用する。

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

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

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

9. ポイントその３
   
   序数を割り当てる記述方法は
   [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]

関連記事

• ブログテンプレート必須編集項目２ アフィリエイト (2013/10/03)
• ブログテンプレート必須編集項目１ アクセス解析 (2013/10/03)
• FC2ブログ 環境設定 (2013/10/02)
• テンプレート確認用 (2013/10/01)
• 【ツイートまとめ機能】をオフにしました (2013/02/26)
• ブログをTwitter連携にしてみました (2013/01/25)
• 画像回り込みテスト (2012/10/23)
• テンプレートのこととか (2012/07/18)
• customtemplate等のサンプル (2012/07/11)