FC2ブログ

画像のまわりこみ♪

2006年04月01日
画像の横に字を配置することを『まわりこみ』というそうです。
初めの頃はやり方が分からなかったので、
カスタマイズ掲示板などをのぞいて調べました。
が、以前のテンプレートの時にはなぜか
記事の枠が切れてしまうという不可解な事件が!!
なので使っていなかったのですが、
テンプレートを変えてからは問題がなくなりました。

役に立つかどうか分からないのですが、
ここにやり方を書いておきますね。

FC2の場合になりますが、画像のアップロードをし記事を書くを押すと
<a href="http://blog48.fc2.com/~ target="_blank"><img src="http://blog48.fc2.com/~" alt="" border="0"></a><br clear="all">
のようなタグが挿入されます。

ちなみにこのまま使うと画像をクリックしたときに
別ウィンドウで、画像が出てしまいますが、
この赤字の部分を取るとクリックしても何も出ません。
あまり意味がないと思うのでまゆびは取っています。
alt="★"の★の部分に文字を入れておくと
画像が表示できなかったときに代わりに文字が出ます。
例えばalt="うさびの後姿"としておくと画像が出なくても
「ああ、本当はここにうさびの画像があるのね」と分かってもらえます。

さて「まわりこみ」は<img>のなかにalign="right"を入れます
もちろん左に画像を置きたいときはrightをleftにしてね!!
そして画像の横に置きたい文字を<image>と<br clear="all">の間に入れてください♪
<img src="http://~" alt="" border="0" align="☆">ココに文字<br clear="all">
こんな風にします。

画像を2つ並べるときは
まず2つの画像のソースを並べて一番最後以外の<br clear="all">を削除してください。
<img src="http://~" alt="" border="0" align="☆"><img src="http://~" alt="" border="0" align="☆"><br clear="all">
こんな感じですね。(o^-^o) ウフッ

左右に画像を置き、その間に文字を入れるときは
一つ目の画像の<image>にalign="left"、二つ目の画像の<image>にalign="right"を追加し
その後ろに文字入力です。
<img src="http://~" alt="" border="0" align="left"><img src="http://~" alt="" border="0" align="right">ココに文字<br clear="all">
後はバランスなどを考えて改行をいれたりして下さい。

このまま字を入れると左揃えになり
画像と画像の間に入れるときは少し見た目が変だったので
中央にそろえるために文字を<div>というタグではさんでいます。
<div align="center">ココに文字</div>
と設定したらOKです!!

少し話は変わりますが、
まゆびのブログのテンプレートを変更したあと
表示が遅くなったなぁと思い、
いつもお世話になっている「KOROPPYの本棚」KOROPPYさん
相談してみると画像の表示方法について素敵な情報を教えていただきました。
画像を記事に貼るときに<img ~>の中にwidthとheightという設定を入れると
画像表示が速くなるとのことでした。
確かにFC2の画像貼り付けソースをそのまま使うと入っていません。
widthは画像の幅、heightは高さです。
FC2の場合は画像をアップロードしたときにサイズも出ていますので
それを参考に設定するといいと思います。
<img src="http://~" alt="" border="0" align="left" width="130" height="200">
のように設定します。
3月30日の記事よりこの設定を入れてみました。
少し表示が速くなったような気がします。
画像をたくさん使っている方は試してみてはいかがでしょうか?

右のサイドバーのほうもテーブル枠が重い原因だったようなので
シンプルな枠に変更し、少し画像を入れてみました。
こちらは明らかに表示しやすくなりました。ヽ(=´▽`=)ノ
KOROPPYさん、助言をありがとうございました。<(_ _)>


↓人気ブログランキング参加しています。
実は昨日まで「日記・雑談」のその他に登録していたのですが、
同じところに登録しているブログを見ると怪しいものが多くて。。。(苦笑)
自分にあった分類が見当たらないので、少しでも当てはまる「本・読書」の方に
変更させていただきました。
こちらは登録者も少ないようでなんと15:30現在84位でしたー♪(*゚▽゚*)
もしかしてちょっとずるいかも?(o ̄∇ ̄o)ヘヘッ♪
新着ランキングの方はなんと180位ですー♪o(*^▽^*)o~♪
ポチッとしてくださった方本当にありがとうございます。

もしもよろしければ今日もポチッとよろしくお願いします。
励みになります♪(*゚▽゚)ノ
スポンサーサイト



メイン

トラックバックURL


トラックバック

コメント

まゆびさんのところでは、HTMLでalignを利用されているのですね。
私はスタイルシートを利用しているので、
style="float:left;"と<br style="clear:both;" />
の組み合わせになります。
いろんなやり方があるんだなと改めて思いました。

ブログの軽量化、上手くいったようでよかったです♪

tableもwidth/heightをしていない画像も、
それを全部読み込むまで表示できないから重く感じる、
というような理由だったかと思います。

例えばwidth/heightを指定してある画像であれば、
その画像を重くて読み込めなくても、その幅分場所を取って、
どんどん先を読み込んで表示できるので、早く感じるのだったかと。

ということで、tableを止めることとwidth/heightの指定は、
劇的に早くなるものではないかもしれませんが、
積み重ねると結構違うのではないかと思います。
まゆびさん、こんにちはー♪
大変わかりやすい記事ですね♪
ぱっと見て、ちょっと文章が長いような感じを受けますが、
そこはさすがにまゆびさん。
平易な文章で読みやすいかったですよ。
この記事の内容はどこのブログでもホームページでも
使えますから、参考になる方も多いと思いますよ♪
そういえば、『ブログ向上計画』というカテゴリーですよね。
まゆびさんなりの、テクニックの解説ですね。
カスタマイズの記録にもなってますもんね。
本当に喜ばれると思いますよ♪ ('-'*)エヘ
>私はスタイルシートを利用しているので、
>style="float:left;"と<br style="clear:both;" />
>の組み合わせになります。
∑o(*'o'*)o ウオオォォォォ!! そんな方法もあるのですね!!
ちょっとコレを見ただけでは分からないのですが、
調べてみます♪(゚-゚*)(。。*)ウンウン
今までの経験から言って、CSSの方が楽そうだし。
CSSはいろいろ役にたちそうですしね。
テンプレートを変更していたときにも思ったのですが、
ひとつできれば応用できるのがCSSのいいところですよね。
ひとつでも理解できれば世界が広がるかもしれませんね♪

なんでwidthとheightを入れただけで速くなるのかなぁと思っていたのですが、
KOROPPYさんの説明で納得です。(゚-゚*)(。。*)ウンウン
サイズが分かるから場所だけ確保するんですね。なるほどー。
この知識があるかないかで全然違いますよねー♪
本当に勉強になりました。<(_ _)>
まゆびもととろさんにならってKOROPPYさんを
「師匠」と呼ばせていただきます!!(゚-゚*)(。。*)ウンウン
ありがとうございました♪ヽ(=´▽`=)ノ
yozoblogさん、こんばんは♪\(o⌒∇⌒o)/
またまた褒めていただきありがとうございます。
読みやすいのはまゆびの語彙が少ないからかもー!!(笑)
まゆび自身もこういった説明を読むのが嫌で嫌で仕方のない時期があったので
できるだけ読みやすいようにと頑張ってみました。

