画像をオンマウスでその場で大きく表示するプラグイン




アメブロカスタマイズのわざめーばです。

こんにちは。

以前からリクエストの多かった、アメブロの記事に貼り付けた画像をオンマウスでその場で大きく表示(オリジナルサイズで表示)するプラグインを公開します。

このプラグインを設置すると、記事からはみ出さないように画像の表示サイズを指定して本来の大きさよりも小さく表示している場合や、画像をサムネイル画像で表示している場合などに、マウスカーソルを上に当てるだけでその場で大きく表示します。

ただし、大きくといっても、アップロードされているオリジナルサイズより大きくは表示しませんので、元々オリジナルサイズで表示されている場合はそれ以上のサイズに拡大はされませんのでご注意下さい(無反応に見えます)。

では、以下設置方法です。



フリープラグインに設置



本プラグインは、アメブロのフリープラグインに以下のように記述することで設置できます。


<script src="http://www.google.com/jsapi"></script>
<script>google.load('jquery','1')</script>

<script src="http://p.wazameba.com/njs/jqqib.js"></script>


先頭の2行は、フリープラグインを利用したカスタマイズでご紹介している、jQueryを利用する準備ですので、既にフリープラグインに記述されている場合は必要ありません。

つまり、実質、4行目に書いてある1行をフリープラグインに追加するだけです。



全ての画像に対応させる



実は、本プラグインを上記の方法で設置した場合、PCなどからアメブロの記事エディタの画像貼り付け機能を使って貼り付けた画像に対してのみ動作するようになっています。

もし、他の画像(例えば直接imgタグを書いた場合やFlickrからの直リンク画像など)にも対応するようにしたい場合は、以下のコードも追加して下さい。



<script>$(function(){$('.articleText img').qib();});</script>


ただしこの場合、記事内で使っているアイコン画像や絵文字などにも反応してしまいますのでご了承下さい。



写真のような枠を付けてみる



次に、本プラグインによって大きく表示された画像に、本記事の冒頭の画像にあるようなをCSSを使ってつける方法をご紹介します。

ユーザーCSSの末尾に以下のようなコードを追加してみて下さい。


#qib_preview {
  margin: -7px 0 0 -8px;
  padding: 15px;
  background-color: #ffffff;
  border: 1px double #999999;
}


詳細に関しては割愛させて頂きますが、これを応用すると、もっとお洒落な枠をつけたりすることも可能になると思いますので、興味のある方は、色々と試してみてくださいね。



最大表示サイズを制限する



最後に、表示される画像が大きすぎる場合の対処法です。

ユーザーCSSの末尾に以下のようなコードを追加することで、表示される画像の最大サイズ(横幅)を制限することができます。


#qib_preview, #qib_preview img {
  max-width: 600px;
}


赤文字600pxのところには、表示する画像の最大サイズ(横幅)として設定したいサイズを記述してください。

以上、画像をオンマウスでその場で大きく表示するプラグインをご紹介しました。

よかったら試してみて下さいね。



関連記事



フリープラグインを利用したカスタマイズ
CSSを編集してアメブロをカスタマイズする手順
アメブロカスタマイズで成功するブログを作ろう トップページ



コメント(104)