2014年5月8日木曜日

Blogger 同じ画像を同一投稿内で2回使う時

通常は、あまり、無いとは思いますが、タイトルの通り、同じ画像を同一投稿内で2回以上使う時。
普通は、素直に、画像を挿入で入れますよね。
Blogger では、画像をクリックすると、ポップアップが現れて、拡大表示できるのですが ... 。
これでは、同一画像のサムネイルが、重複して、表示されてしまいます。
さて、。


実は、最近、写真の Blog の兄弟 Blog として、加工した写真をメインに据えたものを始めました。   右欄を参照。
写真 Blog では、ひとつの投稿に1枚の写真を基本にしていますが、                    MTT で始まるもの。
加工 Blog では、複数のものを載せて行くつもりです。                             mgt で始まるもの。
当初、加工 Blog では、ホームを開いた時、文章のみで構成されていて、
各投稿ページを開いて、初めて画像が出て来る構成でした。
これでは、魅力的ではないと思い、代表的なサムネイルを 追記 の区切りの前に挿入する事にしました。
ここで持ち上がったのが、文頭に書いた問題です。

作業は簡単でいいのですけれど ... 。
閲覧時、拡大ポップアップに、同じ画像のサムネイルが幾つも並ぶのは、 避けたいですよね。

そこで、思い出したのが、 画像を扱う HTML の構成 です。

投稿に挿入された画像は、次の様な HTML文になっています。
    分かり易い様に、文頭を字下げ着色して、表記しています。  実際は、ご存知の通り、改行なしで連続します。

 <div class="separator" style="clear: both; text-align: center;">
   <a href="http://4.bp.blogspot.com/-8bRogMK7***/U0AGP0bd***/AAAAAAAA***/n9IavEsj***/s1600/HanNyaShinKyou01.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
      <img alt="" border="0" src="http://4.bp.blogspot.com/-8bRogMK7***/U0AGP0bd***/AAAAAAAA***/n9IavEsj***/s1600/HanNyaShinKyou01.jpg" height="426" title="般若心経  Photo by ShiroYuki_Mot" width="640" />
   </a>
</div>

               http://shiroyuki-mot-says.blogspot.com/2014/04/chat27.html より 画像の HTML 抜粋

<div ... ><a href= ... ><img alt= ... /></a></div> という構成ですね。   以下、<div ... > は除外して説明します。
これは、前の文が 呼び出す画像の所在。 後ろの文が 表示する指定。 です。  アバウトな表現ですけれど。
通常、このふたつがペアになって、投稿に組み込まれます。
    ですから、普通にふたつ組み込めば、同じ画像であっても、拡大ポップアップでは別扱いです。

ならば、表示する設定の部分  (後ろの文) のみ、別の場所に、コピーして移動の上、サイズやタイトルを変えれば。
そうです。

これで、一件落着 です。

これで、同じ画像をサイズ等を変えて幾つ使っても、拡大ポップアップ上は ひとつ です。
ペアで指定した(通常の画像挿入) 場所でのみ、拡大ポップアップにジャンプします。
HTML を複製編集した画像は、いくらクリックしても、拡大ポップアップへは飛べません。  その旨の表記もした方がいいですね。


さて、作業手順を纏めましょう。
  1. 拡大ポップアップが開いて欲しい場所に、通常の方法で 画像を挿入する
  2. HTML に表示を切り替えて、画像の該当部分を探す
  3. <img alt= ... /> の文を見付けて、コピーする (範囲指定してコピー)
  4. そのまま、挿入したい場所に 移動して、ペーストする
  5. HTML から 通常の 作成モード に変えて、サイズや説明やプロパティを編集する
追記の区切り <!--more--> の後ろに置いた画像から、追記の前に、コピーする事も可能です。
閲覧時に、ホーム で追記の前のみの表示 になっていても、問題なく、画像が表示されます。


どの様な、形になるのかは、右欄 mgt My Graphics Trial :) から、この様にして書かれた Blog を ご覧下さい。 *1 .



[2014/05/14] 最後の一行を追加 *1 .
[2014/07/29] 画像 URL 一部 表記修正

0 件のコメント:

コメントを投稿