アメーバブログに掲載された画像は、元画像が高精細であっても、記事上には圧縮して間引きされた画像が表示されます。 これは、アメーバシステムの通信上でやむを得ない処理です。 しかし「Ameblo Lightbox JS」は、アメーバの画像サーバーの元画像を呼び出して表示するので、非圧縮の高品位な画像を見る事ができます。

 

とりわけ画像に重きを置くPCユーザーにとって、このツールは価値があるでしょう。 ブログページ上の画像の価値に、このツールは何度も気付かせてくれます。

 

 

 

 

「Ameblo Lightbox JS」 操作マニュアル

                       ver. 3.7以降 2025.07.23 更新

 

「Ameblo Lightbox JS」の動作する範囲

 

ツールが動作する場所

このツールは、以下のページや画面上の画像を「Lightbox」に表示できます。

 ◎ アメーバブログの各ユーザーの「ブログ」「アメンバー記事」のページ

 ◎ アメーバブログの各ユーザーの「画像一覧」ページ(詳細表示/リスト表示)

 ◎ アメーバニュースの各種ページ

 ◎ アメーバランキングページ

 ◎ ハッシュタグページ

 

 

「Lightbox」に表示できる画像と非対応の画像

▪ ページ上の全ての「img要素」を対象として「Lightbox」に表示します。

 

▪「リンクカード」「Ameba Pick」のカバー画像、「Amebaスタンプ」「各種のバナー」「アメーバ絵文字」なども「Lightbox」に表示できます。

 

▪「ブログヘッダー」「ブログ背景」の画像等は非対応です。(img要素ではない)

 

▪「リブログカード」のカバー画像、本文に埋め込まれた「ツイッター」「インスタグラム」の画像、ページ上のAD画像などは「iframe」内の表示で非対応です。

 

▪ クリック防止を施した画像などは「Lightbox」に表示できない場合があります。

 

 

各種設定の有効な範囲

「Ameblo Lightbox」の各種の設定はローカルストレージに保存して運用されます。 ユーザー自身のブログと他のユーザーのブログはドメインが同じなので、ブログ記事の設定は、全ユーザーのブログで共通になります。

 

 

 

ページ上の画像を「Lightbox」に表示する

ブログページ上の画像を「Lightbox」に表示する操作は、「Ctrl+」「Click」のモードにより異なります。 ブログページ以外での操作は、モードに関係なく同じです。

 

 

「Ctrl+」モード

「Ctrl+」モードは、画像に対する操作を「Ctrl+左Click」に統一した、基本的な操作モードです。 このモードは、ページ上のリンク操作が通常通りに行えます。

 

▪ ページ上の画像を「Ctrl+左Click」すると、その画像が「Lightbox」に表示されます。(サイドバーやメッセージボード上の画像などを含む)

 

▪「画像一覧」(詳細表示/リスト表示)のサムネイル画像やランキングのサムネイル画像なども、「Ctrl+左Click」で「Lightbox」に表示されます。

 

 

「Click」モード

「Click」モードは、ブログ記事上の画像を「左Click」するだけで「Lightbox」に表示する事が出来ます。 ただし、この操作ができる範囲は限定されます。

 

▪ 対象になる画像は「ブログ記事の本文」に掲載された画像に限られます。

 

▪ サイドバー、メッセージボード、記事下のページャー部などは範囲外になります。

 

「Click」モードはブログ閲覧時の操作を簡単にしたモードで、他の機能は同じです。

 

 

モードの変更

「Lightbox」の上部にマウスポインターを移動すると、設定ボタンが表示されます。

 

Ctrl+Click または Click のボタンを押すと、モードが切り換わります。

 

Ctrl+Clickモードの画像

 

Ameblo Lightbox JS: 「Click」モード

 

 

▪ モード変更を行うと、直後にページがリロードされます。

 

▪ モード設定は全てのブログに対して有効で、次に変更するまで保持されます。

 

▪「Click」モードが選択可能な「ブログページ」「アメンバーページ」で表示した「Lightbox」でのみ、モードボタンが表示されます。

 

 

「Lightbox」の終了

「Lightbox」に表示した画像は、ボックスに内接する拡大表示になります。

 

● Lightbox内を「左Click」すると、「Lightbox」が終了して元のページ表示に戻ります。

 

▪「画像一覧」の「精細表示」「リスト表示」の画面で「Lightbox」を表示していた場合は、元の「精細表示」または「リスト表示」の画面に戻ります。

 

