アメーバブログに掲載された画像は、元画像が高精細であっても、記事上には圧縮して間引きされた画像が表示されます。 これは、アメーバシステムの通信上でやむを得ない処理です。 しかし「Ameblo Lightbox JS」は、アメーバの画像サーバーの元画像を呼び出して表示するので、非圧縮の高品位な画像を見る事ができます。
とりわけ画像に重きを置くPCユーザーにとって、このツールは価値があるでしょう。 ブログページ上の画像の価値に、このツールは何度も気付かせてくれます。
2022.12.10更新
「Ameblo Lightbox JS」の動作する範囲
ツールが動作する場所
このツールは、以下のページや画面上の画像を「Lightbox」に拡大表示できます。
▪ アメーバブログの各ユーザーの「ブログ」ページ
▪ アメーバブログの各ユーザーの「画像一覧」ページ（詳細表示/リスト表示）
▪ アメーバブログの「アメンバー記事」ページ
▪ アメーバニュースの各種ページ
▪ アメーバランキングページ
▪ ハッシュタグページ
「Lightbox」に表示できる画像と非対応の画像
◎ ページ上の全ての「img要素」を対象として「Lightbox」に拡大表示します。
◎「リンクカード」「Ameba Pick」のカバー画像、「Amebaスタンプ」「各種のバナー」「アメーバ絵文字」なども「Lightbox」に拡大表示できます。
◎「ブログヘッダー」「ブログ背景」の画像等は非対応です。（img要素ではない）
◎「リブログカード」のカバー画像、本文に埋め込まれた「ツイッター」「インスタグラム」の画像、ページ上のAD画像などは「iframe」内の表示で非対応です。
◎ クリック防止を施した画像などは「Lightbox」に表示できない場合があります。
ページ上の画像を「Lightbox」に表示する
ブログページ上の画像を「Lightbox」に表示する操作は、「Ctrl+」「Click」のモードにより異なります。 ブログページ以外での操作は、モードに関係なく同じです。
「Ctrl+」モード
「Ctrl+」モードは、画像に対する操作を「Ctrl+左クリック」に統一した、基本的な操作モードです。 このモードは、ページ上のリンク操作が通常通りに行えます。
◎ ページ上の画像を「Ctrl+左クリック」すると、その画像が「Lightbox」に拡大表示されます。（サイドバーやメッセージボード上の画像などを含む）
◎「画像一覧」（詳細表示/リスト表示）のサムネイル画像やランキングのサムネイル画像なども、「Ctrl+左クリック」で「Lightbox」に表示されます。
「Click」モード
「Click」モードは、ブログ記事上の画像を「左クリック」するだけで「Lightbox」に表示する事が出来ます。 ただし、この操作ができる範囲は限定されます。
◎ 対象になる画像は「ブログ記事の本文」に掲載された画像に限られます。
◎ サイドバー、メッセージボード、記事下のページャー部などは範囲外になります。
「Click」モードはブログ閲覧時の操作を簡単にしたモードで、他の機能は同じです。
モードの変更
「Lightbox」の上部にマウスポインターを移動すると、設定ボタンが表示されます。
● Ctrl+ または Click のボタンを押すと、モードが切り換わります。
◎ モード変更を行うと、直後にページがリロードされます。
◎ モード設定は全てのブログに対して有効で、次に変更するまで保持されます。
◎「Click」モードが選択可能な「ブログページ」「アメンバーページ」で表示した「Lightbox」でのみ、モードボタンが表示されます。
「Lightbox」の終了
画像を「Lightbox」に表示すると、拡大表示になります。
●「Lightbox」内を「左Click」すると、「Lightbox」が終了して元のページ表示に戻ります。
◎「画像一覧」の「精細表示」「リスト表示」の画面で「Lightbox」を表示していた場合は、元の「精細表示」または「リスト表示」の画面に戻ります。
◎「Lightbox」は別画面の様に見えますが、元のページを覆う枠に過ぎません。
「EX拡大」と「スクロール拡大」
「Lightbox」に表示された画像を、更に拡大表示する事が可能です。 この拡大仕様は「EX拡大（Graphic Zoom）」「スクロール拡大（Comic Zoom）」の2種を利用できます。
2種の拡大仕様を実装した理由は、画像の縦横比によって拡大が過剰・不足する場合が生じるためです。 2種類の拡大率をユーザーの必要に合わせて適当に設定する事で、殆どの場合に拡大仕様を切替えるだけで、満足な拡大結果が得られると思います。
拡大操作のダイアグラム
「Ameblo Lightbox JS」ver. 2.4以降は「EX拡大」と「スクロール拡大」が順番に切り換わります。 下は、「Ameblo Lightbox JS」の拡大操作の順序です。
❶ ブログ画面で画像を「Ctrl+左Click」します。（「Clickモード」は「左Click」）
❷ 画像が「Lightbox」に表示されます。
❸ Lighbox内を「Ctrl+左Click」すると「EX拡大」になります。
❹ 更にLighbox内を「Ctrl+左Click」すると「スクロール拡大」になります。
◎ Lighbox内を「Ctrl+左Click」するごとに、❸ ❹ の拡大仕様が切換ります。
◎ ❷～❹ のどの状態でも「左Click」で元のブログ画面の表示に戻ります。
「EX拡大」の操作と特徴
「EX拡大」は Lightboxに表示された画像を、指定した拡大率で拡大・縮小します。
◎「EX拡大」の場合は、「Lightbox」上部にマウスポインターを移動すると「Gz」（Graphic zoom）が付いた 拡大率 と ＋ － の設定ボタンが表示されます。
● ＋ － のボタンを押すごとに「拡大率」が変更できます。
◎「EX拡大」の拡大率は「20%～200%」の範囲で設定できます。 設定は、ローカルストレージに保存され、全ての「EX拡大」時に適用されます。
◎ 拡大像は、左右は画面中央、上下はウインドウの高さを超えると画面中央に自動的にスクロールして表示されます。
●「EX拡大」の状態で Lightbox内を「左Click」すると「Lightbox」が終了して、元のページの表示に戻ります。
「スクロール拡大 」の操作と特徴
ユーザーが選択した画像は「Lightbox」に内接する最大サイズに拡大されます。
しかし、縦や横に非常に長い画像を「Lightbox」に表示した場合は、拡大率が制限されます。 内接の拡大は、その様な画像の拡大参照には不利です。「スクロール拡大」は、この問題を改善した拡大仕様です。
スクロール拡大
●「EX拡大」の表示で、更に「Ctrl+左Click」すると「スクロール拡大」の表示になります。
◎「スクロール拡大」は、横長の画像に適した「横スクロール拡大」と、縦長の画像に適した「縦スクロール拡大」の2種類の拡大様式があります。
◎ 拡大様式は、対象画像とウインドウの縦横比から自動的に選択されます。
「縦スクロール拡大」の拡大率設定
「縦スクロール拡大」は、画像の横幅をウインドウ幅まで拡大します。 スマホ画像や 4コマ漫画など、ブログ上に縦長の画像は多いのですが、ウインドウ幅まで拡大すると拡大率が過剰になり、拡大を制限できると都合が良い場合があります。 そこで「縦スクロール拡大」の場合のみ拡大を制限できる様にしています。
◎「スクロール拡大」は、「Lightbox」上部にマウスポインターを移動すると「Cz」（Comic zoom）が付いた 拡大率 と ＋ － の設定ボタンが表示されます。
● ＋ － のボタンを押すごとに「拡大率」が変更できます。
◎「スクロール拡大」の拡大率は「20%～90%」の範囲で設定できます。 設定は、ローカルストレージに保存され、全ての「スクロール拡大」時に適用されます。
◎「横スクロール拡大」の場合は調整機能がなく、設定ボタンが表示されません。
●「スクロール拡大」の状態で Lightbox内を「左Click」すると「Lightbox」が終了して、元のページの表示に戻ります。
「背景色」の設定
「Lightbox」は「黒背景」「白背景」の選択が出来ます。「Lightbox」の上部にマウスポインターを移動すると 
のボタンが表示されます。
● ボタンを押すごとに、背景色の白/黒が変わります。
◎ 背景色の設定はローカルストレージに保持され、「Lightbox」表示は全ての場合に適用されます。
（注）ver. 2.7以降、「Lightbox」の設定は全てローカルストレージ保存になりました。 設定は、ドメイン単位で共通に適用されますが、ドメインが異なると別個になります。 このため通常のブログ記事とアメンバー記事は、設定が別個になります。
画像に設定されたリンクの扱い
「Ctrl+」モードは、「Ctrl」キーを押して「Lightbox」を起動させるので、画像を「左クリック」すると設定されたリンクが機能します。 しかし「Click」モードでは、画像の「左クリック」で「Lightbox」が起動するので、リンク機能が使えません。
◎「Click」モードでリンクを機能させたい場合は、「Shift+左クリック」で別ウインドウにリンク先を表示させるか、「Ctrl+左クリック」で他のタブにリンク先を表示させる操作が必要です。
リンクが扱い難くなる「Click」モードを考慮して、「Lightbox」内に便利なリンクボタンを表示します。 これは「Ctrl+」モードでも機能します。
「Lightbox」内のリンクボタン
「Lightbox」の上部にマウスポインターを移動すると、ボックスに表示した画像にリンクが設定されている場合は、左上端にリンクボタンが表示されます。
◎ リンクボタンは「画像一覧」の「詳細表示」「リスト表示」では表示されません。 これは、無用な操作の混乱を防ぐためです。
❶ 通常の方法で掲載された画像には、「画像一覧」へのリンクが設定されます。 この種の画像を「Lightbox」に表示した場合は、 Photo Storage のリンクボタンが表示されます。
●リンクボタンをクリックすると、ウインドウが「画像一覧」へ遷移します。
❷ 色々な理由で「画像一覧」へのリンクが失われた状態でユーザー画像が掲載されます。 その場合は Photo Storage Presumed ボタンを表示します。
◎ このボタンは推測したリンクで、常に「画像一覧」が開く確証はありません。
❸ 外部リンクが設定された画像を「Lightbox」表示した場合は Linked Page のリンクボタンが表示されます。
◎ これは「リンクカード」「ビックカード」「Amebaスタンプ」「各種のバナー」「ユーザーがHTML編集でリンク設定した画像」などを選択した場合です。
● このリンクボタンをクリックすると、ウインドウはリンク先に遷移します。
◎ 元のリンクが「別タブに表示」の設定でも、「遷移」の設定になります。
◎「Shift+左クリック」「Ctrl+左クリック」の操作で別タブの表示が可能です。
❹ 元の画像にリンクが設定されていない場合は、リンクボタンは表示されません。
リターン機能
●「画像一覧」（詳細表示）の「画像表示枠」内を「左クリック」すると、この画面を開く前のブログページ、または「画像一覧」（リスト表示）に戻ります。
◎ これはブラウザの「 戻る」を押すのと同様の機能です。
「Ameblo Lightbox JS」を導入すると、ブログ掲載画像を「クリック」して、意図せず「画像一覧」を表示してしまう事が増えます。 その場合に、この機能を使うと簡単に元のページ表示に戻れます。
画像のドラッグ&ドロップ操作による取得
「Ameblo Lightbox」は、リンクが設定された画像を「Lightbox」表示するために、画像のクリック操作を抑止します。 そのため、ウインドウ外へ画像をドラッグしてコピーする操作が出来ませんが、「Copy Mode」でこの操作が可能になります。
●「Lightbox」（スクロール拡大時を含む）の表示下で「Print Screen」キーを押すと「Copy Mode」が起動して Copy Mode のプレートが表示されます。
この表示がある状態では、ブラウザ画面からデスクトップなどに画像のドラッグコピーが可能になり、アップロードされた高品位な元画像を取得できます。
●「Copy Mode」は、以下の方法で解除できます。
▪「Print Screen」キーまたは「ESC」キーを押す
▪ Copy Mode のプレートを「Click」する
▪「Lightbox」の画面内を「Click」して「Lightbox」を終了する
◎「Copy Mode」のON/OFFにかかわらず、ブログ記事上の画像を直接ドラッグコピーすることは出来ません。
「Ameblo Lightbox JS」をOFFにしてページをリロードすると、ブラウザから通常のドラッグによるコピーが可能になりますが、コピー画像は低品位になります。
「アメンバーページ」での動作について
◎ 記事上の掲載画像の「Lightbox」表示は、通常のブログ記事と同様に扱えます。
◎「Ctrl+」「Click」のモード設定など全ての設定は、通常の「ブログ記事」と「アメンバー記事」のドメイン名が異なるため、連携がなく別々に登録されます。
◎ リターン機能は通常の「ブログ記事」から開いた「画像一覧」でのみ機能します。「アメンバー記事」から開いた「画像一覧」は、HTML構造が異なり機能しません。
「Ameblo Lightbox JS」 を使用するには
「Ameblo Lightbox JS」の導入の手順と、最新版のコードは、以下のページの最後に掲載されています。（2022年 12月現在）
