「Ameblo Lightbox JS」「P」バージョンを統合（34）/ JavaScript

バージョン「P」を「JS」に統合

「Ameblo Lightbox P」をテスト使用して来ましたが、Comic Zoom が使えるので「JS版」と置き換えても全く不足がなく、これをメインストリームに使って良いと判断しました。「Ameblo Lightbox P」の更新版は「Ameblo Lightbox JS」ver.3.0 とします。 下は、バージョンの推移です。

「Gz」「Cz」の切換え もうひと工夫 

「ver.2.8」では、「拡大率表示」ボタンで「Graphic Zoom」「Comic Zoom」を切替える様にしました。 これは直感的に判り易いインターフェイスで妥当と考えていますが、「4コマ漫画」の表示を多く使う場合は「Gz」「Cz」の切換えが少しおっくうに感じます。

そこで「Ctrl+左Click」をデフォルトの拡大仕様とし、「Ctrl+Shift+左Click」は他方の拡大が一時的に使える様にしました。 これは「Caps」キーと同じやり方です。

ユーザーによって「Gz」「Cz」の使用比率が異なると思われ、デフォルトは良く使う方の拡大仕様に設定し、「＋Shift」で一時的に他方の拡大仕様を使えれば便利でしょう。 これなら、「設定」を変更しては元に戻すという操作が不要になります。

この機能は以下のコードの追加で実現しています。

ver.3.0 　609行前後

if(!event.ctrlKey){ //「Ctrl」キーを押さない
    ～～～ } //「lightbox」を終了し元の表示に戻る

if(event.ctrlKey && !event.shiftKey){ //「Ctrl」押下
    zoom_set(zmode); // zmodeに従った拡大率の設定
    ex_mode(event, zmode); } // zmodeに従った拡大表示

if(event.ctrlKey && event.shiftKey){ //「Ctrl+Shift」押下
    if(zmode==0){ //「Gz」を設定時
        zoom_set(1); //「Cz」の拡大率の設定
        ex_mode(event, 1); } //「Cz」の拡大表示
    else{
        zoom_set(0);//「Gz」の拡大率の設定
        ex_mode(event, 0); }} //「Gz」の拡大表示

「zmode」は「Gz」「Cz」の選択を記録する変数で、「0：Gz」「1:Cz」です。

「+Shift」の押下で、「zmode」は変えずに、他方の拡大状態にしています。

コードの問題点  〔追記〕2022.12.12

投稿時、この「ver.3.0」のインターフェイスで不完全な部分が判りましたが、改善版の制作が間に合わないので、改善版は次回に公開します。

問題点：

◎「＋Shift」で表示した拡大画面で「拡大率表示」を押すと、一応は拡大仕様が切換るが、変更が保存されない。

◎「Shift」キー操作で各種のボタンの文字が反転選択される場合がある

「Ameblo Lightbox JS」の扱い方 

「Ameblo Lightbox JS」の操作は、以下のページのマニュアルを参照ください。

アメブロ専用 画像ビューア「Ameblo Lightbox JS」 操作マニュアル

「Ameblo Lightbox JS」を使用するには 

「Ameblo Lightbox JS」は Chrome/Edge/Firefox の拡張機能「Tampermonkey」上で動作します。 ただし、以下の「ver.3.0」は、上の追記の問題点があります。

❶「Tampermonkey」を導入します

◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。

既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。

拡張機能の導入については、以下のページに簡単な説明があるので参照ください。

⭕「Tampermonkey」の導入方法

❷「Tampermonkey」にスクリプトを登録します

◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。

◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。

〔コピー方法〕　軽量シンプルなツール「PreBox Button   」を使うと

　　コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」

　　の操作で、掲載コードのコピーが可能になります。

◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。

◎ 複数の「Ameblo Lightbox」のバージョンを「Tampermonkey」に登録する事は問題ありませんが、ONとするのは1つに限ります。 複数を同時にONとすると正常な動作が保証されません。

〔 Ameblo Lightbox JS 〕 ver. 3.0

