スマホの表示を改善する「Auto Style Attach ⭐」
アメブロ専用アプリを使わないスマホユーザーが記事を参照した場合は、おそらく貧弱なスマホスキンが適用されるはずです。 せめて主要フォントや見出し位は、望みのデザインにしたいものです。 それを叶える唯一の手段は、文書に「styleタグ」を埋め込んで、記事本文に対してスタイル指定をする事です。
しかしそれは「HTML編集」で、記事を作成するごとに毎回「styleタグ」を書き込む必要があり、たとえタグが複雑でなくても手間な作業になります。 そんな書き込みを自動化するスクリプトが「Auto Style Attach ⭐」です。
以下は、このスクリプトが「styleタグ」に書き込む内容の部分です。 この部分は、ユーザーが必要とする指定に書換える事が出来ます。
この「Auto Style Attach ⭐」は、記事を保存する時に、文書の末尾に「styleタグ」を自動的に書き込みます。 ただし、この「styleタグ」に指定したスタイルは、PCからの参照時にも反映する事を考えておく必要があります。「styleタグ」の指定がPCスキンと同じ場合は無問題ですが、異なる内容の場合はタグ記入を実施する前にテストが必要です。
「Auto Style Attach ⭐」ver. 0.5
以下の ver. 0.5 は、スクリプト起動コードの更新版です。 編集画面の読込み時タイミングでスクリプト起動が阻害される事象に対処し、確実な起動を得ています。 起動時に、編集画面の「管理トップへ」のアイコンに「青い影」を表示し、起動確認が出来る様にしています。
◎このツールは Chrome / Firefox の拡張機能「Tampermonkey」上で動作します。
「Tampermonkey」の導入と初期設定などについては、以下を参照ください。
◎以下のコードを「Tampermonkey」の新規作成画面にコピー&ペーストして保存すれば、最新版エディタの「編集画面」でこのツールを使用する事が出来ます。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
〔 Auto Style Attach ⭐ 〕 ver. 0.5
// ==UserScript==
// @name Auto Style Attach ⭐
// @namespace http://tampermonkey.net/
// @version 0.5
// @description 文書末尾に常設 styleタグを自動記入する
// ⛔文書保存時（下書きを含む全投稿時）に常設 styleタグを書込みます。
// ⛔旧タイプ（文書先頭）のstyleタグは削除し末尾に移動、文書末尾に既にある場合は書込みません。
// @author Ameba Blog User
// @match https://blog.ameba.jp/ucs/entry/srventry*
// @exclude https://blog.ameba.jp/ucs/entry/srventrylist.do*
// @grant none
// ==/UserScript==
let retry=0;
let interval=setInterval(wait_target, 100);
function wait_target(){
retry++;
if(retry>10){ // リトライ制限 10回 1sec
clearInterval(interval); }
let target=document.getElementById('cke_1_contents'); // 監視 target
if(target){
clearInterval(interval);
main(); }}
function main(){
var target=document.getElementById('cke_1_contents'); // 監視 target
var monitor=new MutationObserver(catch_publish);
monitor.observe(target, {childList: true}); // 通常・HTML編集切換による発火不能を防ぐ
catch_publish();
function catch_publish(){
if(document.querySelector('.l-gHeaderLeft__link a')){ // 起動を「トップページ」アイコンに表示 📛
document.querySelector('.l-gHeaderLeft__link a').style.boxShadow='inset -14px 0 0 0 #79fbf6'; }
// ここを編集すると styleタグ内容を変更出来ます
var style_text=['@import url("https://use.fontawesome.com/releases/v5.8.2/css/all.css");',
'body {font-family: Meiryo,sans-serif;}'].join(' ');
var insert_elem_s;
var submitButton=document.querySelectorAll('.js-submitButton');
var editor_iframe=document.querySelector('.cke_wysiwyg_frame');
if(editor_iframe !=null){ //「通常表示」編集画面が実行条件
submitButton[0].addEventListener('mousedown', insert_tag, false);
submitButton[1].addEventListener('mousedown', insert_tag, false);
submitButton[2].addEventListener('mousedown', insert_tag, false); }
function insert_tag(){
if(editor_iframe.contentWindow){ // iframe読込みが実行条件
var iframe_doc=editor_iframe.contentWindow.document;
var iframe_body=iframe_doc.querySelector('body.cke_editable');
insert_elem_s=iframe_doc.createElement('style');
insert_elem_s.appendChild(iframe_doc.createTextNode(style_text));
insert_elem_s.setAttribute('class', 'asa');
if(iframe_body.firstChild.getAttribute('class')=='sie'){
iframe_body.firstChild.remove(); } // 記事先頭の sieは削除
if(!iframe_body.querySelector('.asa')){ // 記事末尾に style.asaを追加
iframe_body.appendChild(insert_elem_s); }}}
} // catch_publish 関数（保存ボタン押下時にタグ書込みを実行）
}
「Auto Style Attach ⭐」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Auto Style Attach ⭐」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
