「svg画像」による投稿不能を回避
現在「svg画像」を記事内に使用できません。 しかし、過去に記事に記入した「svg画像」は、そのまま温存されています。 もし、たまたまその記事を再編集すると、「禁止タグ」が含まれている事になり、保存が出来なくなります。
「SVG Repair ⭐」は、記事を再編集で開いた段階で「svg画像」の有無をチェックして知らせます。 このチェックツールが必要なユーザーは、「svg画像」の掲載方法を知るユーザーや、特別なツールを利用しているユーザーに限られます。 しかし、無くてはならない場合もあり得るので、基幹ツールに指定して更新しました。
「SVG Repair ⭐」の扱い方や仕様については、下のページを参照ください。
基幹ツールの起動を監視するツール
今回の更新は、基幹ツールを監視する機能の実装に対応したものです。 この機能の詳細は以下のページを参照ください。
今回の更新で追加した「起動を表示するコード」は以下の部分です。
「SVG Repair ⭐」 ver. 0.4 35行～
コメントに「📛」を書き込んでいますが、これは今後の起動監視に関して、各ツールのメンテナンス上で、検索をし易くするためです。
「SVG Repair ⭐」を利用するには
このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 SVG Repair ⭐ 〕 ver. 0.5
// ==UserScript==
// @name SVG Repair ⭐
// @namespace http://tampermonkey.net/
// @version 0.5
// @description 「svg画像」のリンクアイコンを自動でテキストに置換え
// @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){
clearInterval(interval); }
let target=document.querySelector('#cke_1_contents');
if(target){
clearInterval(interval);
wh(); }}
function wh(){
main();
let target=document.querySelector('#cke_1_contents');
let monitor=new MutationObserver( main );
monitor.observe(target, {childList: true}); }
function main(){
sessionStorage.setItem("jslord_4", "1"); // 📛
let editor_iframe;
let iframe_doc;
editor_iframe=document.querySelector('.cke_wysiwyg_frame');
if(editor_iframe){
iframe_doc=editor_iframe.contentWindow.document;
if(iframe_doc){
let target=iframe_doc.body;
let monitor=new MutationObserver( in_frame );
monitor.observe(target, {childList: true, subtree: true});
in_frame();
function in_frame(){
// リンクカードのsvg画像の置換え 🔵
let svg_icon=iframe_doc.querySelectorAll('.ogpCard_link svg');
for(let k=0; k<svg_icon.length; k++){
let parent_span=svg_icon[k].closest('span');
parent_span.innerHTML='∽';
let parent_color='';
if(parent_span.style.fill && parent_span.style.fill !='currentColor'){
parent_color=parent_span.style.fill; }
let css=
'height: 14px; width: 16px; font: bold 14px/17px Meiryo; '+
'transform: rotate(135deg);';
if(parent_color !=''){
css +=' color: '+ parent_color; }
parent_span.setAttribute('style', css); }
// Blockquoteのsvg画像の置換え 🔵
let svg_quote=iframe_doc.querySelectorAll('blockquote svg');
for(let k=0; k<svg_quote.length; k++){
let bq_set=0; // デザイン種
for(let i=0; i<10; i++){
if(svg_quote[k].classList.contains('m'+i)){
bq_set=i;
break; }}
let new_quote='<i class="bqm m'+ bq_set +'" style="position: absolute; ';
if(bq_set<5){
let quote_color=svg_quote[k].style.fill;
new_quote+=
'top: -8px; left: 10px; font-size: 48px; '+
'background: transparent; color: '+quote_color+';">❝</i>'; }
else if(bq_set==5){
new_quote+=
'top: -8px; left: 10px; font-size: 0; '+
'background: transparent;"> </i>'; }
else if(bq_set>5){
new_quote+=
'top: -4px; left: -23px; font-size: 40px; '+
'background: transparent; color: #fff; '+
'filter: drop-shadow(1px 1px 1px black);">❝</i>'; }
svg_quote[k].insertAdjacentHTML('afterend', new_quote);
svg_quote[k].remove(); }
// リンクカード以外のsvg画像のハイライト 🔵
let svg_img=iframe_doc.querySelectorAll('svg');
if(svg_img.length>0){
let svg_style=
'<style class="svg_style">svg { outline: 2px solid red; }</style>';
if(!iframe_doc.querySelector('.svg_style')){
iframe_doc.documentElement.insertAdjacentHTML('beforeend', svg_style); }}
// svg画像数をパネルに表示 🔵
count_svg();
function count_svg(){
let svg_img=iframe_doc.querySelectorAll('svg');
if(svg_img.length>0){
let disp=
'<div class="svg_count" '+
'style="position: fixed; top: 60px; left: 20px; font: 16px Meiryo; color: #fff; '+
'padding: 5px 15px 3px; border: 1px solid #fff; background: red; z-index: 30; ">'+
'SVG画像：<b>'+ svg_img.length +'</b></div>';
if(document.querySelector('.svg_count')){
document.querySelector('.svg_count').remove(); }
document.body.insertAdjacentHTML('beforeend', disp); }
if(svg_img.length==0){
if(document.querySelector('.svg_count')){
document.querySelector('.svg_count').remove(); }}} // count_svg()
} // in_frame()
}}
} // main()
「SVG Repair ⭐」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「SVG Repair ⭐」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