// ==UserScript==
// @name         Ameblo Lightbox JS
// @namespace    http://tampermonkey.net/
// @version      3.0
// @description  ブログ掲載画像の高精細な暗転拡大表示
// @author       Ameba Blog User
// @match        https://ameblo.jp/*
// @match        https://secret.ameba.jp/*
// @match        https://news.ameba.jp/*
// @match        https://blogger.ameba.jp/*
// @match        https://blogtag.ameba.jp/*
// @noframes
// @grant        none
// ==/UserScript==

let disp_mode=0; // 拡張ディスプレイモードの判別
let back_color; // Lightbox背景色
let graphic_w; // Graphic拡大の拡大率
let comic_w; // Comic拡大の拡大率
let zmode=0; // 拡大モード選択 Graphic:0 Comic:1
let with_cact; // ブログ画面でのLightboxの起動方法
let e_free=0; // ドラッグコピーの許可・不許可
let step=0; // 動作の段階
let c_press=false; // Ctrlキー押下フラグ


let html_=document.querySelector('html');


let target=document.querySelector('body');
let monitor=new MutationObserver(catch_photo);
monitor.observe(target, { childList: true, subtree: true });

catch_photo();

function catch_photo(){

    monitor.disconnect();

    box_env0(); // Lightbox 基本のパーツ生成
    box_env1(); // Lightbox 各種コントロール設定

    let page_img=document.querySelectorAll('img');
    for(let k=0; k<page_img.length; k++){
        if(page_img[k].parentNode.tagName=='A'){
            page_img[k].parentNode.style.opacity='1'; } // フォバーの薄化表示を無効化
        let style=window.getComputedStyle(page_img[k]);
        if(style.getPropertyValue('pointer-events')=='none'){
            page_img[k].style.pointerEvents='auto'; }} // クリック防止指定を無効化

    monitor.observe(target, { childList: true, subtree: true });


    let path=location.pathname; // 現在のパス名
    let host=window.location.hostname; // 現在のホスト名（サブドメインを含む）

    if(path.split('/').slice(-1)[0].startsWith('image')){ // ⬜ 画像一覧画面
        let page_img=document.querySelectorAll('img');
        for(let k=0; k<page_img.length; k++){
            page_img[k].addEventListener('mousedown', function(event){
                event.stopImmediatePropagation();
                light_box(event, 1, page_img[k]); }); }}
    else{
        if(host=='ameblo.jp' || host=='secret.ameba.jp'){ // ⬜ ブログ・アメンバー
            let page_img;
            if(with_cact==0){
                page_img=document.querySelectorAll('img'); }
            else{
                if(host=='ameblo.jp'){
                    page_img=document.querySelectorAll('#entryBody img'); }
                if(host=='secret.ameba.jp'){
                    page_img=document.querySelectorAll('.skin-entryBody img'); }}
            for(let k=0; k<page_img.length; k++){
                page_img[k].addEventListener('mousedown', function(event){
                    event.stopImmediatePropagation();
                    light_box(event, 0, page_img[k]); }); }}

        else if(host=='news.ameba.jp' || host=='blogger.ameba.jp' ||
                host=='blogtag.ameba.jp'){ // ⬜ ニュース・ブログランキング・ハッシュタグ
            let page_img=document.querySelectorAll('img');
            for(let k=0; k<page_img.length; k++){
                page_img[k].addEventListener('mousedown', function(event){
                    event.stopImmediatePropagation();
                    light_box(event, 2, page_img[k]); }); }}}



    function light_box(event, type, img){
        if(e_free==0){
            event.preventDefault(); // 操作性に重要な影響有り 画像ドラッグも不可にする

            if(type==0){ // ブログページ用
                if((event.ctrlKey==true && with_cact==0) ||
                   (event.shiftKey==false && event.ctrlKey==false && with_cact==1)){
                    step=1;
                    box_env2(img, 1);
                    ac_disp(1);
                    set_img(img);
                    ex_mag(); }}

            if(type==1){ // 画像一覧画面用
                if(event.ctrlKey==true){
                    step=1;
                    box_env2(img, 0);
                    ac_disp(0);
                    set_img(img);
                    ex_mag(); }}

            if(type==2){ // その他の 一般ページ用
                if(event.ctrlKey==true){
                    step=1;
                    box_env2(img, 1);
                    ac_disp(0);
                    set_img(img);
                    ex_mag(); }}}}



    let img_frame=document.querySelector('._3-g1Ourp ._2F4CsxZ2');
    if(img_frame){
        img_frame.onclick=function(event){
            event.stopImmediatePropagation();
            history.back(); } } // 画像一覧の画像表示枠のクリックで遷移元画面に



    path=location.pathname; // 現在のパス名
    if(path.split('/').slice(-1)[0]=='imagelist.html'){ // 画像リストページでのみ
        setTimeout(()=>{
            if(document.querySelector('._3EX8xkUG ._3tinH7Ew')
               && !document.querySelector('._2z3jgBXG')){
                location.reload();
            }}, 2000); } // 2sec待っても画像リストが取得できない時はリロード



    let copy_flag=document.querySelector('#copy_flag');
    if(copy_flag){
        copy_flag.onclick=function(event){
            event.stopImmediatePropagation();
            copy_flag_disp(0); }}

} // catch_photo()