▪「Lightbox」は別画面の様に見えますが、元のページを覆う枠に過ぎません。

 

 

 

「Graphic Zoom」と「Comic Zoom」

「Lightbox」に表示された画像を、更に拡大する事が可能です。 この拡大の仕様は「Graphic Zoom」(Gz)「Comic Zoom」(Cz)の2種を選択できます。

 

2種の拡大仕様を実装した理由は、画像の縦横比によって拡大が過剰・不足する場合が生じるためです。 2種類の拡大率をユーザーの必要に合わせて設定する事で、拡大仕様を切り換えるだけで、満足な拡大結果が得られると思います。

 

下は拡大操作のダイアグラムです。

 

Ameblo Lightbox JS操作図:ブログ画面からLightbox表示、Comic Zoom, Graphic Zoom

 

 

ブログ画面で画像を「Ctrl+左Click」します。(「Click」モードは「左Click」)

 

画像が「Lightbox」に表示されます。

 

❸ Lightbox内を「Ctrl+左Click」すると 設定した拡大仕様が適用されます。

 

のどの状態でも「左Click」で元のブログ画面の表示に戻ります。 

 

 

「Gz」「Cz」拡大仕様の変更

 Lightbox内を「Ctrl+左Click」すると「Graphic Zoom」または「Comic Zoom」の拡大が適用されます。 これは「拡大率表示」を「左Click」すると切り換わります。

 

Gz/Cz 拡大率変更

 

 

● Lightbox内を「Shift+左Click」することで「Graphic Zoom」「Comic Zoom」の拡大仕様を切り換えることができます。 切り替えた後は、再び変更するまでそれが Lightbox内の拡大仕様として設定されます。

 

「Graphic Zoom」「Comic Zoom」の切換え

 

 

 

「Graphic Zoom」の操作と特徴

●「Graphic Zoom」の設定時は、Lightbox内の画像を「Ctrl+左Click」すると、クリックした部分を中心に「Gz」拡大表示をします。(ポイント拡大機能)

 

●「Gz」拡大表示をもう一度「Ctrl+左Click」すると、通常の「Lightbox」表示に戻ります。 ここから画像の別の部分を再び「Gz」拡大表示することができます。

 

▪「Lightbox」の上部にマウスポインターを移動すると Gz 拡大率 の設定ボタンが表示されます。

 

Gz拡大率の設定ボタンを表示

 

 

● 設定ボタンが表示された状態で「マウスホイール」を操作することで「拡大率」の設定を変更できます。

 

ホイール操作で「拡大率」を変更

 

 

▪「Gz 拡大率」は「120%~400%」の範囲で設定できます。 設定は、ローカルストレージに保存され、「Gz」拡大表示の際に適用されます。

 

●「Gz」拡大表示の状態で Lightbox内を「左Click」すると「Lightbox」が終了して、元のページの表示に戻ります。

 

● Gz 拡大率 ボタンを「左Click」すると、拡大仕様が「Comic Zoom」に切り変わり、ボタンの表示が Cz 拡大率 になります。

 

 

 

「Comic Zoom」の操作と特徴

「Lightbox」表示は、ウインドウに内接する最大サイズに画像を拡大表示します。 しかし、縦に長い4コマ漫画の様な画像の場合は拡大率が不足します。「Comic Zoom」は、この問題を改善した拡大仕様です。 

 

●「Comic Zoom」を設定時は、「Lightbox」内を「Ctrl+左Click」すると「Cz」拡大表示になります。

 

▪「Lightbox」の上部にマウスポインターを移動すると Cz 拡大率 の設定ボタンが表示されます。

 

● 設定ボタンが表示された状態で「マウスホイール」を操作することで「拡大率」の設定を変更できます。

 

ホイール操作で「拡大率」を変更

 

 

▪「Cz 拡大率」は「20%~90%」の範囲で設定できます。 設定は、ローカルストレージに保存され、「Cz」拡大表示の際に適用されます。

 

●「Cz」拡大表示の状態で Lightbox内を「左Click」すると「Lightbox」が終了して、元のページの表示に戻ります。

 

● Cz 拡大率 ボタンを「左Click」すると、拡大仕様が「Graphic Zoom」に切り変わり、ボタンの表示が Gz 拡大率 になります。

 

 

 

「背景色」の設定

「Lightbox」は「黒背景」「白背景」の選択が出来ます。「Lightbox」の上部にマウスポインターを移動すると Ameblo Lightbox JS 操作マニュアル のボタンが表示されます。

 

