「Body Wcon OD」は「styleタグ」を書き込んでいるだけ
「Body Wcon OD」の疑似的なスマホプレビューは、JavaScriptで「styleタグ」を書き込む事で実現しています。 この方法を採らないと、ツールをOFFにした後にページに加えた変更が残り、ページをリロードしないとデフォルトの表示に戻りません。
同様の「styleタグ」を「Stylus」で適用しても、同じ様なスマホプレビューになります。 しかし、その場合は本文幅が固定になり、「Body Wcon OD」の様に可変という事は出来ません。 スライダー操作で行末の折り返しの状態を確認できるのは、簡単なコードながら有効です。
「Body Wcon OD」の適用スキンを更新
新旧あわせて多種の公式スキンがあり、できるだけ多くのスキンで使える様に配慮しています。 自分が使うだけのツールならアレンジする要素の選択などは適当で良いのですが、公式スキン全体で共通に使えるアレンジコードを探すには、かなり苦労します。 あるスキンで良くても、別のスキンではダメという事が生じるのです。
方針としては、公式スキンのデザイン構成の最大公約数の部分を調べ、その部分だけで必要なアレンジを実現するコードを選りすぐって行く操作が必要です。 これは、多くの公式スキンでチェックを繰り返す必要があり、軽く1日かかります。
中には、スキンを独自にアレンジしているブログもあり、対応できない場合があります。 そういうユーザーは、ツールのアレンジがうまく適応できない事は承知の上でしょうから、例外としました。 また、記事タイトル部は、背景画像が入ったり、フォントサイズが個別に指定されていたりで、対応が大変で余り手を加えていません。
今回の適用コードは、スマホデザインのための適用要素を、これまでと少し変更して改善しています。
◎ 本文背景の「白」をツールが指定する様にしました。 スキンによっては、本文に背景画像があったり、背景が半透過の場合がありますが、これは「白」になり、スマホ表示と同様になります。
◎ これに従い、文字色を「黒」に指定しました。 暗い背景画像で文字色が「白」のスキンなどは、完全に表示が反転します。 これもスマホ表示に準じたデザインです。
◎「アメンバー記事」の表示時にも、通常の記事と同様に「Body Wcon OD」を使える様にしました。
◎ 疑似的なスマホ表示だと印象付けるために、本文部の角を丸めました。
◎ 前バージョンの公開後に変更しましたが、コントロールバーの配置を、アメブロヘッダー上に重ねました。 スマホビューをチェックする際、画面が広く使い易くなったと思います。
「Body Wcon OD」の扱い方
簡単なツールですが、少し詳しい扱い方は、以下のページを参照ください。
「Body Wcon OD」を利用するには
このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「+」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Body Wcon OD 〕 ver.0.4
// ==UserScript== // @name Body Wcon OD // @namespace http://tampermonkey.net/ // @version 0.4 // @description ブログページでスマホ表示を確認 ショートカット: Ctrl+F7 // @author Ameba Blog User // @match https://ameblo.jp/* // @exclude https://ameblo.jp/*/image* // @noframes // @icon https://www.google.com/s2/favicons?sz=64&domain=ameblo.jp // @grant none // ==/UserScript== let html_=document.querySelector('html'); let skin_type=html_.getAttribute('data-base-skin-code'); if(!skin_type){ skin_type="uranus"; } document.addEventListener("keydown", check_key); function check_key(event){ if(event.keyCode==118 && event.ctrlKey){ // Ctrl + F7 event.preventDefault(); if(document.querySelector('#SH_con')){ document.querySelector('#SH_con').remove(); } else{ main(); }}} // check_key function main(){ let mw=localStorage.getItem('SmartH_I'); // モバイル ディスプレイ幅値 🔵 if(!mw){ mw=360; } let control= '<div id="SH_con">'+ '<div id="SH_container">モバイル機種 表示CSSピクセル幅 <span id="SH_disp">360px</span> '+ '<input id="SH_set" type="range" min="280" max="600" value="360" step="5">'+ '<style>'+ '#main { overflow: hidden; }'+ // '.skinArticle * { color: #000 !important; }'+ // '.skinArticle { background: #fff !important; '+ // 'box-shadow: 0 0 0 400px #8bb3c8; border-radius: 10px; }'+ // '.skin-entryInner * { color: #000 !important; }'+ // '.skin-entryInner { background: #fff !important; '+ // 'box-shadow: 0 0 0 400px #8bb3c8; border-radius: 10px; }'+ '[data-uranus-component="entryTitle"] { font-size: 1.5rem; font-weight: 700; line-height: 1.3; '+ 'margin: 0 0 1rem; overflow-wrap: break-word; padding: 0; text-shadow: none; }'+ '[data-uranus-component="entryBody"] { font-size: 1rem; line-height: 1.7; '+ 'margin: 1.5rem 0; min-height: 150px; padding: 0; position: relative; vertical-align: baseline; }'+ '#entryBody ~ *, .skin-entryBody ~ *, .skin-blogMainInner ~ *, .js-entryWrapper ~ * '+ '{ display: none !important; }'+ '#SH_con { position: fixed; top: 0; font: 16px Meiryo; color: #000; background: #fff; '+ 'padding: 15px 0 10px; width: 100%; '+ 'border: 1px solid #aaa; box-shadow: 0 8px 16px #00000040; z-index: 4000; }'+ '#SH_disp { display: inline-block; width: 72px; padding: 2px 0 0; '+ 'text-align: center; border: 1px solid #aaa; }'+ '#SH_set { width: 300px; vertical-align: -2px; }'+ '</style>'+ '<style id="SH_style1"></style>'+ '<style id="SH_style2"></style>'+ '</div>'; if(!document.querySelector('#SH_con')){ document.body.insertAdjacentHTML('beforeend', control); } let main_entry=document.querySelector('#main'); let left_pos=main_entry.getBoundingClientRect().left; let SH_container=document.querySelector('#SH_container'); SH_container.style.marginLeft=left_pos+'px'; let SH_disp=document.querySelector('#SH_disp'); let SH_set=document.querySelector('#SH_set'); SH_disp.textContent=mw+'px'; SH_set.value=mw; let SH_style1=document.querySelector('#SH_style1'); let SH_style2=document.querySelector('#SH_style2'); if(skin_type=='new'){ SH_style1.textContent= '.js-entryWrapper { margin: 0 auto; padding: 10px 20px; }'; SH_style2.textContent= '.js-entryWrapper { width: '+ (mw-32) +'px; }'; } if(skin_type=='uranus'){ SH_style1.textContent= '.skin-entryInner { margin: 20px auto; padding: 25px; }'; SH_style2.textContent= '.skin-entryInner { width: '+ (mw-50) +'px; }'; } SH_set.addEventListener('input', function(){ mw=SH_set.value; SH_disp.textContent=mw+'px'; if(skin_type=='new'){ SH_style2.textContent= '.js-entryWrapper { width: '+ (mw-32) +'px; }'; } if(skin_type=='uranus'){ SH_style2.textContent= '.skin-entryInner { width: '+ (mw-50) +'px; }'; } localStorage.setItem('SmartH_I', mw); // 機種ディスプレイ幅セット 🔵 }); } // main()
〔追記〕2023.04
適用ページから secret.ameba.jp のメタデータを削除しました。 また、画像一覧ページで動作しない様にメタデータを修正しました。
ver. 0.3 ➔ ver. 0.4 に更新しています。
「Body Wcon OD」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Body Wcon OD」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。