function box_env0(){
    let body=document.querySelector('body');

    let css=
        '<style id="light_style">'+
        '@keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1}} '+
        '.fin { animation: fadeIn .5s ease 0s 1 normal; animation-fill-mode: both; } '+
        '@keyframes fadeOut { 0% {opacity: 1} 100% {opacity: 0}} '+
        '.fout { animation: fadeOut .2s ease 0s 1 normal; animation-fill-mode: both; } '+
        '#lightbox { position: fixed; top: 0; left: 0; z-index: 3000; visibility: hidden; '+
        'background: black; width: 100vw; height: 100vh; text-align: center; } '+
        '#photo_sw { position: fixed; width: 100%; height: 15%; } '+
        '#photo_sw:hover #photo_link { opacity: 1; } '+
        '#photo_link { position: absolute; top: 24px; left: 30px; height: 30px; '+
        'text-decoration: none; font: bold 21px Meiryo; padding: 3px 12px 0; '+
        'color: #000; background: #fff; border: 2px solid #000; border-radius: 6px; '+
        'cursor: pointer; opacity: 0; } '+
        '#lbox_help { position: absolute; top: 24px; left: 32px; width: 24px; height: 24px; '+
        'font: bold 24px/29px Meiryo; color: #000; background: #fff; '+
        'border: 2px solid #000; border-radius: 30px; cursor: pointer; opacity: 0; } '+
        '#photo_sw:hover #lbox_help { opacity: 1; } '+
        '#photo_link svg, #copy_flag svg { width: 28px; fill: currentColor; } '+
        '#photo_link svg.a { height: 24px; vertical-align: -4px; } '+
        '#photo_link svg.b, #copy_flag svg.d { height: 22px; vertical-align: -3px; } '+
        '#photo_link svg.b { fill: red; } '+
        '#photo_link svg.c { height: 24px; vertical-align: -4px; fill: #bbb; } '+
        '#photo_sw:hover .bc { opacity: 1; } '+
        '.bc { position: absolute; top: 24px; right: 30px; height: 24px; overflow: hidden; '+
        'font: bold 22px/26px Meiryo; border-radius: 4px; cursor: pointer; opacity: 0; '+
        'margin: 0; box-sizing: content-box; } '+
        '#ws { right: 230px; line-height: 28px; padding: 0 5px; } '+
        '#wp { right: 195px; } '+
        '#wm { right: 165px; } '+
        '#ac { right: 75px; line-height: 28px; padding: 0 5px; } '+
        '#box_img { width: 96vw; height: 96vh; padding: 2vh 2vw; object-fit: contain; } '+
        '#copy_flag { position: fixed; top: 24px; left: 30px; height: 30px; width: 194px; '+
        'padding: 3px 12px 0; color: #fff; background: #2196f3; font: bold 21px Meiryo; '+
        'border: 2px solid #bbdefb; border-radius: 6px; z-index: 3001; display: none; }'+
        '</style>';

    if(!body.querySelector('#light_style')){
        body.insertAdjacentHTML('beforeend', css); }

    let svg_bow=
        '<svg width="24" height="24" viewBox="0 0 512 512">'+
        '<path style="fill:#fff" d="M0 0L0 510C34 485 63 448 92 419C100 411 109 '+
        '403 117 394C120 392 123 386 127 385C131 384 136 390 138 392C147 400 '+
        '157 407 168 414C199 429 233 436 268 433C379 423 453 305 414 200C406 '+
        '178 393 152 374 138L468 44C481 31 502 16 511 0L0 0z"/>'+
        '<path style="fill:#000" d="M511 0C499 17 481 30 466 45L374 137C397 168 '+
        '417 195 423 234C437 330 365 426 266 433C232 435 199 428 169 413C158 '+
        '407 148 400 139 392C136 390 132 384 127 385C124 385 120 391 118 '+
        '393C110 400 102 408 95 415L30 480C20 490 6 500 0 512L512 512L512 '+
        '153L512 47C512 33 516 13 511 0M128 382C158 360 184 327 210 301L373 '+
        '138C361 121 337 108 318 100C256 75 184 87 134 132C62 197 60 314 128 '+
        '382z"/></svg>';

    let box=
        '<div id="lightbox">'+
        '<div id="photo_sw">'+
        '<p id="lbox_help">？</p>'+
        '<a id="photo_link"></a>'+
        '<p id="ac" class="bc"></p>'+
        '<p id="ws" class="bc"></p>'+
        '<p id="wp" class="bc">＋</p>'+
        '<p id="wm" class="bc">－</p>'+
        '<p id="bow" class="bc">'+svg_bow+'</p></div>'+
        '<img id="box_img"></div>';

    if(!body.querySelector('#lightbox')){
        body.insertAdjacentHTML('beforeend', box); }


    let copy_flag=
        '<div id="copy_flag">'+
        '<svg class="d" viewBox="0 0 512 512">'+
        '<path d="M464 0c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 '+
        '48H176c-26.51 0-48-21.49-48-48V48c0-26.51 21.49-48 48-48h288M176 '+
        '416c-44.112 0-80-35.888-80-80V128H48c-26.51 0-48 21.49-48 48v288c0 '+
        '26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48v-48H176z">'+
        '</path></svg>　Copy Mode</div>';

    if(!body.querySelector('#copy_flag')){
        body.insertAdjacentHTML('beforeend', copy_flag); }

} // box_env0()



function box_env1(){
    with_cact=get_localst('Lightbox_cact');
    if(with_cact!=0 && with_cact!=1){
        with_cact=0; }
    localStorage.setItem('Lightbox_cact', with_cact); // Storage更新

    back_color=get_localst('Lightbox_back');
    if(back_color!='black' && back_color!='white'){
        back_color='black'; }
    localStorage.setItem('Lightbox_back', back_color); // Storage更新

    comic_w=get_localst('Lightbox_comic_w');
    if(isNaN(comic_w) || comic_w<20 || comic_w>90){
        comic_w=90; }
    localStorage.setItem('Lightbox_comic_w', comic_w); // Storage更新

    graphic_w=get_localst('Lightbox_graphic_w');
    if(!graphic_w || isNaN(graphic_w) || graphic_w<20 || graphic_w>400){
        graphic_w=200; }
    localStorage.setItem('Lightbox_graphic_w', graphic_w); // Storage更新

    zmode=get_localst('Lightbox_zmode');
    if(zmode!=0 && zmode!=1){
        zmode=0; }
    localStorage.setItem('Lightbox_zmode', zmode); // Storage更新

    ctrl_act();
    b_or_w();
    icon_color();
    zoom_mode();
    disp_wpm(disp_mode);
    help();

} // box_env1()



function ctrl_act(){
    let ac=document.querySelector('#ac');
    if(ac){
        if(with_cact==0){
            ac.textContent='Ctrl+'; }
        else{
            ac.textContent='Click'; }

        ac.onclick=function(event){
            event.stopImmediatePropagation();
            if(with_cact==0){
                with_cact=1;
                ac.textContent='Click'; }
            else{
                with_cact=0;
                ac.textContent='Ctrl+'; }
            localStorage.setItem('Lightbox_cact', with_cact); // Storage更新
            location.reload(); }}}



function b_or_w(){
    let lightbox=document.querySelector('#lightbox');
    lightbox.style.background=back_color; // 背景色をCookieから指定
    let bow=document.querySelector('#bow');
    if(bow){
        bow.onclick=function(event){
            event.stopImmediatePropagation();
            if(lightbox.style.backgroundColor!='white'){
                lightbox.style.backgroundColor='white';
                back_color='white'; }
            else{
                lightbox.style.backgroundColor='black';
                back_color='black'; }
            icon_color();
            localStorage.setItem('Lightbox_back', back_color); }}} // Storage更新



function icon_color(){
    let bc=document.querySelectorAll('#photo_sw .bc');
    for(let k=0; k<bc.length; k++){
        if(back_color=='black'){
            bc[k].style.color='white';
            bc[k].style.background='#000';
            bc[k].style.border='2px solid #fff'; }
        else{
            bc[k].style.color='black';
            bc[k].style.background='#fff';
            bc[k].style.border='2px solid #000'; }}}



function zoom_mode(){
    let ws=document.querySelector('#ws');
    if(ws){
        ws.onclick=function(event){
            event.stopImmediatePropagation();
            let lightbox=document.querySelector('#lightbox');
            let box_img=document.querySelector('#box_img');
            if(zmode==0){
                zmode=1;
                ws.textContent='Cz '+ comic_w;
                box_img.style.width=comic_w +'vw';
                lightbox.scrollTo(0, 0); }
            else{
                zmode=0;
                ws.textContent='Gz '+ graphic_w;
                box_img.style.width=graphic_w +'vw';
                trim(); }

            zoom_set(zmode);
            localStorage.setItem('Lightbox_zmode', zmode); }}} // Storage更新



function disp_wpm(n){
    let wp=document.querySelector('#wp');
    if(wp){
        if(n==0){
            wp.style.visibility='hidden'; }
        else{
            wp.style.visibility='visible'; }}
    let wm=document.querySelector('#wm');
    if(wm){
        if(n==0){
            wm.style.visibility='hidden'; }
        else{
            wm.style.visibility='visible'; }}
    let ws=document.querySelector('#ws');
    if(ws){
        if(n==0){
            ws.style.visibility='hidden'; }
        else{
            ws.style.visibility='visible'; }}}



function help(){
    let lbox_help=document.querySelector('#lbox_help');
    if(lbox_help){
        lbox_help.onclick=function(event){
            event.stopImmediatePropagation();
            window.open('https://ameblo.jp/personwritep/entry-12778603499.html#manual',
                        null, 'width=820,height=800'); }}}



function zoom_set(mode){
    let ws=document.querySelector('#ws');
    let wp=document.querySelector('#wp');
    let wm=document.querySelector('#wm');

    if(ws && wp && wm){
        if(mode==0){
            ws.textContent='Gz '+ graphic_w; }
        else{
            ws.textContent='Cz '+ comic_w; }


        wp.onclick=function(event){
            event.stopImmediatePropagation();
            if(mode==0){
                if(graphic_w<391){
                    graphic_w=Number(graphic_w) +10;
                    let box_img=document.querySelector('#box_img');
                    if(box_img){
                        box_img.style.width=graphic_w +'vw';
                        trim(); }
                    ws.textContent='Gz '+ graphic_w;
                    localStorage.setItem('Lightbox_graphic_w', graphic_w); }} // Storage更新
            else{
                if(comic_w<81){
                    comic_w=Number(comic_w) +10;
                    let box_img=document.querySelector('#box_img');
                    if(box_img){
                        box_img.style.width=comic_w +'vw'; }
                    ws.textContent='Cz '+ comic_w;
                    localStorage.setItem('Lightbox_comic_w', comic_w); }}} // Storage更新


        wm.onclick=function(event){
            event.stopImmediatePropagation();
            if(mode==0){
                if(graphic_w>29){
                    graphic_w=Number(graphic_w) -10;
                    let box_img=document.querySelector('#box_img');
                    if(box_img){
                        box_img.style.width=graphic_w +'vw';
                        trim(); }
                    ws.textContent='Gz '+ graphic_w;
                    localStorage.setItem('Lightbox_graphic_w', graphic_w); }} // Storage更新
            else{
                if(comic_w>29){
                    comic_w=Number(comic_w) -10;
                    let box_img=document.querySelector('#box_img');
                    if(box_img){
                        box_img.style.width=comic_w +'vw'; }
                    ws.textContent='Cz '+ comic_w;
                    localStorage.setItem('Lightbox_comic_w', comic_w); }}} // Storage更新

    }} // zoom_set()



function trim(){
    let lightbox=document.querySelector('#lightbox');
    let box_img=document.querySelector('#box_img');
    let i_width=box_img.naturalWidth;
    let i_height=box_img.naturalHeight;
    let w_width= window.innerWidth;
    let w_height= window.innerHeight;

    let view_w=w_width*graphic_w/100;
    lightbox.scrollTo((view_w - w_width)/2,
                      ((view_w*i_height)/i_width - w_height)/2); }



function get_localst(name){
    if(!localStorage.getItem(name)){
        return 0; }
    else{
        return localStorage.getItem(name); }}



function box_env2(target_img, cont){ // リンクボタンの表示
    let photo_link=document.querySelector('#photo_link');
    if(photo_link){
        let link=target_img.closest('A');
        if(link && cont==1){
            if(link.classList.contains('detailOn')){
                photo_link.innerHTML=
                    '<svg class="a" viewBox="0 0 512 512">'+
                    '<path d="M512 144v288c0 26.5-21.5 48-48 48H48c-26.5 '+
                    '0-48-21.5-48-48V144c0-26.5 21.5-48 48-48h88l12.3-32.9c7-18.7 '+
                    '24.9-31.1 44.9-31.1h125.5c20 0 37.9 12.4 44.9 31.1L376 96h88c26.5 '+
                    '0 48 21.5 48 48zM376 288c0-66.2-53.8-120-120-120s-120 53.8-120 '+
                    '120 53.8 120 120 120 120-53.8 120-120zm-32 0c0 48.5-39.5 88-88 '+
                    '88s-88-39.5-88-88 39.5-88 88-88 88 39.5 88 88z"></path></svg>'+
                    ' Photo Storage'; }
            else{
                photo_link.innerHTML=
                    '<svg class="b" viewBox="0 0 512 512">'+
                    '<path d="M327 185c60 60 59 156.7.36 215-.11.12-.24.25-.36.37l-67 '+
                    '67c-59 59-156 59-215 0-59-59-59-156 0-215l37-37c10-10 27-3 27 '+
                    '10.6.6 18 4 36 10 53 2 5.8.6 12-4 17l-13 13c-28 28-29 74-1 102 28 '+
                    '29 74 29 102.3.5l67-67c28-28 28-74 0-102-4-4-7-7-10-9a16 16 0 0 '+
                    '1-7-13c-0-11 3-21 12-30l21-21c6-6 14-6 21-2a152 152 0 0 1 21 '+
                    '17zM468 44c-59-59-156-59-215 0l-67 67c-.1.1-.3.3-.4.4-59 59-59 '+
                    '154.8.4 215a152 152 0 0 0 21 17c6 4 15 4 21-2l21-21c8-8 12-19 '+
                    '12-30a16 16 0 0 0-7-13c-3-2-7-5-10-9-28-28-28-74 0-101l67-67c28-28 '+
                    '74-28 102.3.5 28 28 27 74-1 102l-13 13c-4 4-6 11-4 17 6 17 9 35 10 '+
                    '52.7.5 14 17 20 27 11l37-37c59-59 59-155.7.0-215z"></path></svg>'+
                    ' Linked Page'; }
            photo_link.setAttribute('href', link.getAttribute('href')); // リンクのコピー
            photo_link.style.visibility='visible'; }

        else if(!link && cont==1){ // 画像ストレージのリンクが無いユーザー画像の場合
            let image_src=target_img.getAttribute('src');
            if(image_src.startsWith('https://stat.ameba.jp/user_images')){
                let entry_id=target_img.getAttribute('data-entry-id');
                let image_id=target_img.getAttribute('data-image-id');
                let entry=document.querySelector('.js-entryWrapper');
                if(entry){
                    let ameba_id=entry.getAttribute('data-unique-ameba-id');
                    let link_href='https://ameblo.jp/'+
                        ameba_id +'/image-'+entry_id +'-'+ image_id +'.html';
                    photo_link.innerHTML=
                        '<svg class="c" viewBox="0 0 512 512">'+
                        '<path d="M512 144v288c0 26.5-21.5 48-48 48H48c-26.5 '+
                        '0-48-21.5-48-48V144c0-26.5 21.5-48 48-48h88l12.3-32.9c7-18.7 '+
                        '24.9-31.1 44.9-31.1h125.5c20 0 37.9 12.4 44.9 31.1L376 96h88c26.5 '+
                        '0 48 21.5 48 48zM376 288c0-66.2-53.8-120-120-120s-120 53.8-120 '+
                        '120 53.8 120 120 120 120-53.8 120-120zm-32 0c0 48.5-39.5 88-88 '+
                        '88s-88-39.5-88-88 39.5-88 88-88 88 39.5 88 88z"></path></svg>'+
                        ' Photo Storage Presumed';
                    photo_link.setAttribute('href', link_href); // 画像から得たリンクの設定
                    photo_link.style.visibility='visible'; }}
            else{
                photo_link.style.visibility='hidden'; }}

        else{
            photo_link.style.visibility='hidden'; }

        photo_link.onclick=function(event){
            event.stopImmediatePropagation(); }}}