Ameblo Lightbox JS 操作マニュアル ボタンを押すごとに、背景色の白/黒が変わります。

 

Ctrl+Clickモードと設定ボタン

 

Ameblo Lightbox JS Ctrl+Clickモード

 

 

▪ 背景色の設定はローカルストレージに保持され、「Lightbox」表示は全ての場合に適用されます。

 

 

 

画像に設定されたリンクの扱い

「Ctrl+」モードは、「Ctrl」キーを押して「Lightbox」を起動させるので、画像を「左Click」すると設定されたリンクが機能します。 しかし「Click」モードでは、画像の「左Click」で「Lightbox」が起動するので、リンク機能が使えません。

 

▪「Click」モードでリンクを機能させたい場合は、「Shift+左Click」で別ウインドウにリンク先を表示させるか、「Ctrl+左Click」で他のタブにリンク先を表示させる操作が必要です。

 

リンクが扱い難くなるので、「Lightbox」内に画像に設定されたリンクと同機能を持つリンクボタンを表示します。 これは「Ctrl+」「Click」の両モードで機能します。

 

 

「Lightbox」内のリンクボタン

「Lightbox」の上部にマウスポインターを移動すると、ボックスに表示した画像にリンクが設定されている場合は、左上端にリンクボタンが表示されます。

 

▪ リンクボタンは「画像一覧」の「詳細表示」「リスト表示」では表示されません。 これは、無用な操作の混乱を防ぐためです。

 

 

❶ 通常の方法で掲載された画像には、「画像一覧」へのリンクが設定されます。 この種の画像を「Lightbox」に表示した場合は、 Photo Storage のリンクボタンが表示されます。

 

Photo Storage ボタンのあるブラウザ画面

 

 

●リンクボタンをクリックすると、ウインドウが「画像一覧」へ遷移します。

 

 

❷ 色々な理由で「画像一覧」へのリンクが失われた状態でユーザー画像が掲載されます。 その場合は  Photo Storage Presumed ボタンを表示します。 

 

▪ このボタンは推測したリンクで、常に「画像一覧」が開く確証はありません。

 

Photo Storage Presumed

 

 

❸ 外部リンクが設定された画像を「Lightbox」表示した場合は  Linked Page のリンクボタンが表示されます。 

 

▪ これは「リンクカード」「ビックカード」「Amebaスタンプ」「各種のバナー」「ユーザーがHTML編集でリンク設定した画像」などを選択した場合です。

 

Linked Page ボタンと緑色の風景

 

 

● このリンクボタンをクリックすると、ウインドウはリンク先に遷移します。

 

▪ 元のリンクが「別タブに表示」の設定でも、「遷移」の設定になります。

 

▪「Shift+左Click」「Ctrl+左Click」の操作で別タブの表示が可能です。

 

 

❹ 元の画像にリンクが設定されていない場合は、リンクボタンは表示されません。

 

 

 

リターン機能

●「画像一覧」(詳細表示)の「画像表示枠」内を「左Click」すると、この画面を開く前のブログページ、または「画像一覧」(リスト表示)に戻ります。 

 

▪ これはブラウザの「 戻る」を押すのと同様の機能です。

 

Ameblo Lightbox JSで拡大表示した画像

 

「Ameblo Lightbox JS」を導入すると、ブログ掲載画像を「クリック」して、意図せず「画像一覧」を表示してしまう事が増えます。 その場合に、この機能を使うと簡単に元のページ表示に戻れます。

 

 

画像のドラッグ&ドロップ操作による取得

「Ameblo Lightbox」は、リンクが設定された画像を「Lightbox」表示するために、画像のクリック操作を抑止します。 そのため、ウインドウ外へ画像をドラッグしてコピーする操作が出来ませんが、「Lightbox」からこの操作が可能になります。

 

アニメキャラクターの画面キャプチャ

 

 

●「Lightbox」に表示された画像をデスクトップ等にドラッグアウトすると、送信時の圧縮を受けない高品位な画像を取得できます。

 

▪ Lightbox内の拡大表示の状態でも同様にドラッグアウトが可能ですが、コピーで得られるサイズ・品質は全く同じです。

 

▪「Ameblo Lightbox JS」をOFFにしてページをリロードすると、通常のドラッグアウトによるコピーが可能になりますが、コピー画像は低品位になります。

 

この画像取得方法と画像の品質については、以下のページを参照ください。

 

 

 

 

 

「Ameblo Lightbox JS」の最新バージョン

このツールの最新バージョンは、以下のリンクリストから探せます。