滑って転んで…

画像を掲載する際に左右に寄せることによって、ブログを見やすくする方法があるという事をご説明しました。


今回は、その画像の回り込みを利用した際に良く起こる、【落とし穴】について解説したいと思います。


まずは、下の例をご覧下さい。こんな経験はありませんか？

---

例１）

これは豊後大野市三重町のいもの力屋のいも揚げパンです。


本当に美味しいから一度お試しあれ♪

---

画像を左寄せして、解説文を書き、二枚目も同じ様に処理したら、綺麗に並ばないでこんな具合に逆に見難くなります。


単純に、文字を増やすか、改行を多く入れれば、綺麗に並べることも可能ですが、いちいち確認しないといけないし、結構面倒な作業です。


この現象を回避する最高の答えは、「回り込みはここまでです」という命令を与えることです。



それが↓のHTML。(コピーして活用下さい)


<br clear=all>


これを回り込ませたい文章の最後に入れると、そこでクリアーされますので、文章が短くても次の画像は回り込みを解除された状態で、普通に登録できます。


これを利用すると…

---

例2）

これは豊後大野市三重町のいもの力屋のいも揚げパンです。（※ここに上のHTML）



本当に美味しいから一度お試しあれ♪（※ここに上のHTML）

---

こういう風に、見やすいブログが出来るわけです。


HTMLはとっつきにくいイメージがありますが、知っていればさらにブログが見やすく・楽しくなりますので、これからも定期的に配布していきたいと思っています。


※質問やご意見は、常時コメント欄やメールフォームで受け付けています。



  

最近馬鹿らしい記事しかエントリーしてなかったので、ここらでちょっと本来の活動に軌道修正ｗ

数度に渡ってお送りしてきた画像投稿シリーズも、いよいよ応用編に突入します。
初心者の方は、是非始めのほうから、ご覧下さい。

参照：画像の投稿カテゴリー



まずはこちらをご覧下さい。

例１）
この写真は大分市金なべ亭のチキン南蛮です。本当に美味しいんですよね～♪

例２）
この写真は大分市金なべ亭のチキン南蛮です。本当に美味しいんですよね～♪



例１と２のどちらが見やすいか、どちらが見る人に優しいか、一目瞭然ですよね？


例１では、普通に画像を登録し、その後に文字を入力しています。


例２では画像を左寄せで登録し、その後に文字を入力しています。


これは画像登録画面で簡単に操作することが出来ます。


このシリーズではもうお馴染みとなった、画像登録画面。
今回はこの赤い丸で囲んだ『回り込み』をいう項目に注目してください。(この画像はクリックで拡大できます)


回り込みには以下の四種類があります。




①なし


②左寄せ


③中央揃え


④右寄せ




上の例２で利用したのは②左寄せ。


この様に、回り込みを利用することで、より閲覧者に優しいブログにすることが可能です。


ただし、ブログの入力部分に比べて画像の横幅が大きい場合は、回りこみは逆効果となりますので、ご注意下さい。


たま～に見かける、こういうブログ。


例3）
これは豊後大野市朝地町にある、『道の駅　あさじ』です。美味しいソフトクリームもありますし、レストランも人気があるんですよ。


これが無理をして左寄せを利用している良くない例です。
こういう大きな画像の場合は、むしろ中央揃えの方が、無難なのです。



【まとめ】


・画像と文字を見やすく併用するために、『回り込み』という画像掲載方法がある。
・回り込みには四つの登録の方法がある。
・画像が大きい場合、無理に回り込ませるのは逆効果でもある。



※質問やご意見は、常時コメント欄やメールフォームで受け付けています。

  

画像の掲載方法に関して、見やすくリサイズして掲載する事を前回記事でお薦めしました。


それでも「やっぱりなるべくおおきく載せたいんだよね」って人の為に、大きな写真をブログデザインを壊すことなく、掲載する方法をお届けします。


今日も初歩的な秘術になりますので、ベテランの方はスルーしちゃってください。


まずは二つの画像を用意します。

　

見た目、全く同じ画像に見えますが、実は全く同じです(笑)


ですが、向かって右の画像にマウスのポインタをあててください。クリックできますよね？


その画像をクリックすると、原寸の画像が別窓で開きます。


これをサムネイル表示と言います。


