自在コラム

⇒ 日常での観察や大学キャンパスでの見聞、環境や時事問題、メディアとネットの考察などを紹介する宇野文夫のコラム

☆ブログの技術⑤

2005年11月26日 | ⇒ノウハウ検証

  文中に貼り付けた写真画像の横に文が流れると随分とすっきりする。ワード文章でそれをするには、画像を貼り付け、右クリックで「図の書式設定」、次いで「レイアウト」、その中から折り返しの種類と配置を選べば簡単に写真の横に文章が流れてくれる。サイト「gooブログ」でこの作業を行うには、編集画面の「画像を選択」をクリックして、予め登録しておいた画像を選択すると、画像の位置とサイズが固定されて貼り付く仕組みだ。ところが、文中に自由な大きさで気に入った位置で、しかも画像の横に文章を流すというマニュアル説明が十分ではない。

    テーマ「画像の回り込み」

  そこで、「自在コラム」ではちょっと工夫をした。画像の横に文章を流す方法はいろいろあると思うが、以下は「自在コラム」流である。ちなみに左の画像は私が金沢で一番うまいと信じてやまないある寿司屋の「さば寿し」である。

  まず、TEXTエディターで文章を作成する。次いで画像フォルダから予め登録しておいた画像の上を右クリック、画像のURLを表示させて、それをコピーする。文章画面に戻り、画像を入れたいところに、カーソルを合わせクリック、次いでイメージ挿入の「IMG」をクリック、「スクリプト プロンプト」のウィンドーにURLを貼り付けダブルクリックすると、画像貼り付けのスクリプトが挿入される。

  しかし、この作業では文章は横に流れない。で、どうするか。スクリプトはこうなっている(…は途中略)。

 <a href="http://"><imgsrc="http…….jpg"></a>

  このスクリプトのjpg"以下に画像の左の回り込みを指示するstyle="float:left; margin:5px;"を挿入する。5pxは画像と文字の間隔を空けるスクリプトなので数字を変えることができる。回り込みのスクリプトはこうなる。

 <a href="http://"><imgsrc="http…….jpg"style="float:left; margin:5px;"></a>

   この作業を終えたら一度「投稿」(下書きのまま保存)して、今度はHTMLエディターを開く。すると、TEXTエディターではスクリプト部分が実際の画像となって表れる。画像の上を左クリックすると伸縮の操作ができる。携帯電話カメラ(1メガ)で撮ったさば寿しでも、画像を縮小すればそれなりに見える。

  ちなみに、この画像のように青縁を除く場合は、スクリプトの頭の<a href="http://">を取ればよい。これも随分とすっきりとする。

⇒26日(土)朝・金沢の天気   くもり 

コメント
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする