「Elements Palette ⭐」リンクカード関連のコードを更新 / JavaScript

余計な '『  』' を削除する 

アメブロ内の記事のリンクカードを作ると、下図の様に「記事タイトル」に二重カッコが付いて来ます。（下の赤矢印のカッコです）

私はタイトルに '「 」' を良く使うので、この二重カッコが付くとややこしくて困ります。 記事タイトルはフォントサイズ等で明瞭に区別されるので、この二重カッコは不要と思います。 で、これをスクリプトで削除する事にしました。

◎ 二重カッコは、アメブロ内部のリンクにシステムが自動付加するものなので、アメブロ内部のリンクのタイトルのみに、削除コードを実行する。

　⇨ 外部リンクで、たまたま記事タイトルに二重カッコがあっても、削除しない。

◎ 記事タイトルの先頭と末尾の1文字が二重カッコの場合にのみ、削除をする。

　⇨ 記事タイトルにユーザー自身が記入した二重カッコは、削除しない。

◎ スタブロやタレントブログ（オフィシャルユーザー）はレイアウトが特殊になる。

　⇨ この場合は体裁上で二重カッコを削除しない。

以上の条件で削除をして、タイトル表示が不本意な形にならない様にしました。

しかしこうして見ると、二重カッコは「オフィシャルユーザー」のために入れてるらしい。 前から変だと思っていたが…

削除を実行するコード 

下は、記事タイトルから、先頭・末尾の二重カッコを削除する関数です。

function slim_title(k){
    let ogpCard=iframe_doc.querySelectorAll('.ogpCard_root');
    let link=ogpCard[k].querySelector('.ogpCard_link');
    if(link.getAttribute('href').includes('https://ameblo.jp/')){
        let title=ogpCard[k].querySelector('.ogpCard_title');
        if(title){
            let title_str=title.textContent;
　　　　// 先頭・末尾が『』の場合
            if(title_str.slice(0, 1)=='『' && title_str.slice(-1)=='』'){ 
                title_str=title_str.slice(1).slice(0, -1); }
            title.textContent=title_str; }}}

今回の更新で、このコードをリンクカードのアレンジ部に追加しています。

複数カードのアレンジの中断 

リンクカードの生成過程で「カバー画像」が取得できなかったカードがある場合に、複数のリンクカードを纏めてアレンジするループが、そのカードの所で停止してしまう問題がありました。 これは、前回の更新時に修正した問題ですが...

原因は、しごく初歩的なコードの不備でした。

let ogpCard=iframe_doc.querySelectorAll('.ogpCard_root');
for(let k=0; k<ogpCard.length; k++){
    let imageW=ogpCard[k].querySelector('.ogpCard_imageWrap'); //❌
        imageW.style.width='98px';
        imageW.style.height='98px';
        imageW.style.top='3px';
        imageW.style.right='15px';
        imageW.style.border='1px solid #eee'; }

上のコードは、編集枠内の全ての「.ogpCard_root」（リンクカード）を取得し、そのひとつひとつで「.ogpCard_imageWrap」（カバー画像）を取得して、カバー画像のサイズやレイアウトをアレンジする、というコードです。

このコードの問題は「カバー画像」の無いリンクカードの事を忘れている事です。 そういうカードの場合に「❌」の行で「imageW」が取得が出来ず、次の行でエラーが出ます。 このループはそこで停止してしまいます。

JavaScriptはしたたかに出来ていて、再びアレンジの指示を出すと、なんとかこのカードの処理をこなします。 このループを中断させるエラーは、以下の条件コードを追加すると防げますが、これは非常にありきたりなエラー処理です。

let ogpCard=iframe_doc.querySelectorAll('.ogpCard_root');
for(let k=0; k<ogpCard.length; k++){
    let imageW=ogpCard[k].querySelector('.ogpCard_imageWrap');
    if(imageW){
        imageW.style.width='98px';
        imageW.style.height='98px';
        imageW.style.top='3px';
        imageW.style.right='15px';
        imageW.style.border='1px solid #eee'; }}

表示内容の欠けた「リンクカード」 

上記の表示内容の欠けは「カバー画像」ですが、「本文の導入部（description）」が欠ける場合もある様です。 こういう事は想像がついているべきでしたが、頭のめぐりが少々悪くなって来ました。 (T_T)