function ac_disp(n){
    let ac=document.querySelector('#ac');
    let ws=document.querySelector('#ws');
    let wp=document.querySelector('#wp');
    let wm=document.querySelector('#wm');

    if(ac){
        if(n==0){
            ac.style.visibility='hidden';
            ws.style.right='135px';
            wp.style.right='100px';
            wm.style.right='70px'; }
        else{
            ac.style.visibility='visible';
            ws.style.right='230px';
            wp.style.right='195px';
            wm.style.right='165px'; }}}



function set_img(target_img){
    let lightbox=document.querySelector('#lightbox');
    let box_img=lightbox.querySelector('#box_img');
    let img_src=target_img.getAttribute('src');
    let img_url;

    if(img_src.indexOf('?caw=')!==-1){
        img_url=img_src.split('?caw=')[0]; }
    else if(img_src.indexOf('?cat=')!==-1){
        img_url=img_src.split('?cat=')[0]; }
    else {
        img_url=img_src; }

    if(lightbox && img_url!=''){
        html_.style.overflow='hidden';
        box_img.src=img_url;
        lightbox.style.visibility='visible';
        zoom_reset(lightbox);
        lightbox.classList.remove('fout');
        lightbox.classList.add('fin'); }}



function zoom_reset(l_box){
    let body=document.querySelector('body');
    let zoom_f=window.getComputedStyle(body).getPropertyValue('zoom');
    if(zoom_f || zoom_f!=1){ // bodyで拡大ツールによるのzoom指定がある場合
        l_box.style.zoom=1/zoom_f; }}



