「Body Wcon OD」の有効な点
「Body Wcon OD」はスマホ表示のチェックツールですが、主用途はブログ本文の「行折れの状態」を確認することです。
多種の公式スキンがあり、記事タイトルの部分の行折れの再現性は適当ですが、タイトル部は使いどころではないと考え、ブログ記事本文の再現性の精度を良くする努力をしました。 しかし、スマホの保持するフォント、スマホのOSやブラウザの特性などが関係するのか、「何故？」と考え込んでしまう様な表示の差異が、ちょこちょこ見受けられます。
でも、閲覧チェックの状態で、簡単即座にチェックが出来るのは便利。 本文の1行の表示幅を変えると不要改行はすぐに発見でき、記事チェックに有効です。
また、アメブロ編集画面のスマホ表示チェックは、約「360px幅」を対象にしていて、広い表示幅のスマホ等に対応しません。「Body Wcon OD」はこれが可能です。
前ページのバージョンは、新タイプスキンのみ対応でしたが、今回は、旧タイプスキンにも対応しました。
スキンタイプの区別
スキンタイプは、大別すると「新タイプ」「旧タイプ」「レトロタイプ」の3種類があります。 タイプが同じならHTMLの構成や、主要パーツの「id名」「class名」などが共通しています。 アメブロ全体に有効なCSSを書きたい場合は、これらの3種のスキンタイプの事を心得ている必要があります。
見た目での区別
スキンの外観上で見分けやすいのは、「ページャー」のデザインです。
● 新タイプスキン
● 旧タイプスキン
● レトロタイプスキン
HTMLコード上での区別
色々と考えられますが、「Body Wcon OD」の制作で各種のスキンでテストが必要だったので、簡単なコードを作りました。
// ==UserScript==
// @name Show Skintype
// @namespace http://tampermonkey.net/
// @version 0.1
// @description スキンコードの種類を表示する
// @author Ameba Blog User
// @match https://ameblo.jp/*
// @grant none
// ==/UserScript==
let html_e=document.querySelector('html');
let skincode_base=html_e.getAttribute('data-base-skin-code');
let skincode=html_e.getAttribute('data-skin-code');
alert("TYPE : "+skincode_base+" CODE : "+skincode);
これは、使用されている「スキンタイプ」と「スキン名」が、ブログページの「html要素」の属性に付けられるので、ページを開いた時にそれを表示するコードです。
● 新タイプスキン
data-base-skin-code="uranus"
● 旧タイプスキン
data-base-skin-code="new"
● レトロタイプスキン
data-base-skin-code="default"
ブログのスキンは、この値で判定するのが一番確実でしょう。
新旧タイプのスキン対応にあたって
疑似的なスマホプレビューを表示する際に、背景を着ける要素や幅を変える要素が、スキンタイプによって異なります。 本質的な操作は同じなので、別のスクリプトツールとするより、ひとつのツールで共用できる様に考えました。
コードの最初で、前項のスキンタイプの判定を行い、それを変素に記録して、新タイプと旧タイプで処理を選択して行う様にしています。
従って、ツールの扱いは全く同じで、新旧のタイプのスキンで利用が出来ます。 扱い方は前ページを参照ください。
なお、レトロタイプスキンは実例が少なく、アメブロ共通のフォント指定に非対応で、構成に不明な部分が多いので、今回は対応しない事にしました。
「Body Wcon OD」を利用するには
このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Body Wcon OD 〕 ver. 0.2
// ==UserScript==
// @name Body Wcon OD
// @namespace http://tampermonkey.net/
// @version 0.2
// @description ブログページでスマホ表示を確認 ショートカット: Ctrl+F7
// @author Ameba Blog User
// @match https://ameblo.jp/*
// @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');
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; background: #8bb3c8; }'+
'[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; }'+
'.hashtag-module-wrapper, .hashtag-module-wrapper ~ *, .commentArea, '+
'.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; box-shadow: 0 0 0 400px #8bb3c8; }';
SH_style2.textContent=
'.js-entryWrapper { width: '+ (mw-32) +'px; }'; }
if(skin_type=='uranus'){
SH_style1.textContent=
'.skin-entryInner { margin: 20px auto; padding: 25px; box-shadow: 0 0 0 400px #8bb3c8; }';
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()
〔追記〕 2022.07.24
コントロールバーの表示をアメブロヘッダーに重ねました。 ブログ下部のチェック範囲を、できるだけ拡げるためです。
「Body Wcon OD」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Body Wcon OD」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