下のリンクカードは「本文導入部（description）」と「カバー画像」が無い例です。

CSS3 Patterns Gallery

こういうカードを作ってみて、未だエラー処理が不完全だったのに気付きました。

完全な対策 

今回、リンクカードの表示要素が不完全な場合を、全て考慮したものに改めました。

// リンクカードのデザイン
let ogpCard=iframe_doc.querySelectorAll('.ogpCard_root');
for(let k=0; k<ogpCard.length; k++){
    if(ogpCard[k].style.textAlign!='center'){
        ogpCard[k].style.textAlign='center'; }

    let link=ogpCard[k].querySelector('.ogpCard_link');
    if(link){
        link.style.width='500px';
        link.style.height='108px';
        link.style.margin='0 auto';
        link.style.border='1px solid #009688'; }

    let content=ogpCard[k].querySelector('.ogpCard_content');
    if(content){
        content.style.padding='8px 25px 4px 15px'; }

    let title=ogpCard[k].querySelector('.ogpCard_title');
    if(title){
        title.style.flexShrink='0';
        title.style.lineHeight='1.25'; }

    let description=ogpCard[k].querySelector('.ogpCard_description');
    if(description){
        description.style.whiteSpace='unset';
        description.style.marginTop='3px';
        description.style.lineHeight='1.4'; }

    let imageW=ogpCard[k].querySelector('.ogpCard_imageWrap');
    if(imageW){
        imageW.style.width='98px';
        imageW.style.height='98px';
        imageW.style.top='3px';
        imageW.style.right='15px';
        imageW.style.border='1px solid #eee'; }}

「リンクカード」に「タイトル」が無い場合は有り得ないかも知れませんが、今回に懲りて万全を期したコードにしています。

この「リンクカード」のアレンジは、「Elements Palette ⭐」の機能のひとつですが、「Pause + F10」のショートカットで、編集枠内の全ての「リンクカード」がアレンジされます。

 「Elements Palette ⭐」について

「Elements Palette ⭐」には、以下のメニューの「F1」～「F4」「F6」～「F12」の11種の機能があります。

 Pause + F1 

Font Awesome のリンクアイコン「  」を記入します。

詳細は、以下のページを参照ください。

　　Font Awesome のリンクアイコンを自動記入するツール  

 Pause + F2 

下の「h2見出し」の雛形を生成します。 配色などのデザインはカスタマイズ可です。

h2見出し 

詳細は、以下のページを参照ください。

　　定型の見出しタグ「h2」「h3」を自動記入するツール  

 Pause + F3 

下の「h3見出し」の雛形を生成します。 配色などのデザインはカスタマイズ可です。

h3見出し 
 

 Pause + F4 

右の様なカラーアンダーラインを付けます。  アンダーラインの生成

以下のページに、線色、太さ、マーカーへの変更などのカスタマイズについて纏めています。

　　「カラーのアンダーライン」「マーカー線」を自動記入するツール  

 Pause + F6 

下の様な囲み枠を生成します。 枠の大きさは、「Shift + Enter」で改行して自由に拡張できます。 また、枠線色や背景色等は、スクリプトをカスタマイズできます。

囲み枠内部の改行で、大きさは可変です。

詳細は、以下のページを参照ください。

　　定型の「囲み枠」を自動記入するツール  

 Pause + F7 

コードを表記する「pre枠」を生成します。 この「pre枠」は、コードの行数によって自動的に拡張し、「pre枠」にスクロールバーは表示されないタイプです。

*{ position: relative; }

詳細は、以下のページを参照ください。

　　コード掲載用「pre」枠を自動記入するツール  

 Pause + F8 

コードを表記する「pre枠」を生成します。 この「pre枠」縦方向の幅は固定されていて、コードの行数によってスクロールバーが表示されるタイプです。

 Pause + F9 

編集文書の最末尾に画像等のブロックがあり、改行して次行を書き難い状態の時、このショートカットで文書の末尾に空白行を生成します。

詳細は、以下のページを参照ください。

　　文書末尾の画像の後に空白行を自動記入するツール  

 Pause + F10 

編集文書に作った「リンクカード」「リブログカード」を、コンパクトにアレンジします。

詳細は、以下のページを参照ください。

