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