画像をクリックした時に別ウィンドウを開くようにするには

Bloggerで画像ボタンを押して記事に画像を張り付ける事が簡単にできます。

こうして作られた記事で画像をクリックすると、画像の拡大表示のページに遷移しますが、ユーザが意図した動作でないと思った時などにはWindowを閉じてしまうかもしれません。
それがGoogleなどの検索エンジンで偶然発見されて閲覧して頂いていたユーザであったら、サイトのブックマークはおろかサイトに辿り着いた時の検索キーワードすら覚えていないかもしれません。
うっすら覚えていたキーワードを再び入力して検索したときには、キーワードのちょっとした違いで大きく表示順が降下してしまえば、もう一度詳しく読みたかったユーザであったとしても、再び自分のサイトに辿り着いてくれるか分かりません。

という事で、拡大画像は別Windowで表示するようにしたい場合

<a href="～.jpg"><img src="～.jpg" /></a>

を以下のように修正します。

<a href="～.jpg" target="_blank"><img src="～.jpg" /></a>

しかし、Bloggerで文字の書式や改行が解釈されHtmlタグに変換されるたびに、無意味なHtmlが多数追加されて目標のタグが見つからなかったり、出来たとしても毎回苦労を強いられます。

Bloggerの記事投稿時には極力「作成」タブのみで記事を書きたいものです。
そんな時は、レイアウトMenuの「Htmlの編集」でテンプレートのHtmlから「//]]」を検索して、その直前に以下の関数をコピペします。
※　「ウィジェットのテンプレートを展開」のチェックをつけてから作業しましょう。

function createShadow(pID){
 var div = document.getElementById(pID);
 var imgtag = "";
 var a = div.getElementsByTagName("a");
 for(var i=0;i<a.length;i++) {
  var img = a[i].getElementsByTagName("img");
  if( img.length >0){
   a[i].outerHTML =  '<span class="shadow">'
      + '<a href="' + a[i].href + '" target="_blank">'
      + '<img src="'+ img[0].src +'" /></a></span>';
  }
 }
}

関数名を見ると想像つくと思いますが、画像に影をつけようと作った関数ですが、気にしなくても結構です。
※　CSSを適宜設定すれば影付けも可能だと思いますが、当サイトでは現状で枠のみになっています。


次に、以下のコードを見つけて

<b:if cond='data:blog.pageType == &quot;item&quot;'>
   <data:post.body/>

以下のようにコードを追記します。

<b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div class='entry-body' expr:id='&quot;entry-body&quot; + data:post.id'>
      <data:post.body/></div>
   <script type='text/javascript'>
      createShadow(&quot;entry-body<data:post.id/>&quot;);
   </script>

これで、過去の記事でも記事内の画像はすべて別Windowで開くように自動で変換されます。

この記事へのリンク記事を自身のBloggerへ作成する

関連記事

Blogger

SEO対策