　　リンクカードを自動アレンジする  

 Pause + F11 

全角の「カギ括弧」を半角の「カギ括弧」に入れ替えます。（逆変更も可能） これは、カギ括弧の含まれた1行の文字数を調整したい場合に使います。

詳細は、以下のページを参照ください。

　　「カギ括弧」の変換ツールを更新  

 Pause + F12 

「Element Palette」と「Fixed Format Palette」のショートカット/メニューを表示します。

「Elements Palette ⭐」のカスタマイズ 

記入パーツのデザインは、このツールのコードのCSSに関する部分を書換えることでアレンジできます。 ユーザー自身のブログ環境に合わせてこのツールをカスタマイズすれば、ブログ編集の強力な支援ツールになります。

スクリプトコードは、各ツールごとに纏められています。 そして、各ツールのデザインに関するCSSの部分は、スクリプトコードに詳しくなくても、CSSの知識がある程度あれば判断でき、その部分を書き換える事でカスタマイズ可能です。 

また、不要なツールは、各ツールのスクリプトを削除する事で無効化出来ます。

「Elements Palette ⭐」ver. 3.4  

このツールは Chrome / 新Edge / Firefox の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。

❶「Tampermonkey」を導入します

◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。

既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。 

拡張機能の導入については、以下のページに簡単な説明があるので参照ください。

⭕「Tampermonkey」の導入方法 / JavaScript

❷「Tampermonkey」にスクリプトを登録します

◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。

◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。

〔コピー方法〕　軽量シンプルなツール「PreBox Button   」を使うと

　　コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」

　　の操作で、掲載コードのコピーが可能になります。

◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。

〔追記〕2020.12.06

「リンクカード」のアレンジコードを一部修正しました。 これに従い、以下のコードのバージョンを ver. 3.4 に変更しています。

〔 Elements Palette ⭐ 〕 ver. 3.4

