アメブロで画像拡大のカスタマイズをする

はい、こんにちは♪
はるかです。
リクエストのあった、画像拡大を紹介したいと思います。

重大追記(2017.04.10)
アメブロは、昨今の事情からHTTPSへ移行しました。
そのときに、個人作成のプラグインが動かなくなりました。
従いまして、本記事を利用しての画像拡大はできません。
なので、記事内容は過去こういった事があったという事で保存しておきます。



それではアメブロで画像拡大する方法を説明します。
既にフリープラグインを使ったカスタマイズをしている人は、
的便飛ばしてくださいね。

はじめに

今回は、アメブロに搭載されているフリープラグインという機能を使います。

フリープラグインについては後述します。
まず、拡大と言っていますが、なぜ拡大が必要なのでしょうか？

アメブロでは横サイズ800の画像までアップロードできるのに
実際は凄く小さな画像(横サイズ220px)でしか表示しません。

これは、サムネイルといって、大きいままで掲載すると画像が
大きくなりすぎるのすぎるので縮小して可読性をよくしているのです。
画像が大きすぎると文章が読めず、画像しか目立たなくなるのを
防いでいるわけです。

でも読者が、大きな画像でみたい！
と思ったときには、それができるようにカスタマイズしたいですよね。
それでは、順を追って説明します。

１．フリープラグインを使う準備をする

今回は、アメブロならだれでも使える
フリープラグインという方法を使います。

フリープラグインとはなんぞや？
という方もいらっしゃるかもしれません。

でも安心してください。
そういった方向けの説明をしますので、必ず拡大できるようになります。

まず、アメーバのマイページを開いてください。

一番上の右側を見てください。
歯車のマークと≡みたいなマークが並んでいます。
その≡を押すところからカスタマイズは始まります。

≡をクリックすると、吹き出しでワッとメニューが出てきます。
その中から「配置設定」を探してください。


配置設定をクリックすると、サイドバーの配置設定という
画面が表示されます。
この画面は、初めて見ると見にくいですが、
上に黒い太字でメニューが書いてあります。

使用しない機能　　使用する機能

という風に二つの枠があります。
あなたの画面では、フリープラグインは
「使用しない」になっていると思います。

この使用しないという枠の中にあるフリープラグインを
マウスの左を押しっぱなしにして、持ち上げて、右側に落とします。
フリーセルのドラッグアンドドロップという操作です。

画面はこんな感じです。



持ち上げるのは分かるけど、右側のどこに置いて良いのか
分からない！と思うかもしれません。
そんなときは、どこでも良いです(﹡ˆᴗˆ﹡)
私の例の場所でも良いですよ♪

置く場所は、拡大以外のカスタマイズをする時に必要になります。
今回のカスタマイズだけでは、場所は関係ありません。
出来たら右でも左でも良いので一番上に置いて見てください。

場所が決まったら「保存」を押します。



保存は、忘れずに確実に押してくださいね♪
ここまでできたら、半分できたようなものです＼(^O^)／
まだ、画面などには何も変化が無いので
後半戦も頑張って設定してみてください。

２．フリープラグインの文字列をコピーする

画像を拡大するフリープラグインは、たった3行です。
この3行をコピーしてみましょう。

手で打ってもできますが、間違ったり面倒だったりしますので
簡単に確実にコピーする方法をお教えします。

以下の拡大のフリープラグインは、私が作った物です。
変なプラグインではないので安心してお使いください。

<script src="http://www.google.com/jsapi"></script>
<script>google.load('jquery','1')</script>
<script src="http://usrcss.ameblo.jp/skin/templates/a6/dd/10056465380.css"></script>

この3行です。たった3行で拡大ができます♪
これを確実にコピーするには、画面の黒いところをダブルクリックします。
すると、全体が選択されたようになりますね。

この全体が白くなって反転した状態のときに、
マウスの右クリックを押して、コピーを選ぶか
あるいは、CTRLキーとCキーを同時に押します。

私はCTRL＋Cをオススメします。（Windowsの話です）
マッキントッシュでは別のボタンになりますが、ここでは解説しません。

ここまでいくと2/3おわりです。あと1/3ですね♪

３．フリープラグインの文字列をセットする

１章と同じようにマイページを開きます。
次に同じようにブログ右側の≡の部分をクリックして
「プラグインの追加」を選びます。

すると、フリープラグインの追加画面が表示され
プラグインリストとフリープラグインというタブの付いた
画面がになります。
そこで、最初はプラグインリストが選択されている状態になるので、
「フリープラグイン」の方をクリックします。



これでフリープラグインをいれる画面が表示できました。
下の枠の中に、先ほどコピーした3行をペーストします。

枠の中で、右クリックしてペーストを選択するか
CTRLキーとVキーを同時に押します。
CTRL+Vがオススメです。



最後に忘れずに「保存」を押します。

以上で画像拡大のプラグインを使ったカスタマイズが完成しました。
ご自分のブログを表示してF５キーを押して画面を更新して見てください。

おまけ

2章でコピーしたのは、私のプラグインで
画像にマウスを当てるだけで拡大するという方式です。

実はもう一つ方法があります。
一番分かりやすい例が、このブログです。画像をクリックしたら
拡大するという仕組みです。
この拡大もアメーバで実現できます。

このプラグインは、リアナさんが公開しているものです。

導入方法は、2章でわたしのプラグイン3行をコピーしましたが
以下のスクリプトすべてをコピーします。

<script src="http://www.google.com/jsapi"></script>
<script>google.load('jquery','1')</script>
<script src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script>
var border_px = 5;
var border_color = "#ffffff";
var fade_in_time = "0";
var fade_out_time = "0";
var back_color = "#000000";
var back_parent = 0.1;
var ani_sw = "OFF";
var r_click="OK";
var D_center="N";
var D_close="N";
var D_title="NN";
var lbox_expand="";
window.onload = function(){lbox_v3_0();}
</script>
<script src="http://usrcss.ameblo.jp/skin/templates/63/7e/10028290068.css" 
type="text/javascript"></script>

あとは同じように設定すると使う事ができますよ。

ではでは、またね～♪