「Body Wcon OD」は「Edit At Once Am」に統合しました
「Body Wcon OD」を単独で利用が可能ですが、更新は「Edit At Once Am」のみで行います。 今後は両ツールの機能を持つ統合版の利用をお勧めします。
〔追記 2023.12.21〕
◎「新タイプスキン」「旧タイプスキン」のブログに対応
◎「レトロタイプスキン」のブログに対応
「本文幅チェック」の仕様を変更
このツールは、ユーザーが設定した本文幅をローカルストレージに登録して、ツールのパネルを開く度に再現します。 これは、テストの表示幅を決まった値にするのに都合が良いと考えたものですが、スクロール位置を編集画面で再現するには、逆に邪魔になります。
本文幅を変更すると記事全体の縦の長さが増え、その状態で編集画面を開くと、編集画面は本来の縦の長さのため、見ていた位置より下方を開く結果になります。「 」ボタンを押す時は、本来の本文幅の表示でなければならないのです。
この2機能の両立を考え、「本文幅チェック」の仕様を変更する事にしました。
◎本文幅の「設定幅」をスイッチにして、これを押す度に「本来の幅」「指定値」が切換る様にする。
◎ 切り換わると同時に、「設定幅」、「スライダー」の表示、「ブログ画面」の表示を切換える。
◎ スライダーを調節時は、逐次その値が「指定値」として記録される。
◎ パネルを表示した最初は、「設定幅」は「本来の幅」にリセットされる。
以上の変更で、両方の機能が衝突せずに使えると思います。
仕様変更に合わせてデザインを変更
「設定幅」の表示枠をボタンデザインに変更しました。
下は、「設定幅」の「左Click」ごとに「ブログ本文幅」が切換わり、「スライダー」を使って「設定幅」の値を変更する様子です。
下は、「設定幅」の「左Click」ごとに、「デフォルト」⇄「設定幅」の間でブログ本文幅が切換わる様子です。
スクロール位置の精度
編集画面を開いた時のスクロール位置の正確さは、「Wysiwyg環境」に関係します。「デザイン幅で表示」の選択は最低限の条件ですが、以下のツールを導入すると、精度が高くなる可能性が大です。
操作マニュアル
扱い方の概要については、以下を参照ください。
「Body Wcon OD」を利用するには
このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Body Wcon OD 〕 ver. 1.1
// ==UserScript==
// @name Body Wcon OD
// @namespace http://tampermonkey.net/
// @version 1.1
// @description ブログページでスマホ表示を確認 ショートカット: Ctrl+F7
// @author Ameba Blog User
// @match https://ameblo.jp/*
// @match https://blog.ameba.jp/ucs/entry/srventryupdateinput.do?*
// @match https://blog.ameba.jp/ucs/entry/srventrylist.do?*
// @exclude https://ameblo.jp/*/image*
// @exclude https://ameblo.jp/*/video*
// @noframes
// @icon https://www.google.com/s2/favicons?sz=64&domain=ameblo.jp
// @grant none
// ==/UserScript==
if(document.domain=='ameblo.jp'){ // ブログページの場合
let help_url="https://ameblo.jp/personwritep/entry-12806003772.html";
document.addEventListener("keydown", check_key);
function check_key(event){
if(event.keyCode==118 && event.ctrlKey){ // Ctrl + F7
event.preventDefault();
if(document.querySelector('#BW_con')){
document.querySelector('#BW_con').remove(); }
else{
main(); }}
} // check_key
function main(){
let act=0; // 幅変更 起動時は「0」
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 svg_edit=
'<svg class="BW_edit BW_button" width="26" height="26" viewBox="-1 -2 26 26">'+
'<path d="m19.6 9.2-4.9-4.9c-.2-.2-.2-.5 0-.7l1.8-1.8c.4-.4 1-.4 1.4 0L22.1 6c.4.4.4 '+
'1 0 1.4l-1.8 1.8c-.2.2-.5.2-.7 0zm-7-3.5-8.1 8.1L3 19.7c-.2.7.5 1.4 1.2 1.2l5.8-1.4 '+
'8.1-8.1c.2-.2.2-.5 0-.7l-4.9-4.9c-.1-.3-.5-.3-.6-.1z"></path></svg>';
let svg_list=
'<svg class="BW_list BW_button" viewBox="0 0 300 300">'+
'<path d="M85 41C79 42 73 46 71 52C69 56 70 61 74 62C79 63 86 62 91 62L126 '+
'62C133 62 141 61 147 64C163 73 149 97 170 103C176 104 182 103 188 103L223 '+
'103C231 103 240 101 246 107C253 114 252 124 252 133L252 189C252 195 252 '+
'202 252 208C252 211 253 214 257 214C264 213 273 204 274 197C275 189 274 '+
'179 274 171L274 119C274 109 276 97 269 88C261 79 251 80 241 80L202 80C196 '+
'80 189 81 183 80C177 78 178 70 178 65C178 57 175 49 169 44C162 39 153 40 145 '+
'40L106 40C99 40 92 39 85 41M44 81C28 85 28 101 28 114L28 214L28 237C28 243 '+
'28 248 31 253C42 267 62 263 77 263L173 263L200 263C206 263 213 263 219 '+
'261C233 256 234 245 234 232L234 159C234 149 236 135 229 127C221 119 211 '+
'119 201 119L163 119C157 119 150 120 144 119C136 116 138 106 138 100C137 94 '+
'135 89 130 85C122 79 114 80 105 80L66 80C59 80 51 79 44 81z">'+
'</path><path d="M59 104C48 107 51 123 51 132L51 209L51 228C51 231 51 234 '+
'53 237C55 239 60 239 63 239L89 239L171 239L195 239C199 239 203 240 207 '+
'238C214 235 212 224 212 218L212 165C212 159 214 150 210 145C205 141 193 '+
'143 187 143L149 143C143 143 135 144 129 143C127 142 125 141 123 140C111 '+
'130 121 117 113 107C110 103 105 103 100 103L73 103C69 103 63 102 59 104z" '+
'style="fill:#fff"></path></svg>';
let svg_help=
'<svg class="BW_help" width="22" height="22" viewBox="0 0 150 150">'+
'<path d="M66 13C56 15 47 18 39 24C-12 60 18 146 82 137C92 135 102 131 110 '+
'126C162 90 128 4 66 13M68 25C131 17 145 117 81 125C16 133 3 34 68 25M69 '+
'40C61 41 39 58 58 61C66 63 73 47 82 57C84 60 83 62 81 65C77 70 52 90 76 '+
'89C82 89 82 84 86 81C92 76 98 74 100 66C105 48 84 37 69 40M70 94C58 99 66 '+
'118 78 112C90 107 82 89 70 94z"></path></svg>';
let control=
'<div id="BW_con">'+
'<div id="page_title"> </div>'+
'<div id="BW_control">'+
svg_edit +
svg_list +
' ブログ本文幅 <span class="BW_disp BW_button"></span>'+
'<input class="BW_set" type="range" min="280" max="'+ org_w + '" value="360">'+
'<a href="'+ help_url +'" target="_blank" rel="noopener">'+ svg_help +'</a>'+
'<span class="BW_close BW_button">✖</span>'+
'</div>'+
'<style>'+
'#BW_con { position: fixed; top: 0; z-index: 4000; width: 100%; font: 16px Meiryo; '+
'display: flex; justify-content: space-between; align-items: center; color: #000; '+
'background: #fff; border: 1px solid #aaa; box-shadow: 0 8px 16px #00000040; }'+
'#page_title { padding: 10px 20px 4px; height: 28px; white-space: nowrap; '+
'font: normal 21px/26px Meiryo; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); '+
'background: #f4f6f7; border-right: 1px solid #ccc; position: relative; z-index: 0; } '+
'#page_title:hover { z-index: 1; } '+
'#BW_control { position: absolute; right: 0; padding: 5px 15px 3px 20px; '+
'height: 34px; background: #fff; border-left: 1px solid #ccc; } '+
'.BW_button { background: linear-gradient(0, #f1f2f3, transparent); '+
'border-radius: 4px; cursor: pointer; } '+
'.BW_button:hover{ background: #fff; } '+
'.BW_close { margin-left: 20px; padding: 4px 6px 2px; border: 1px solid #aaa; } '+
'.BW_edit, .BW_list { width: 26px; height: 26px; vertical-align: -10px; padding: 2px; '+
'margin-right: 10px; border: 1px solid #aaa; } '+
'.BW_edit:hover, .BW_list:hover { fill: red; border: 1px solid red; } '+
'.BW_disp { display: inline-block; width: 60px; padding: 4px 0 2px; '+
'text-align: center; border: 1px solid #aaa; } '+
'.BW_disp:hover { border: 1px solid #1976d2; color: #1976d2; } '+
'.BW_set { width: 120px; vertical-align: -2px; margin: 0 10px; } '+
'.BW_set:focus { outline: 1px solid #2196f3; outline-offset: 2px; } '+
'.BW_help { vertical-align: -5px; fill: #2196f3; } '+
'._35xlqQQK { display: none; } '+
'</style>'+
'<style id="BW_style"></style>'+
'</div>';
if(!document.querySelector('#BW_con')){
document.body.insertAdjacentHTML('beforeend', control); }
let BW_disp=document.querySelector('.BW_disp');
if(act==0){
disp_set(org_w, 0); }
else{
disp_set(mw, 1); }
BW_disp.onclick=function(){
if(act==0){
act=1;
disp_set(mw, 1); }
else{
act=0;
disp_set(org_w, 0); }}
function disp_set(t_w, n){
let BW_disp=document.querySelector('.BW_disp');
BW_disp.textContent=t_w +'px';
if(n==0){
BW_disp.style.fontWeight='normal'; }
else{
BW_disp.style.fontWeight='bold'; }
let BW_set=document.querySelector('.BW_set');
BW_set.value=t_w;
let BW_style=document.querySelector('#BW_style');
BW_style.textContent=
'#entryBody { margin-left: auto; margin-right: auto; width: '+ t_w +'px; }'; }
let BW_set=document.querySelector('.BW_set');
let BW_style=document.querySelector('#BW_style');
BW_set.addEventListener('input', function(){
mw=BW_set.value;
act=1;
disp_set(mw, 1);
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; }
document.onkeydown=function(event){
if(event.keyCode==13){
let BW_edit=document.querySelector('.BW_edit');
let entry_id=article.getAttribute('data-unique-entry-id');
if(entry_id && BW_edit){
event.preventDefault();
event.stopImmediatePropagation();
let path=
'https://blog.ameba.jp/ucs/entry/srventryupdateinput.do?id='+
entry_id +'&edit_top='+ to_top();
window.open(path, "_blank"); }}
if(event.keyCode==27){
let BW_con=document.querySelector('#BW_con');
if(BW_con){
event.preventDefault();
event.stopImmediatePropagation();
BW_con.remove(); }}}
let BW_close=document.querySelector('.BW_close');
if(BW_close){
BW_close.onclick=function(event){
event.preventDefault();
document.querySelector('#BW_con').remove(); }}
let BW_edit=document.querySelector('.BW_edit');
if(article && BW_edit){
let entry_id=article.getAttribute('data-unique-entry-id');
if(entry_id){
BW_edit.onclick=function(event){
event.preventDefault();
let path=
'https://blog.ameba.jp/ucs/entry/srventryupdateinput.do?id='+
entry_id +'&edit_top='+ to_top();
if(!event.shiftKey){
window.open(path, "_blank"); }
else{
window.location.href=path; }}}}
let BW_list=document.querySelector('.BW_list');
if(article && BW_list){
let entry_id=article.getAttribute('data-unique-entry-id');
let user=article.getAttribute('data-unique-ameba-id');
let date=document.querySelector('time').getAttribute('datetime');
let entry_ym=date.slice(0, 4) + date.slice(5, 7);
if(entry_id && user && entry_ym){
BW_list.onclick=function(event){
event.preventDefault();
let path=
'https://blog.ameba.jp/ucs/entry/srventrylist.do?pageID='+
'1&entry_ym='+entry_ym+'&user='+user+'&entry_id='+entry_id;
if(!event.shiftKey){
window.open(path, "_blank"); }
else{
window.location.href=path; }}}}
} // catch_title()
function to_top(){
let entryBody=document.querySelector('#entryBody');
let body_top=-(entryBody.getBoundingClientRect().top);
let top;
if(body_top<-60){
top=0; }
else{
top=Math.round(body_top) +60; }
return top; }
} // main()
} // ブログページの場合
if(location.pathname.includes('/srventryup')){ // ブログ編集画面の場合
let searchParams=new URLSearchParams(window.location.search);
let to_top=searchParams.get('edit_top');
if(to_top){ // このツール以外が編集画面を開いた場合は スクロール動作をしない
let retry=0;
let interval=setInterval(wait_target, 20);
function wait_target(){
retry++;
if(retry>200){ // リトライ制限 100回 4secまで
clearInterval(interval); }
let editor_iframe=document.querySelector('.cke_wysiwyg_frame'); // 監視 target
if(editor_iframe){
clearInterval(interval);
scroll(editor_iframe); }}
function scroll(editor_iframe){
let if_height=editor_iframe.getBoundingClientRect().height;
let retry=0;
let interval=setInterval(wait_target, 20);
function wait_target(){
retry++;
if(retry>200){ // リトライ制限 100回 4secまで
clearInterval(interval); }
let body_h=
editor_iframe.contentDocument.body.getBoundingClientRect().height; // 監視 target
if(body_h>if_height){
clearInterval(interval);
let html=editor_iframe.contentDocument.documentElement;
html.scrollTop=to_top; }
}}}
} // ブログ編集画面の場合
if(location.pathname.includes('/srventrylist')){ // 記事の編集・削除の場合
let arg=new Object;
let pair=location.search.substring(1).split('&');
for(let i=0; pair[i]; i++){
let key=pair[i].split('=');
arg[key[0]]=key[1]; } // key[0]がkey, key[1]がvalue
let entry_ym=arg.entry_ym;
let pageID=parseInt( arg.pageID, 10); // 数値に変換
let user=arg.user;
let entry_id=arg.entry_id;
let amebaId=document.querySelector('#gHeaderRight .amebaId').textContent;
let entryList_li=document.querySelectorAll('#entryList li');
if(user!=null){
if(amebaId!=user){ // 他ユーザーのブログでリスト表示を押した場合
if(history.length>1){
window.history.back(); }
else{
window.close(); }}
else{
let k;
for(k=0; k<entryList_li.length; k++){
let entryList_a=entryList_li[k].querySelector('h2 a');
if(entryList_a){
if(entryList_a.getAttribute('href').indexOf(entry_id)!=-1){
entryList_li[k].style.outline='2px solid red';
entryList_li[k].scrollIntoView({block: "center"});
break; }}}
if(k==entryList_li.length){
pageID+=1;
let path=
'https://blog.ameba.jp/ucs/entry/srventrylist.do?pageID='+
pageID+'&entry_ym='+entry_ym+'&user='+user+'&entry_id='+entry_id;
window.location.href=path; }}}
} // 記事の編集・削除の場合
「Body Wcon OD」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Body Wcon OD」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
