So-netブログでのLightBoxのような表示(2)(旧サイト・アーカイブ)

Pocket

以前の記事では、LightBoxのような表示をさせるために面倒な作業が必要でした。

理由は、いつも記事を書くために使っているWindows Live Writerでは、サムネイルとリンクする画像を別の画像とする場合に、ページの作成が面倒なためでした。

単純にサムネイルが、リンクする画像の縮小版で良いなら、class記述を<a>タグに追加するだけでLightBoxのような表示が可能となります。ただし、一度だけ、前もってテンプレートにコードを記述する必要はあります。

So-netブログ以外のWebサービスなどが利用できる場合は、ライブラリをそちらに置くことで、もっと高度なことは行えますが、ここではSo-netブログ単体での実現方法を記載しています。

以下、細かい説明は省きますので、詳しくは以前の記事と参考書籍を参照願います。

なお、このスクリプトはFC2ブログでも使えました。

テンプレートへの追加

ここからの変更は一度だけ行えば、そのサイトのすべての記事で有効となります。

So-netブログの管理ページで、「デザイン」をクリックし、次に、その下の「テンプレート管理」をクリックします。

「テンプレート管理」のページの下の方にある「HTML編集」という部分で「HTMLの追加」をクリックします。

LightBox-Header-02

「HTML編集」の画面になるので、HTML名に名前を入力し、ソースコード内の</head>という部分を探し、</head>の前に、下記ソースコードを追加します。

LightBox-Header-03

<!-- 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">
#gray_back {
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
background:black;
opacity:0.50;
filter:aplpha(opacity=50);
display: none;
}
#image_detail {
position:fixed;
top:50%;
left:50%;
display: none;
}
#image_detail img.detail_close {
position:absolute;
top:-10px;
right:-10px;
cursor:pointer;
}
* html #gray_back {
position:absolute;
}
* html #image_detail {
position:absolute;
}
</style>

一か所だけ、自分のblogに合わせて変更する必要があります。黄色の部分は、拡大画像の右上に表示する「閉じる」ボタンです。

close

この画像は自分のblogに置いてパスを調べて、そのパスをソースコードに記述します。パスの調べ方は、この画像を貼った記事をテスト用にアップし、画像のプロパティを調べるとわかります。テスト用の記事は削除しても画像はblogに保存されたまま残っています。

また、オレンジ色の「detail」は記事で指定するclass名なので、変更する場合はテンプレートと記事で同じ名前にする必要があります。

記述が完了したら、「保存」をクリックします。

LightBox-Header-04

最後に保存したHTML名の左の○をクリックして●に変えて適用させます。

LightBox-Header-06

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の変更点を探して追加することも可能ですが、最初から作り直した方が早いでしょう。

関連記事:

Amazonで見る
Pocket