このやり方だと、原寸でないと見ることが出来ない小さな文字などの入った画像を、大きくして見せる事ができますし、オリジナルそのままの掲載よりも、デザイン的にスッキリしています。


チェックするのは、赤丸で囲んである、ファイルサイズの「オリジナルサイズ」と、表示方法の「サムネイル」の二箇所だけ。（画像はクリックで拡大されます）

簡単ですよね。

ちなみに、じゃんぐる公園でのサムネイルは、必ず横幅100pxで表示されます。

これを変更したい場合は、HTMLの中の、width="100"という表示の部分を探し、この100を任意の大きさに変えれば、可能です。



これを応用すると…こんな面白いものまで作れます。


　←クリックしてみて♪


ただし、サムネイルでの画像表示、オリジナルサイズでの画像表示ばかりしてたら、あっという間に画像容量が減っていきます。


長くブログを続けて行きたいなら、やはりお薦めはリサイズしての画像掲載だという事を、覚えておいて下さい。  

※記事内の画像は、クリックすると大きくなります。参考にして下さい。

まずはこのエントリーを御覧下さい。


○サンプル記事１


もう何が言いたいのか？分かる方も多いでしょう。
デジカメの画像をそのままブログに登録し、記事に載せた場合、この様な感じで、枠からはみ出し、スクロールバー付きの記事になります。

どうですか？見難くないですか？
たまにこういうブログ記事を見かけることがありますよね？

もちろん、これがいいという方もいらっしゃるでしょうが、もっと見やすい方が良い、という前提でお話しますので、悪しからず。



左は画像登録の画面です。これはもう皆さんご存知ですよね。


登録する画像を選んだ後、いくつかの項目を選ぶ事が出来ますが、今回の問題では、このうち『ファイルサイズ』と書かれている項目に注目してください。
選択肢は「オリジナルサイズ」か「リサイズ（画像縮小）」のどちらかです。



オリジナルサイズを選択した場合、デジカメの画像がそのまま登録され、上記の様な大きな記事が出来上がります。
この問題を克服するために、最適な解決方法は、「リサイズ（画像縮小）」を選択する事です。


今回のサンプルの写真は800×600という大きさのデジカメ画像です。
これを横幅200の大きさに変更して登録する事とします。
というと、何だか難しく思われるかもしれませんが、操作はいたってシンプルです。


まずは先ほどの画面に再度注目。
リサイズの項目の右側に「横幅」と書かれたボックスが用意されています。
ここに200と打ち込んで、登録してあげましょう。

ただこれだけです。　



そして出来上がった、エントリーがこちら。


○サンプル記事２


どうですか？
同じ写真・同じ記事内容を書いてますが、やっぱりこっちの方が見やすいですよね。



ちなみにブログに登録できる画像の数には限界があります（じゃん公では一般で100Ｍ、最大500Ｍ）が、オリジナルで登録するのと、リサイズで登録するのとでは、使用する容量分が、1/10程度に削減されるのです。


つまり…長く続けたい人なら、なおさら、オリジナルでの登録よりも、リサイズでの登録をお薦めしたいですね。


それでも！

「臨場感のある大きな画像を載せたい！」と言う方の為に、次回ではオリジナルサイズの画像を見やすく登録する方法をレクチャーします。  

お久しぶりです。


さぼってたわけではありません(笑)


忙しかった（はず）ですｗ


言い訳はともかく…


今日から、画像投稿における注意事項をいくつかご説明したいと思います。


皆さんはこんな画像の投稿をしていませんか？







普通、デジカメで撮影すると、だいたいはこういう感じで横向きに撮影します。



ですが、このままブログに載せると、見辛いし、格好悪いですよね？


ではどうやって縦にすればよいのか？
方法はたくさんあります。


ですが、たくさん書くと分かり辛いかもしれないので、一番簡単な方法をレクチャーします。


画像をブログに載せる前、つまりあなたのパソコンに入っている段階で、回転させちゃいましょう。


①縦画像を右クリック
　　↓↓↓
②左回りに回転（場合によっては右回りに回転）をクリック


ただこれだけです。
簡単ですよね？







では次回はブログに画像を載せるための注意事項をレクチャーします。


お楽しみに♪


出演：今年の夏、トイレに行っている隙に私のご飯を平らげた罰として、丸坊主にされた鈴木君