普通は、素直に、画像を挿入で入れますよね。
Blogger では、画像をクリックすると、ポップアップが現れて、拡大表示できるのですが ... 。
これでは、同一画像のサムネイルが、重複して、表示されてしまいます。
さて、。
実は、最近、写真の Blog の兄弟 Blog として、加工した写真をメインに据えたものを始めました。 右欄を参照。
写真 Blog では、ひとつの投稿に１枚の写真を基本にしていますが、 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 を複製編集した画像は、いくらクリックしても、拡大ポップアップへは飛べません。 その旨の表記もした方がいいですね。
さて、作業手順を纏めましょう。
- 拡大ポップアップが開いて欲しい場所に、通常の方法で 画像を挿入する
- HTML に表示を切り替えて、画像の該当部分を探す
- <img alt= ... /> の文を見付けて、コピーする （範囲指定してコピー）
- そのまま、挿入したい場所に 移動して、ペーストする
- HTML から 通常の 作成モード に変えて、サイズや説明やプロパティを編集する
閲覧時に、ホーム で追記の前のみの表示 になっていても、問題なく、画像が表示されます。
どの様な、形になるのかは、右欄 mgt My Graphics Trial :) から、この様にして書かれた Blog を ご覧下さい。 *1 .
[2014/05/14] 最後の一行を追加 *1 .
[2014/07/29] 画像 URL 一部 表記修正
0 件のコメント:
コメントを投稿