// ==UserScript==
// @name         Elements Palette ⭐
// @namespace  http://tampermonkey.net/
// @version      3.4
// @description  編集枠に各種要素を自動記入するツール
// @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(){
    let target=document.getElementById('cke_1_contents'); // 監視 target
    let monitor=new MutationObserver(catch_key);
    monitor.observe(target, {childList: true}); // ショートカット待受け開始

    catch_key();

    function catch_key(){
        if(document.querySelector('.l-gHeaderLeft__link a')){ // 起動を「トップページ」アイコンに表示 📛
            document.querySelector('.l-gHeaderLeft__link a').style.boxShadow='inset -14px 0 0 0 #79fbf6'; }

        let editor_iframe=document.querySelector('.cke_wysiwyg_frame');
        if(editor_iframe){ // iframe読込みが実行条件
            let iframe_doc=editor_iframe.contentWindow.document;

            iframe_doc.addEventListener("keydown", check_key);
            let gate;
            function check_key(event){
                let send=-1;

                if(event.keyCode==19){ gate=1; } // 「Pause」キー入力

                if(event.keyCode==112){
                    if(gate==1){ event.preventDefault(); send=112; }} // F1
                if(event.keyCode==113){
                    if(gate==1){ event.preventDefault(); send=113; }} // F2
                if(event.keyCode==114){
                    if(gate==1){ event.preventDefault(); send=114; }} // F3
                if(event.keyCode==115){
                    if(gate==1){ event.preventDefault(); send=115; }} // F4
                if(event.keyCode==116){
                    if(gate==1){ event.preventDefault(); send=116; }} // F5
                if(event.keyCode==117){
                    if(gate==1){ event.preventDefault(); send=117; }} // F6
                if(event.keyCode==118){
                    if(gate==1){ event.preventDefault(); send=118; }} // F7
                if(event.keyCode==119){
                    if(gate==1){ event.preventDefault(); send=119; }} // F8
                if(event.keyCode==120){
                    if(gate==1){ event.preventDefault(); send=120; }} // F9
                if(event.keyCode==121){
                    if(gate==1){ event.preventDefault(); send=121; }} // F10
                if(event.keyCode==122){
                    if(gate==1){ event.preventDefault(); send=122; }} // F11
                if(event.keyCode==123){
                    if(gate==1){ event.preventDefault(); send=123; }} // F12

                if(event.keyCode !=19){ gate=-1; }
                if(send !=-1){
                    event.stopImmediatePropagation();
                    set_mark(send); }
            } // check_key
        }} // catch_key



    function set_mark(sender){
        let editor_iframe;
        let iframe_doc;
        let iframe_html;
        let iframe_body;
        let selection;
        let range;
        let ac_node;
        let insert_node;

        editor_iframe=document.querySelector('.cke_wysiwyg_frame');
        iframe_doc=editor_iframe.contentWindow.document;
        iframe_html=iframe_doc.querySelector('html');
        iframe_body=iframe_doc.querySelector('body.cke_editable');
        selection=iframe_doc.getSelection();
        range=selection.getRangeAt(0);
        ac_node=selection.anchorNode;



        if(sender==112){ // F1    Font Awesomeアイコンの自動記入
            let insert_node_z;
            insert_node=iframe_doc.createElement('i');
            insert_node.appendChild(iframe_doc.createTextNode('\u00A0'));
            insert_node.setAttribute('class', 'fas fa-external-link-alt fa-sm');
            insert_node.setAttribute('style', 'margin-left: .5em');
            range.insertNode(insert_node);

            insert_node_z=iframe_doc.createTextNode('\u200A');
            insert_node.parentNode.insertBefore(insert_node_z, insert_node.nextSibling);
            range.setEnd(insert_node_z.nextSibling, 0);
            range.collapse(); // フォーカスを失わないでrangeを閉じる
        }



        if(sender==113){ // F2    h2 見出しの自動記入
            let style_text='background: #b0e0e6; padding: .32em 1em .2em'; // h2のデザイン
            let font_size='font-size: 1em'; // h2のフォントサイズ

            let insert_node_h;
            insert_node_h=iframe_doc.createElement('h2');
            insert_node_h.setAttribute('style', font_size);
            insert_node_h.appendChild(iframe_doc.createElement('span'));
            insert_node_h.lastChild.setAttribute('style', style_text);
            insert_node_h.lastChild.appendChild(iframe_doc.createTextNode('\u200A'));

            if(ac_node.nodeType==3 &&
               ac_node.parentNode.tagName=='P' && ac_node.parentNode.parentNode.tagName=='BODY'){
                ac_node.parentNode.parentNode.insertBefore(insert_node_h, ac_node.parentNode);
                h_before_after();
                when_end();
            } // h要素生成の条件 通常のP要素のテキストノードから作成

            if(ac_node.tagName=='P' &&
               ac_node.firstChild.tagName=="BR" && ac_node.parentNode.tagName=='BODY'){
                ac_node.parentNode.insertBefore(insert_node_h, ac_node);
                h_before_after();
                when_end();
            } // h要素生成の条件 空白行から作成

            function h_before_after(){
                if(insert_node_h.previousElementSibling !=null &&
                   insert_node_h.previousElementSibling.firstChild.tagName !='BR'){
                    insert_node_h.insertAdjacentHTML('beforebegin', '<p>\u00A0</p>');}
                if(insert_node_h.nextElementSibling.firstChild.tagName !='BR'){
                    insert_node_h.insertAdjacentHTML('afterend', '<p>\u00A0</p>');}
                range.setEnd(insert_node_h.lastChild, 0);} // 生成したh要素の前後の空白行処理

            function when_end(){
                if(insert_node_h.nextElementSibling==insert_node_h.parentNode.lastChild){
                    insert_node_h.insertAdjacentHTML('afterend', '<p>\u00A0</p>');
                    iframe_html.scrollTop=iframe_html.scrollHeight;}} // 文末処理
        }



        if(sender==114){ // F3    h3 見出しの自動記入
            let style_text='background: #ddd; padding: .32em 1em .2em'; // h3のデザイン
            let font_size='font-size: 1em'; // h3のフォントサイズ

            let insert_node_h;
            insert_node_h=iframe_doc.createElement('h3');
            insert_node_h.setAttribute('style', font_size);
            insert_node_h.appendChild(iframe_doc.createElement('span'));
            insert_node_h.lastChild.setAttribute('style', style_text);
            insert_node_h.lastChild.appendChild(iframe_doc.createTextNode('\u200A'));

            if(ac_node.nodeType==3 &&
               ac_node.parentNode.tagName=='P' && ac_node.parentNode.parentNode.tagName=='BODY'){
                ac_node.parentNode.parentNode.insertBefore(insert_node_h, ac_node.parentNode);
                h_before_after();
                when_end();
            } // h要素生成の条件 通常のP要素のテキストノードから作成

            if(ac_node.tagName=='P' &&
               ac_node.firstChild.tagName=='BR' && ac_node.parentNode.tagName=='BODY'){
                ac_node.parentNode.insertBefore(insert_node_h, ac_node);
                h_before_after();
                when_end();
            } // h要素生成の条件 空白行から作成

            function h_before_after(){
                if(insert_node_h.previousElementSibling !=null &&
                   insert_node_h.previousElementSibling.firstChild.tagName !='BR'){
                    insert_node_h.insertAdjacentHTML('beforebegin', '<p>\u00A0</p>');}
                if(insert_node_h.nextElementSibling.firstChild.tagName !='BR'){
                    insert_node_h.insertAdjacentHTML('afterend', '<p>\u00A0</p>');}
                range.setEnd(insert_node_h.lastChild, 0);} // 生成したh要素の前後の空白行処理

            function when_end(){
                if(insert_node_h.nextElementSibling==insert_node_h.parentNode.lastChild){
                    insert_node_h.insertAdjacentHTML('afterend', '<p>\u00A0</p>');
                    iframe_html.scrollTop=iframe_html.scrollHeight;}} // 文末処理
        }



        if(sender==115){ // F4    修飾線の自動記入
            // 文字アンダーライン・マーカー線のデザイン
            let style_text=
                'linear-gradient(transparent 1.22em, #27d 0, #27d calc(1.22em + 1px), transparent 0)';
            insert_node=document.createElement('span');
            insert_node.style.background=style_text;

            try{
                range.surroundContents(insert_node); }
            catch(e){;}
        }



        if(sender==116){ // F5
            alert('【 F5 】 はショートカット無効です \n⛔ページリロードに注意してください'); }



        if(sender==117){ // F6    囲み枠の自動生成
            // 囲み枠のデザイン
            let style_text='background: #f2faf8; border: 1px solid #aaa; border-radius: 4px; '+
                'padding: .62em 2em .5em; max-width: 660px;';

            let insert_node_d;
            insert_node_d=iframe_doc.createElement('div');
            insert_node_d.setAttribute('style', style_text);
            insert_node_d.appendChild(iframe_doc.createElement('br'));

            if(ac_node.nodeType==3 &&
               ac_node.parentNode.tagName=='P' && ac_node.parentNode.parentNode.tagName=='BODY'){
                ac_node.parentNode.parentNode.insertBefore(insert_node_d, ac_node.parentNode.nextSibling);
                d_before_after();
                when_end();
            } // d要素生成の条件 通常のP要素のテキストノードから作成

            if(ac_node.tagName=='P' &&
               ac_node.firstChild.tagName=='BR' && ac_node.parentNode.tagName=='BODY'){
                ac_node.parentNode.insertBefore(insert_node_d, ac_node);
                d_before_after();
                when_end();
            } // div要素生成の条件 空白行から作成

            function d_before_after(){
                if(insert_node_d==insert_node_d.parentNode.firstChild ||
                   insert_node_d.previousElementSibling.firstChild.tagName !='BR'){
                    insert_node_d.insertAdjacentHTML('beforebegin', '<p>\u00A0</p>');}
                if(insert_node_d.nextElementSibling==null ||
                   insert_node_d.nextElementSibling.firstChild.tagName !='BR'){
                    insert_node_d.insertAdjacentHTML('afterend', '<p>\u00A0</p>');}
                range.setEnd(insert_node_d, 0);
                range.collapse();} // 生成したdiv要素の前後の空白行処理

            function when_end(){
                if(insert_node_d.nextElementSibling==insert_node_d.parentNode.lastChild){
                    insert_node_d.insertAdjacentHTML('afterend', '<p>\u00A0</p>');
                    iframe_html.scrollTop=iframe_html.scrollHeight;}} // 文末処理
        }



        if(sender==118){ // F7    PRE枠の自動生成
            // PRE枠のデザイン 縦スクロールしないタイプ
            let style_text_div=' max-width: 620px;overflow-y: hidden; margin: 0 auto; '+
                'background: #fafafa; border: 1px solid #aaa;';
            let style_text_pre='white-space: pre; display: inline-block; padding: 0 2em;';

            let insert_node_d;
            insert_node_d=iframe_doc.createElement('div');
            insert_node_d.setAttribute('style', style_text_div);
            insert_node_d.appendChild(iframe_doc.createElement('pre'));
            insert_node_d.lastChild.setAttribute('style', style_text_pre);
            insert_node_d.lastChild.appendChild(iframe_doc.createElement('br'));

            if(ac_node.nodeType==3 &&
               ac_node.parentNode.tagName=='P' && ac_node.parentNode.parentNode.tagName=='BODY'){
                ac_node.parentNode.parentNode.insertBefore(insert_node_d, ac_node.parentNode.nextSibling);
                d_before_after();
                when_end();
            } // div要素生成の条件 通常のP要素のテキストノードから作成

            if(ac_node.tagName=='P' &&
               ac_node.firstChild.tagName=='BR' && ac_node.parentNode.tagName=='BODY'){
                ac_node.parentNode.insertBefore(insert_node_d, ac_node);
                d_before_after();
                when_end();
            } // div要素生成の条件 空白行から作成

            function d_before_after(){
                if(insert_node_d==insert_node_d.parentNode.firstChild ||
                   insert_node_d.previousElementSibling.firstChild.tagName !='BR'){
                    insert_node_d.insertAdjacentHTML('beforebegin', '<p>\u00A0</p>');}
                if(insert_node_d.nextElementSibling==null ||
                   insert_node_d.nextElementSibling.firstChild.tagName !='BR'){
                    insert_node_d.insertAdjacentHTML('afterend', '<p>\u00A0</p>');}
                range.setEnd(insert_node_d.lastChild, 0);
                range.collapse();} // 生成したdiv要素の前後の空白行処理

            function when_end(){
                if(insert_node_d.nextElementSibling==insert_node_d.parentNode.lastChild){
                    insert_node_d.insertAdjacentHTML('afterend', '<p>\u00A0</p>');
                    iframe_html.scrollTop=iframe_html.scrollHeight;}} // 文末処理
        }



        if(sender==119){ // F8    PRE枠の自動生成
            // PRE枠のデザイン 縦スクロールするタイプ
            let style_text_div=' max-width: 620px; overflow: auto; height: 50vh; margin: 0 auto; '+
                'background: #fafafa; border: 1px solid #aaa; resize: vertical;';
            let style_text_pre='white-space: pre; display: inline-block; padding: 0 2em;';

            let insert_node_d;
            insert_node_d=iframe_doc.createElement('div');
            insert_node_d.setAttribute('style', style_text_div);
            insert_node_d.appendChild(iframe_doc.createElement('pre'));
            insert_node_d.lastChild.setAttribute('style', style_text_pre);
            insert_node_d.lastChild.appendChild(iframe_doc.createElement('br'));

            if(ac_node.nodeType==3 &&
               ac_node.parentNode.tagName=='P' && ac_node.parentNode.parentNode.tagName=='BODY'){
                ac_node.parentNode.parentNode.insertBefore(insert_node_d, ac_node.parentNode.nextSibling);
                d_before_after();
                when_end();
            } // div要素生成の条件 通常のP要素のテキストノードから作成

            if(ac_node.tagName=='P' &&
               ac_node.firstChild.tagName=='BR' && ac_node.parentNode.tagName=='BODY'){
                ac_node.parentNode.insertBefore(insert_node_d, ac_node);
                d_before_after();
                when_end();
            } // div要素生成の条件 空白行から作成

            function d_before_after(){
                if(insert_node_d==insert_node_d.parentNode.firstChild ||
                   insert_node_d.previousElementSibling.firstChild.tagName !='BR'){
                    insert_node_d.insertAdjacentHTML('beforebegin', '<p>\u00A0</p>');}
                if(insert_node_d.nextElementSibling==null ||
                   insert_node_d.nextElementSibling.firstChild.tagName !='BR'){
                    insert_node_d.insertAdjacentHTML('afterend', '<p>\u00A0</p>');}
                range.setEnd(insert_node_d.lastChild, 0);
                range.collapse();} // 生成したdiv要素の前後の空白行処理

            function when_end(){
                if(insert_node_d.nextElementSibling==insert_node_d.parentNode.lastChild){
                    insert_node_d.insertAdjacentHTML('afterend', '<p>\u00A0</p>');
                    iframe_html.scrollTop=iframe_html.scrollHeight;}} // 文末処理
        }



        if(sender==120){ // F9    文書末尾に空白行を追加
            if(iframe_body.lastChild.tagName !='P' && iframe_body.lastChild.tagName !='STYLE'){
                add_nextline();
                add_nextline(); }
            else if(iframe_body.lastChild.tagName=='P'){
                if(iframe_body.lastChild.style.textAlign=='center'
                   || iframe_body.lastChild.style.textAlign=='right'){
                    add_nextline();
                    add_nextline(); }}
            else if(iframe_body.lastChild.tagName=='STYLE'){
                if(iframe_body.lastChild.className=='asa'){
                    add_preline();
                    add_preline(); }}

            range.collapse(); // rangeを始点で閉じる
            iframe_html.scrollTop=iframe_html.scrollHeight;

            function add_nextline(){
                insert_node=iframe_doc.createElement('p');
                insert_node.appendChild(iframe_doc.createTextNode('\u00A0'));
                iframe_body.appendChild(insert_node);
                range.setEnd(insert_node.lastChild, 0); } // 追加した空白行にrange終点を移動

            function add_preline(){
                insert_node=iframe_doc.createElement('p');
                insert_node.appendChild(iframe_doc.createTextNode('\u00A0'));
                iframe_body.insertBefore(insert_node, iframe_body.lastChild);
                range.setEnd(insert_node.lastChild, 0); } // 追加した空白行にrange終点を移動
        }



        if(sender==121){ // F10    リブログカード・リンクカードをデザイン
            // リブログカードのデザイン
            let style_dtext=
                'max-width: 500px; height: 140px; margin: 0 auto; border: 1px solid #009688; '+
                'border-radius: 4px; overflow: hidden; transition: .5s;';
            let style_itext='max-width: unset; width: calc(100% + 30px); '+
                'margin: -45px -15px 0; background: #f0f7fb;';

            let rebrog;
            let insert_node_d;
            rebrog=iframe_doc.querySelector('.reblogCard');

            if(rebrog){
                insert_node_d=iframe_doc.createElement('div');

                if(rebrog.parentNode.tagName=='P'){
                    iframe_body.insertBefore(insert_node_d, rebrog.parentNode);
                    insert_node_d.appendChild(rebrog); }
                if(rebrog.parentNode.tagName=='DIV'){
                    rebrog.parentNode.setAttribute('style', style_dtext);
                    rebrog.parentNode.setAttribute('class', 'rlink');
                    rebrog.setAttribute('style', style_itext); }

                if(rebrog.parentNode.previousElementSibling==null){ //ページ最上部なら上に余白行追加
                    insert_node_d.insertAdjacentHTML('beforebegin', '<p>\u00A0</p><p>\u00A0</p>');}
                if(rebrog.parentNode.nextElementSibling==rebrog.parentNode.parentNode.lastChild){
                    rebrog.parentNode.insertAdjacentHTML('afterend', '<p>\u00A0</p>');} //文末処理
            }

            // リンクカードのデザイン
            let ogpCard=iframe_doc.querySelectorAll('.ogpCard_root');
            for(let k=0; k<ogpCard.length; k++){
                if(ogpCard[k].style.textAlign!='center'){
                    ogpCard[k].style.textAlign='center'; }

                let link=ogpCard[k].querySelector('.ogpCard_link');
                if(link){
                    link.style.width='500px';
                    link.style.height='108px';
                    link.style.margin='0 auto';
                    link.style.border='1px solid #009688'; }

                let content=ogpCard[k].querySelector('.ogpCard_content');
                if(content){
                    content.style.padding='8px 25px 4px 15px'; }

                let title=ogpCard[k].querySelector('.ogpCard_title');
                if(title){
                    title.style.flexShrink='0';
                    title.style.font='bold 16px/1.25 Meiryo';
                    slim_title(k); }

                let description=ogpCard[k].querySelector('.ogpCard_description');
                if(description){
                    description.style.whiteSpace='unset';
                    description.style.margin='0';
                    description.style.font='13px/1.4 Meiryo'; }

                let imageW=ogpCard[k].querySelector('.ogpCard_imageWrap');
                if(imageW){
                    imageW.style.width='98px';
                    imageW.style.height='98px';
                    imageW.style.top='3px';
                    imageW.style.right='15px';
                    imageW.style.border='1px solid #eee'; }}


            function slim_title(k){
                let ogpCard=iframe_doc.querySelectorAll('.ogpCard_root');
                let link=ogpCard[k].querySelector('.ogpCard_link');
                if(link.getAttribute('href').includes('https://ameblo.jp/')){
                    let title=ogpCard[k].querySelector('.ogpCard_title');
                    if(title){
                        let title_str=title.textContent;
                        if(title_str.slice(0, 1)=='『' && title_str.slice(-1)=='』'){ // 先頭・末尾が『』の場合
                            title_str=title_str.slice(1).slice(0, -1); }
                        title.textContent=title_str; }}}
        }



        if(sender==122){ // F11    選択範囲の「カギ括弧」⇄「半角カギ括弧」の変換
            //  '｢' (\uFF62)  '｣' (\uFF63) の文字へ置換え
            let r_text=range.toString();

            if(r_text.match( /「|」/ ) !=null){
                r_text=r_text.replace(/「/g, '\u2006｢').replace(/」/g, '｣\u2006');
                let insert_node=document.createTextNode(r_text);
                try{
                    range.surroundContents(insert_node); }
                catch(e){;}}
            else{
                if(r_text.match( /\u2006｢|｣\u2006|｢|｣/ ) !=null){
                    r_text=r_text.replace(/\u2006｢/g, '「').replace(/｣\u2006/g, '」')
                        .replace(/｣/g, '」').replace(/｢/g, '「');
                    let insert_node=document.createTextNode(r_text);
                    try{
                        range.surroundContents(insert_node); }
                    catch(e){;}}}
        }



        if(sender==123){ // F12    「Elements Palette」のメニュー表示
            // 表示パネルのデザイン
            let style_text='position: absolute; top: 10px; left: calc(50% + 120px); z-index: 15; '+
                'font-size: 16px; padding: 1em; border: 1px solid #009688; border-radius: 4px; '+
                'background: #f9fafa; box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.3);';

            let menu=document.createElement('div');
            menu.setAttribute('style', style_text);
            menu.setAttribute('class', "ep_menu");
            // パネルの表示内容
            menu.innerHTML=
                '　　〔 Elements Palette Menu 〕<br>'+
                'Pause + F1　　Font Awesome アイコン<br>'+
                'Pause + F2　　h2 見出し<br>'+
                'Pause + F3　　h3 見出し<br>'+
                'Pause + F4　　アンダーライン / マーカー<br>'+
                'Pause + F5　　（無効）<br>'+
                'Pause + F6　　囲み枠<br>'+
                'Pause + F7　　PRE枠<br>'+
                'Pause + F8　　PRE枠（スクロールタイプ）<br>'+
                'Pause + F9　　文書末尾に空白行追加<br>'+
                'Pause + F10　 リブログ・リンクカードを修飾<br>'+
                'Pause + F11　「カギ括弧」全角 ⇄ 半角 変換<br>'+
                'Pause + F12　「Elements Palette」メニュー<br>'+
                '<br>'+
                '　　〔 Fixed Format Palette Menu 〕<br>'+
                'Alt + F11 + Bank　　 選択範囲を登録<br>'+
                '　　※通常表示で F1～F9 の登録Bankを指定<br>'+
                '　　※HTML表示で F1～F9 の登録Bankを指定<br>'+
                'Ctrl + F11 + Bank　　登録内容をペースト<br>'+
                '　　※通常表示で F1～F9 の登録Bankを指定<br>'+
                'Ctrl / Alt + F11 + F10　 ファイルバックアップ';

            if(!document.querySelector('.ep_menu')){
                document.querySelector('.l-body').appendChild(menu); }
            else{
                document.querySelector('.ep_menu').remove(); }
        }

    } // set_mark
}

「Elements Palette ⭐」最新版について 

旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。

●「Elements Palette ⭐」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。

スクリプトツール 　最新バージョン・リンク一覧表 （ツール名順）