• « 2017·06
  • 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
  •  »
--’--.--・--

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Categorieスポンサー広告  - - TOP

2006’05.17・Wed

画像の回りこみタグ

すっかり書くのを忘れてたのですが…【parent_and_child】以降にはスタイルシートに以下のものが入っていたりします。
img.left {
float:left;
clear:left;
margin:5px 10px 5px 0px;
padding:0px;
border: none;
}
これは画像の回りこみをして記事を書きたい場合に使用できるように入れた回りこみ用のタグです。(使用しない場合は削除しちゃってもOKです)
※回り込みとは、1個下(↓)の記事のように画像の横に文字が並ぶような設定のことです。このタグでは画像の右横に文字がくるようになってます。

画像と長い文章を組み合わせたりするのに相性がよいと思うのですが、使いたくないという方も多そうなので、普通に画像を記事に入れた場合は回り込みはしないようにしてあります。

回り込みをさせたい場合は、通常記事に挿入される画像のタグに
「left」というクラスを設定して頂ければ、クラスを設定された画像のみ回り込みをします。

【やりかた】
記事に画像を使うと通常挿入されるタグに
<a href="http://blog-imgs-23.fc2.com/t/m/p/tmpblog/xx.gif" target="_blank"><img src="http://blog-imgs-23.fc2.com/t/m/p/tmpblog/xx.gif" alt="" border="0"></a><br clear="all">

<a href="http://blog-imgs-23.fc2.com/t/m/p/tmpblog/xx.gif" target="_blank"><img src="http://blog-imgs-23.fc2.com/t/m/p/tmpblog/xx.gif" alt="" border="0" class="left"></a><br clear="all">
赤い文字の部分を追加するダケです。

その際重要なのが <br clear="all"> このタグが回り込みをしたい文章の一番下にくるように記事を書くと、画像の縦の長さより短く文章が終わっても、<br clear="all">以降の文章は回り込みが解除された状態(画像の下から)で表示されるようになります。

<a href="http://blog-imgs-23.fc2.com/t/m/p/tmpblog/xx.gif" target="_blank"><img src="http://blog-imgs-23.fc2.com/t/m/p/tmpblog/xx.gif" alt="" border="0" class="left"></a>ここに画像の横に表示されたい文章を書く感じです。<br clear="all">ここから画像の下に表示されたい文章~…

(回り込み画像にはボーダーが出ないようになっていますので、表示したい方はborder: none;の一行を削除してください)

一見めんどくさそうですが…回り込みを使いこなすと色々できて便利かと思います。
よかったら一度試してみてくださいませ~

ちなみに一番上のスタイルシートを追加すれば、どのテンプレートでも同じことができると思います。(できなかったらゴメンナサイ
関連記事
スポンサーサイト

Categorieブログカスタマイズ  トラックバック(0) コメント(7) TOP

Next |  Back
パソコン初心者です。ブログをやりたくて
昨日FC2で始めました。リフォーム工事業
なので現場写真を多く載せたいと思い、
挑戦してみたのですが、画像の右に文章が
入れられません。お手数ですが教えてください。小生66歳の高齢者ですが、頑張って
ブログの達人になりたいと思っています。
「ブログアドレス」
 http://hiroshikun.blog86.fc2.com/

堀江弘志:2006/12/23(土) 16:55 | URL | [編集]

堀江さん初めまして。
申し訳ないです、この画像の回り込みの指定の仕方はうちで作っているテンプレートを使用した場合にしか出来ない方法なのです。

それ以外のテンプレートで回り込みを使う場合は
記事に画像を挿入するHTMLタグに上の記事と回り込は少し違うHTMLタグを追加すれば可能になります。

記事に画像を使用すると記事投稿画面で以下のようなタグが入ると思うのですがこのタグに追加を行います。

<a href="http://blogxx.fc2.com/x/xxxxxx/file/画像のアドレス" target="_blank"><img src="http://blogxx.fc2.com/x/xxxxxx/file/画像サムネイルのアドレス" alt="" border="0"></a><br clear="all">


このタグを以下のように直します。
まずは赤文字の部分を追加してください

<a href="http://blogxx.fc2.com/x/xxxxxx/file/画像のアドレス" target="_blank"><img src="http://blogxx.fc2.com/x/xxxxxx/file/画像サムネイルのアドレス" alt="" border="0" align="left"></a>
回りこませたい文章はここに書いてください
<br clear="all">


このタグを追加すると、「回りこませたい文章はここに書いてください」の部分に書かれた文字などが画像の右側に回りこんで表示されるようになります。
(жFC2では画像の回り込みの「解除用タグ」が自動的に挿入されますので、回り込ませたい文字などはそれの前に書く必要があります。)

<br clear="all">が回り込み解除用のタグです。
このタグより下にあるものは回り込みが解除され、通常の表示になります。

説明がうまくできているか不安ですが…
方法は上記のようなかんじになります。

がんばって達人目指してください!

ころ@管理人:2006/12/24(日) 19:20 | URL | [編集]

HTMLのタグで検索して、ココを見つけました。
初心者にもわかりやすくて嬉しいです。
お伺いしたいのですが、
リンク付の画像の回りこみはどうすればよいのでしょうか。
横の文章までリンクされてしまうのです。
よろしくお願いします<(_ _)>

tomo:2007/10/29(月) 08:13 | URL | [編集]

上に書いてあるタグはリンクつきの画像の回り込みの説明になっています
文章にもリンクがついてしまう原因は様々あります。
実際見てみないとわかりませんが、考えられる原因のいくつかを書きますのでご確認ください。

1)</a>タグを間違えて消してしまっている
2)</a>よりも前に文章を書いている
(<a>~</a>の中にあるものにリンクがはられます)

リンクが文章にもはられてしまうということはリンクが閉じられてないかリンクタグの中に文章があると言うことだと思いますので、一度その点ご確認くださいませi-274

ころ@管理人:2007/10/29(月) 15:09 | URL | [編集]

早速のお返事ありがとうございます。
「</a>よりも前に文章を書いている 」でした。すごい!!
またわからなくなったら、教えてくださいね。本当にありがとうございます(^^)

tomo:2007/10/29(月) 21:38 | URL | [編集]

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

-:2007/10/31(水) 21:33 | | [編集]

非公開の方へ

大変申し訳ありません。
テンプレートの不具合等には対処していくつもりではあるのですが、当ブログはテンプレートの配布のためにあるのでして…それすら満足にできずに放置になっているものも多数あります。

個別にメール等でHTMLやCSSについてお教えするだけの余力がないのが現状です。お教えするほどの知識もありません。
そのあたりについては専門のHPなどもありますのでそちらでお調べいただけますようお願いできますでしょうか。

ころ@管理人:2007/10/31(水) 21:50 | URL | [編集]

Post your Comment











 管理者にだけ表示を許可
この記事のトラックバックURL


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。