チェック中の記事を編集する「編集ボタン」を実装
チェック作業は、ページ下方のチェックになる事は普通にありますが、下方へスクロールした状態で「記事タイトル」が見えなくなる事から、前ページではタイトル表示の機能を追加しました。
更に、大量の記事のチェック・修正になると、修正要の記事と判断した時にすぐに編集できると便利です。 現在開いている記事を編集するには「Edit At Once Am」というツールを使いますが、その編集ボタンは記事上部のタイトル部に表示されるので、そこに戻るのにひと手間増えます。
そこで、「Edit At Once Am」の一部を「Body Wcon OD」に組み込みました。 チェックツールとしての「Body Wcon OD」が、更に便利になります。
「Edit At Once Am」はお勧めのツールですが、「Body Wcon OD」を「Ctrl+F7」で起動し、今回実装した「編集ボタン」を押す使い方は、「Am」を使うより便利かも知れません。
「編集ボタン」と「スライダー」のフォーカスマーク
「編集ボタン」は、パネルのほぼ中央部に表示されます。
通常は「黒」で、マウスを乗せると「赤」になります。
スライダーは通常はマウスドラッグで調節しますが、キーボードの「⇦」「⇨」を使うと細かな操作が出来ます。 ただし、キー操作はスライダーにフォーカスがある場合だけ有効なので、「Focusマーク」を表示する様にしました。
このツール扱い方の詳細は、前ページ を参照ください。
「Body Wcon OD」を利用するには
このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Body Wcon OD 〕 ver. 0.6
// ==UserScript==
// @name Body Wcon OD
// @namespace http://tampermonkey.net/
// @version 0.6
// @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('#BW_con')){
document.querySelector('#BW_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 svg_edit=
'<svg class="BW_icon" 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 control=
'<div id="BW_con">'+
'<div id="page_title"> </div>'+
'<div id="BW_edit">'+ svg_edit +'</div>'+
'<div id="BW_control">'+
'ブログ本文幅 <span id="BW_disp"></span> '+
'<input id="BW_set" type="range" min="280" max="'+ org_w + '" value="360">'+
'<style>'+
'#BW_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); } '+
'#BW_edit { margin-left: 20px; } '+
'.BW_icon { width: 26px; height: 26px; vertical-align: -10px; padding: 2px; '+
'border: 1px solid #aaa; border-radius: 4px; background: #fff; fill: #000; } '+
'.BW_icon:hover { fill: red; border: 1px solid red; cursor: pointer; } '+
'#BW_control { margin: 0 20px; flex-shrink: 0; } '+
'#BW_disp { display: inline-block; width: 64px; padding: 2px 0 0; '+
'text-align: center; border: 1px solid #aaa; } '+
'#BW_set { width: 200px; vertical-align: -2px; } '+
'#BW_set:focus { outline: 1px solid #2196f3; outline-offset: 5px; } '+
'</style>'+
'<style id="BW_style"></style>'+
'</div>';
if(!document.querySelector('#BW_con')){
document.body.insertAdjacentHTML('beforeend', control); }
let BW_disp=document.querySelector('#BW_disp');
BW_disp.textContent=mw+'px';
let BW_set=document.querySelector('#BW_set');
BW_set.value=mw;
let BW_style=document.querySelector('#BW_style');
BW_style.textContent=
'#entryBody { margin-left: auto; margin-right: auto; width: '+ mw +'px; }';
BW_set.addEventListener('input', function(){
mw=BW_set.value;
BW_disp.textContent=mw+'px';
BW_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; }
let BW_icon=document.querySelector('.BW_icon');
if(article && BW_icon){
let entry_id=article.getAttribute('data-unique-entry-id');
if(entry_id){
BW_icon.onclick=function(event){
event.preventDefault();
let path=
'https://blog.ameba.jp/ucs/entry/srventryupdateinput.do?id='+entry_id;
if(!event.shiftKey){
window.open(path, "_blank"); }
else{
window.location.href=path; }}}}
} // catch_title()
} // main()
「Body Wcon OD」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Body Wcon OD」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
