Blog記事内の画像の拡大 （３）： スクロールバー表示

エディオングループのISPであるエディオンネットの「エンジョイ！ブログ」を使用していますが、Blog記事内の縦長画像をクリックして拡大画像を表示したときに画像の下部が一部切れてしまうことがあります。

この問題を解決するには 「エンジョイ！ブログ」で自動生成される拡大画面表示用のHTML内のJavascript で、画面上部のタイトルバー、アドレスﾊﾞｰ や下部のタスクバーの高さ等を考慮してwindowのサイズを決定するように改良して頂くのが最善ですが、ここでは Blog記事をHTML編集モードにして一部変更する方法を紹介します。

Blog記事をHTML編集モードで表示すると、次のようになります（画像の部分）。

<a onclick="window.open(this.href, '_blank', 'width=600,height=800,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"
href="http://k-ichikawa.blog.enjoy.jp/.shared/image.html?/photos/uncategorized/2013/05/30/119_2.jpg"><img width="200" height="266" title="119_2" alt="119_2"
src="http://k-ichikawa.blog.enjoy.jp/blog/images/2013/05/30/119_2.jpg" border="0" /></a>

ここで、scrollbars=no を scrollbars=yes に変更して保存すると、拡大表示画面でスクロールバーが表示され、これをドラッグすると切れた（隠れた）部分を表示できます。

従来の画像　（scrollbars=no）
　

編集した画像　（scrollbars=yes）
　

（参考）　window.open() の主なパラメータの意味は下記のとおり。

　this.href　：　href 属性で指定されたURLを表示
　_blank　：　新規ウィンドウ
　width　：　ウィンドウの幅
　height　：　ウィンドウの高さ
　scrollbars　：　スクロールバーの有無
　resizable　：　ウィンドウサイズのリサイズ可否
　toolbar　：　ツールバーの有無
　location　：　アドレスバーの有無
　menubar　：　メニューバーの有無
　status　：　ステイタスバーの有無