2011年 04月 21日 ( 1 )

画像アップテクニック・第5回 画像の配置(後編その2)

【テクニック(3)画像の横にテキスト(文字)を配置する】

画像の説明をするときによく使う配置です。「左」配置と「右」配置の例です。

【文章が多いときは画像を小さく】
d0181824_7165991.jpg説明
左の画像は本文、ロゴ、メモ帳に挿入する画像の横幅を設定する画面です。相談室の設定値です。

【文章が少なく、画像が中心の場合】d0181824_7211898.jpg



 見事なさくら
   花びら?
    花房?

【ポイント】
①説明文は左配置・右配置に関わらず画像タグの後に入力する。
 改行や改行タグを忘れずに挿入する。
②画像の大きさは画像タグの表示サイズを書き変え、プレビューで確認しながら調整する。
 (アップロードの画像の大きさは横800ピクセルがよい)
③テキスト(文字)エリアを意識して改行やスペースを使って文字を配置する。
 (桜の画像の説明文は改行とスペースで配置を調整しています)
④閲覧者の表示文字サイズはいろいろです。
 (表示文字サイズを「中」にして作成し、「最大」でチェックすれば完璧!)

【自動改行処理について】
ブログの投稿記事は画像、ひらがな・漢字文字、カタカナ文字、英数記号文字で構成されています。
入力をしていく中で、改行したい位置で[Enter]キーを押し、行を改めたいときにり改行タグを挿入して記事を作っていきます。
そんな操作の中で、意識しなくても行幅を超えると自動的に改行してくれる機能があります。これが自動改行機能です。
ワードの入力で意識しなくても行幅一杯になると次の行に移る機能です。
文字サイズを変更しても、自動的に改行位置を変更してくれる機能です。
ブログにおいても自動改行機能があります。その自動改行には決まり事があるのです。
互換表示の設定や表示文字サイズの設定により、ブログの画面が異なるのはこの決まり事によるものなのです。これを理解すればもやもやも解決するでしょう。
お助けマンが発見した決まり事をお知らせしますので、参考にしてください。

【自動改行の決まり事】
(1)漢字、ひらがな、カタカナ等の日本語は1文字単位で自動改行する。
(2)英数記号文字は文字列単位(文字のかたまり)で自動改行する。
   文字列の途中が行末にかかる場合は文字列全体が次の行に移ります。
(3)英数記号の文字列が行幅を超えるときは、はみ出した部分は表示からカットされます。
   文字列の途中で分割されることはありません。
   なお、互換表示がオフの時は最大行幅を越える場合のみはみ出し部分がカットされます。

次の画像と記事は上の画像のソースコードとその説明文です。
互換表示をオン・オフし、文字サイズをいろいろ変えて表示画面を観察してください。
画像タグから最後の・・「フル入力しています」までは改行なしで入力してあります。
上記の決まり事で解析してみてください。

d0181824_11133842.jpg左は横幅300ピクセルの画像を「左」指定で挿入しています。ABCDEFGHIJKLMNOPQ??画像タグ((((#IMAGE|d0181824_11133842.jpg|201104/21/24/|left|300|114#))))はカッコを削除してフル入力しています。


【英数文字列が設定によってゴチャゴチャになっていることがわかります。記事の中に英数文字列を挿入するときは特に注意が必要なことが分かります、】

【基本的なことを理解するといろいろと応用ができます】
下の画像配置はその1例です。

 左半分
d0181824_2285216.jpg 中央
d0181824_2217484.jpg 右半分
d0181824_22224343.jpg 幹
d0181824_22133793.jpg 幹と枝
d0181824_22155238.jpg 花房
d0181824_22162948.jpg


今日はここまで、
さらに続きます。お楽しみに。
次回投稿は来週の月曜日の予定です。


   

by pc-otasukeman | 2011-04-21 09:05 | Comments(6)