「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」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
