以前の記事では、LightBoxのような表示をさせるために面倒な作業が必要でした。
理由は、いつも記事を書くために使っているWindows Live Writerでは、サムネイルとリンクする画像を別の画像とする場合に、ページの作成が面倒なためでした。
単純にサムネイルが、リンクする画像の縮小版で良いなら、class記述を<a>タグに追加するだけでLightBoxのような表示が可能となります。ただし、一度だけ、前もってテンプレートにコードを記述する必要はあります。
So-netブログ以外のWebサービスなどが利用できる場合は、ライブラリをそちらに置くことで、もっと高度なことは行えますが、ここではSo-netブログ単体での実現方法を記載しています。
以下、細かい説明は省きますので、詳しくは以前の記事と参考書籍を参照願います。
なお、このスクリプトはFC2ブログでも使えました。
テンプレートへの追加
ここからの変更は一度だけ行えば、そのサイトのすべての記事で有効となります。
So-netブログの管理ページで、「デザイン」をクリックし、次に、その下の「テンプレート管理」をクリックします。
「テンプレート管理」のページの下の方にある「HTML編集」という部分で「HTMLの追加」をクリックします。
「HTML編集」の画面になるので、HTML名に名前を入力し、ソースコード内の</head>という部分を探し、</head>の前に、下記ソースコードを追加します。
<!-- jQuery --> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.min.js"></script><!-- Detail Graphic Display CSS & Script --> <script type="text/javascript"> $(function() { $("body").append("<div id='gray_back'></div><div id='image_detail'></div>"); $("#gray_back").click(function() { $(this).hide(); $("#image_detail").hide(); }); $("#image_detail").click(function() { $(this).hide(); $("#gray_back").hide(); }); $("a.detail").click(function() { var image_obj = new Image(); image_obj.src = $(this).attr("href"); var width_margine, height_margine;var timerID = setInterval(function() { if (image_obj.complete) { width_margine = - image_obj.width / 2; height_margine = - image_obj.height / 2; $("#image_detail").css({ marginTop: height_margine, marginLeft: width_margine });$("#gray_back").show(); $("#image_detail").show().html("<img src='"+image_obj.src+"' /><img src='http://blog.so-net.ne.jp/_images/blog/_f95/*****/close.png' class='detail_close' />");image_obj = null; clearInterval(timerID); } },100);$("#image_detail img.detail_close").click(function() { $("#gray_back").hide(); $("#image_detail").hide(); });return false; });if($.browser.msie && $browser,version<7) { $(window).scroll(function() { $("#gray_back").get(0).style.setExpression("top","$(document).scrollTop()+'px'"); $("#image_detail").get(0).style.setExpression("top","($(document).scrollTop()+$(window).height()/2)+'px'"); }); } }); </script> <style type="text/css"> |
一か所だけ、自分のblogに合わせて変更する必要があります。黄色の部分は、拡大画像の右上に表示する「閉じる」ボタンです。
この画像は自分のblogに置いてパスを調べて、そのパスをソースコードに記述します。パスの調べ方は、この画像を貼った記事をテスト用にアップし、画像のプロパティを調べるとわかります。テスト用の記事は削除しても画像はblogに保存されたまま残っています。
また、オレンジ色の「detail」は記事で指定するclass名なので、変更する場合はテンプレートと記事で同じ名前にする必要があります。
記述が完了したら、「保存」をクリックします。
最後に保存したHTML名の左の○をクリックして●に変えて適用させます。
Abobe Flash対策
ページ内にFlashがある場合、拡大画像よりも上にFlashが表示されてしまいます。
Flashの記述部分に、
<PARAM NAME=wmode VALUE=transparent>
を追加し、<EMBED>の内部に、
wmode=transparent
を追加することで回避できます。
記事への適用
以上で準備が整いました。あとはいつも通り記事を書きます。
記事をアップする前に、ソースコードを表示して、リンクする画像の<a href=…>というタグを探します。そして、
<a href=…
を
<a class="detail" href=…
とclass記述を追加します。変更はこれだけです。(記述するclass名は、ソースコードのオレンジ色の部分のclass名と一致させます)
まとめ
So-netブログにLightBoxのような表示を適用するのは、一回だけテンプレートの記述さえ行えば、あとは、リンクする画像の<a>タグにclass記述を追加するだけなので、試してみて下さい。
追記
2014年5月14日ごろに、デフォルトHTMLに変更があったようで、ここに示したようにHTML編集で、独自のHTMLを追加した場合、レイアウトが崩れる場合があります。私の場合は記事の最後のTwitterやFacebookのボタンが重なって表示されました。
レイアウトが崩れた場合、HTML編集の部分で、一度デフォルトHTMLに戻してレイアウトが直るかを確認します。
直る場合は、デフォルトHTMLの変更点を探して追加することも可能ですが、最初から作り直した方が早いでしょう。