function ex_mag(){
    let html_=document.querySelector('html');
    let lightbox=document.querySelector('#lightbox');
    let box_img=lightbox.querySelector('#box_img');

    if(lightbox){
        lightbox.onclick=function(event){ // 拡張ディスプレイモード
            event.preventDefault();

            hide_photo_link(); // 画像一覧へのリンクを無効化

            let i_width=box_img.naturalWidth;
            let i_height=box_img.naturalHeight;
            let w_width= window.innerWidth;
            let w_height= window.innerHeight;

            if(!event.ctrlKey){ // 元の表示に戻る
                step=0;
                copy_flag_disp(0);

                html_.style.overflow='inherit';
                lightbox.classList.remove('fin');
                lightbox.classList.add('fout');
                lightbox.style.overflow='hidden'; // overflowのリセット
                box_img.style.height='96vh';
                box_img.style.width='96vw';
                box_img.style.padding='2vh 2vw';
                setTimeout(()=>{
                    lightbox.style.visibility='hidden';
                    box_img.src='';
                }, 200);
                disp_mode=0; // 拡張ディスプレイモード リセット
                disp_wpm(0); }

            if(event.ctrlKey && !event.shiftKey){
                zoom_set(zmode);
                ex_mode(event, zmode); }

            if(event.ctrlKey && event.shiftKey){
                if(zmode==0){
                    zoom_set(1);
                    ex_mode(event, 1); }
                else{
                    zoom_set(0);
                    ex_mode(event, 0); }}


            function ex_mode(event, mode){
                if(disp_mode==0){
                    disp_mode=1; // 拡張ディスプレイモード
                    disp_wpm(1);
                    lightbox.style.overflow='auto';
                    box_img.style.height='auto';
                    box_img.style.padding='1vh 1vw';

                    if(mode==0){
                        box_img.style.width=graphic_w +'vw';
                        mag_point(event); }
                    else{
                        box_img.style.width=comic_w +'vw';
                        lightbox.scrollTo(0, 0); }}

                else{
                    disp_mode=0; // 拡張ディスプレイモード リセット
                    disp_wpm(0);
                    lightbox.style.overflow='hidden';
                    box_img.style.height='96vh';
                    box_img.style.width='96vw';
                    box_img.style.padding='2vh 2vw'; }

            } // ex_mode


            function mag_point(event){
                let lightbox=document.querySelector('#lightbox');
                let box_img=lightbox.querySelector('#box_img');
                let actal_x; // Actual Pixels表示スクロールx値
                let actal_y; // Actual Pixels表示スクロールy値

                let nwidth=box_img.naturalWidth;
                let nhight=box_img.naturalHeight;
                let ratio=nwidth/nhight
                let top=event.offsetY;
                let left=event.offsetX;
                let ww=lightbox.clientWidth;
                let wh=lightbox.clientHeight;

                if(ww<wh*ratio){
                    actal_x=(left*graphic_w/100) - ww/2;
                    actal_y=(2*top - wh + ww/ratio)*graphic_w/200 - wh/2; }
                else{
                    let zk=((2*left - ww)/wh/ratio + 1)/2;
                    actal_x=(zk*graphic_w -50)*ww/100;
                    actal_y=(top*ww*graphic_w)/(wh*ratio*100) - wh/2; }

                lightbox.scrollTo(actal_x, actal_y); }

        }}} // ex_mag()



function hide_photo_link(){
    let photo_link=document.querySelector('#photo_link');
    if(photo_link){
        photo_link.style.visibility='hidden'; }}



window.addEventListener('keyup', function(event){ // キー入力を感知
    if(event.keyCode=='44'){
        if(step>0){
            if(e_free==0){ // 画像ドラッグを可能にする
                copy_flag_disp(1); }
            else{
                copy_flag_disp(0); }}}
    if(event.keyCode=='27'){
        copy_flag_disp(0); }});



function copy_flag_disp(n){
    let copy_flag=document.querySelector('#copy_flag');
    if(copy_flag && n==0){
        e_free=0;
        copy_flag.style.display='none'; }
    if(copy_flag && n==1){
        e_free=1;
        copy_flag.style.display='block'; }}



function key_press(event){
    c_press=event.ctrlKey; } // Ctrlキー押下の true false を取得

document.addEventListener("keyup", key_press, {passive: false});
document.addEventListener("keydown", key_press, {passive: false});

function weel_idle(event){
    if(c_press && step>0){
        event.preventDefault(); }}

window.addEventListener("mousewheel", weel_idle, {passive: false});
window.addEventListener("wheel", weel_idle, {passive: false});

「Ameblo Lightbox JS」最新版について 

旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。

●「Ameblo Lightbox JS」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。

スクリプトツール 　最新バージョン・リンク一覧表 （ツール名順）