「Body Wcon OD」とは
スマホで参照した場合に、ブログの本文幅が狭くなった状態で表示されます。 PCで編集して投稿しているブログが、スマホユーザーにはどう見えているかは、ある程度チェックが必要です。
「Body Wcon OD」はこのチェックを簡単に行うツールです。 編集画面の「プレビュー」機能の「スマホ表示」は同等の機能ですが、本文のチェックは投稿後の実際のブログ画面で行う事が多く、このツールの方が便利です。
で、「Body Wcon OD」は「プレビュー/スマホ表示」に似せたデザインにして来ましたが、実際には「タイトル部」はどちらでも良く、肝心なのは「ブログ本文」の幅変化という事が、これまでの使用ではっきりしました。
この点でコードを見なおすと、「プレビュー/スマホ表示」に似せる目的で無駄な操作が多く、単純に「本文幅」のみをテスト的に変化させるなら、もっと良いコードになる事に気付きました。
編集画面では、本文幅をテスト的に変更する「Body Wcon」という補助ツールを使っていますが、これは簡単で便利です。
これと同じ事をブログ画面で行うツールなので、ツール名を「Body Wcon OD」としています。（ODは「Outdoor」の略） 名前から近い機能と判り易いので、揃えました。
いつくかの更新点
全タイプのスキンに対応
「プレビュー/スマホ表示」に似せるために、幅調節をする要素をスキンごとに変更していたのですが、本文幅の調節は「#entryBody」という、全スキン共通の要素を幅調節する事で済みます。 これで、「全タイプスキン」対応が完全になりました。
スライダーの全開で本来の幅で表示
ブログページを開いた時にデフォルトの本文幅を取得し、この値を使ってスライダーを「全開」にした時に、本来のページデザインになる様にしました。
スライダーのステップ値
スライダーの調整は、これまで「5px」のステップで調整する仕様でしたが、「1px」のステップに変更しました。
一部のスキンは、本文幅が5で割れない端数のものがあります。 スライダー全開時にその様なスキンにも対応するために、端数を選択できる必要がありました。
記事タイトル の表示
多くの記事で使っているパーツの行間隔に誤りがあり、行が折り返されないと気付き難いものでした。 そのパーツを調べると数十の記事で使っていたので、記事ごとに本文幅を狭めたチェックが必要でした。
で、前バージョンの「Smart Image」を何度も使ったのですが、その際に記事の区別がつかなくて困りました。 同じパーツが複数記事にあり、チェック時に記事のタイトル等が見えないと、どの記事をチェックしているか判らなくなるのです。
この経験から、「記事タイトル」を「スライダー」のパネルに表示して、現在のテスト中の記事の判別ができる様にしました。
「Body Wcon OD」の扱い方
ツールは一応は常駐型
使う頻度によって「常駐型」で使うか「非常駐型」として使うか、選択できます。
▪ショートカットを他の機能で使いたい場合は、必要時だけ「Tampermonkey」のダッシュボードで「Body Wcon OD」を「ON」にします。（非常駐型）
▪「Ctrl+F7」のショートカットを他で使わないのなら、常に「Body Wcon OD」を「ON」にして常駐型で使用してください。
操作は ショートカット「Ctrl+F7」のみ
このツールは、ショートカットを覚えているだけで使えます。
● ブログページを表示中に「Ctrl+F7」を押すと、本文幅がスライダーで調節できる様になります。
▪スライダーを全開（右端）にすると、本来の表示幅と同じになります。
▪スライダーを全閉（左端）にした時の最小幅は「280px」です。
▪スライダーはマウスでドラッグするか、「⇦」「⇨」キーで操作できます。
▪「指定値」は現在のスライダーの指定値を示す表示枠で、操作はできません。
▪最後にスライダーで指定した値は記憶され、次回に再現します。
● スライダーのパネルは「Ctrl+F7」を押すと非表示になります。
「Body Wcon OD」を利用するには
このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Body Wcon OD 〕 ver. 0.5
// ==UserScript==
// @name Body Wcon OD
// @namespace http://tampermonkey.net/
// @version 0.5
// @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==
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 org_w; // デフォルトの本文幅
org_w=document.querySelector('#entryBody').getBoundingClientRect().width;
let mw=localStorage.getItem('SmartH_I'); // ブログ本文 幅値 🔵
if(!mw){
mw=360; }
if(mw>org_w){
mw=org_w;
localStorage.setItem('SmartH_I', mw); } // ブログ本文 幅値をセット 🔵
let control=
'<div id="SH_con">'+
'<div id="page_title"> </div>'+
'<div id="SH_container">'+
'ブログ本文幅 <span id="SH_disp"></span> '+
'<input id="SH_set" type="range" min="280" max="'+ org_w + '" value="360">'+
'<style>'+
'#SH_con { position: fixed; top: 0; z-index: 4000; width: 100%; '+
'display: flex; justify-content: space-between; align-items: center; '+
'padding: 2px 0; font: 16px Meiryo; color: #000; background: #fff; '+
'border: 1px solid #aaa; box-shadow: 0 8px 16px #00000040; }'+
'#page_title { padding: 7px 20px 4px; '+
'font: normal 21px/26px Meiryo; background: #607d8b12; '+
'text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); } '+
'#SH_container { margin: 0 20px; flex-shrink: 0; } '+
'#SH_disp { display: inline-block; width: 72px; padding: 2px 0 0; '+
'text-align: center; border: 1px solid #aaa; }'+
'#SH_set { width: 200px; vertical-align: -2px; }'+
'</style>'+
'<style id="SH_style"></style>'+
'</div>';
if(!document.querySelector('#SH_con')){
document.body.insertAdjacentHTML('beforeend', control); }
let SH_disp=document.querySelector('#SH_disp');
SH_disp.textContent=mw+'px';
let SH_set=document.querySelector('#SH_set');
SH_set.value=mw;
let SH_style=document.querySelector('#SH_style');
SH_style.textContent=
'#entryBody { margin-left: auto; margin-right: auto; width: '+ mw +'px; }';
SH_set.addEventListener('input', function(){
mw=SH_set.value;
SH_disp.textContent=mw+'px';
SH_style.textContent=
'#entryBody { margin-left: auto; margin-right: auto; width: '+ mw +'px; }';
localStorage.setItem('SmartH_I', mw); }); // ブログ本文 幅値をセット 🔵
let target=document.head;
let monitor=new MutationObserver(catch_title);
monitor.observe(target, { childList: true });
catch_title();
function catch_title(){
let title_h; // タイトル部
let title_text; // 記事タイトル
let article=document.querySelector('.js-entryWrapper'); //記事全体
if(article){
if(article.querySelector('h1')){
title_h=article.querySelector('h1');
title_text=title_h.textContent; }
else if(article.querySelector('h2')){
title_h=article.querySelector('h2');
title_text=title_h.textContent; }
else if(article.querySelector('h3')){
title_h=article.querySelector('h3');
title_text=title_h.textContent; }}
let page_title=document.querySelector('#page_title');
if(title_text && page_title){
page_title.textContent=title_text; }
} // catch_title()
} // main()
「Body Wcon OD」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Body Wcon OD」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