画像のまわりこみはブログをはじめた頃、
画像をアップしたときに記事の右側の余白が異様に多かったので
何とかならないかなぁと思い、いろいろ調べてみたんです。
名前も知らないから調べるのも苦労しました。(゚ー゚)(。_。)ウンウン
この記事がお役に立つ方がいれば本当に嬉しいですね♪
こんばんは、ちゃんと調べて記事にしているまゆびさまはどんどん前進してみえます。
タダ単に表示できるのと、こうやって人に説明を出来るのでは雲泥の差ですものね。いずれは(もう既に)あなたを「師匠」と呼んでいる方もみえるのではないでしょうか?
ととろは万年生徒ですが、これからもいろいろ不思議がりながらやっていこうと思っている怠け者です。でも、どうぞ呆れないで仲良くしてやってください。
もっと記事の見た目を考えようと反省。
ととろさん、たくさんのコメントありがとうございます。<(_ _)>
>タダ単に表示できるのと、
>こうやって人に説明を出来るのでは雲泥の差ですものね。
確かに自分のブログで表示するだけなら簡単なのですが、(嘘。)
自分の言葉で分かりやすく説明するのは本当に難しい。
一度やっただけだと自分の頭に残らないので、
記事にして備忘録にしようとやっている部分があります。
表現力をつける訓練にもなるかなと思って。o(*^▽^*)oエヘヘ!

>いずれは(もう既に)あなたを「師匠」と呼んでいる方もみえるのではないでしょうか?
いえいえまゆびもKOROPPYさんに弟子入りしますので!!(笑)
弟子仲間ということでよろしくお願いします。<(_ _)>
お互いにがんばっていきましょうねー♪ヽ(=´▽`=)ノ
まゆびちゃん、こんばんは♪
わぁ~素晴らしい解説です!!
以前、ミニもみのキャプチャー記事をアップした時に
右側に余白がたくさん出来てしまい、
すごく長い記事になっちゃったことを思い出しました。^^;
その時はyozoblogさん、そしてmioさんから
丁寧なアドバイスをいただいていたのですが・・・
ここのところ、ミニもみのキャプチャーから
すっかり遠ざかっていたもみじママでした。
今回のまゆびちゃんの記事も、
しっかりと勉強させていただきますm(__)m
( まゆびちゃんとお呼びするのは失礼かしら・・・^^; 笑)
また頑張って私もキャプチャーの記事を
アップしようと思います(^▽^*)/
ありがとうございましたm(__)m

もみじママさん、こんばんは♪ヽ(=´▽`=)ノ
素晴らしい解説だなんてー、嬉しいですー♪(*´∇`*)
まゆびもいろいろやってみて配置関係をいろいろ考えたことがありました。
もしかしたらまだ他にも楽な方法や、見やすい方法があるのかもしれませんが、
今のところはこの方法で画像を表示させています。

>ここのところ、ミニもみのキャプチャーから
>すっかり遠ざかっていたもみじママでした。
結構大変なんですよね、キャプチャを使った記事って。(゚-゚*)(。。*)ウンウン
今はもみじママさんもお子様が春休みでいつも以上に忙しいでしょうし。
またお暇なときにでも挑戦されたらいいのではと思います。

> まゆびちゃんとお呼びするのは失礼かしら・・・^^;
とんでもない!!まゆびはとっても嬉しいですよー♪

>キャプチャーの記事をアップしようと思います(^▽^*)/
ミニもみちゃんともみじママさんの会話、
楽しみにしてますね♪\(o⌒∇⌒o)/

コメントする

サイト管理者にのみ通知する
コメントをプレビューする?
ご利用のブラウザ、設定ではご利用になれません。

|

Copyright c 200x xxxxx. All Rights Reserved.

/for one column -->