一般ユーザー向けに？
前回の「ver. 3.6」で、特定の空白行の行間隔を指定するツールを作り「Paiette」の機能に追加しました。 この時に、行間隔の調節が欲しい場合に気付きました。 たとえば画像を縦に並べる時に、適当な間隔にしたい事があるからです。 そんな時、このツール固定のいわゆる「半改行」があれば充分かもしれませんが、それが全てのユーザーに最適な間隔とは決まりません。
で、なるべく多くのユーザーニーズに対応できる様に、行間隔を調節可能にする事を考えました。 設定のインターフェイスは色々考えられますが、「Pause➔F12」で表示する「パレットメニュー」を使う事にしました。
そしてその制作中に、「アンダーライン/マーカー」「囲み枠」もデザインを選択できると便利だと思い始めました。 本来このツールは私が必要な機能に特化したものでしたが、ツールを再編成して一般の方が利用し易い様にしました。
新しい編成
下は、「Pause➔F12」で表示される新しい「Elements Palette Menu」です。
本来、ショートカットを思い出すためのメニューですが、4つの機能のユーザー設定をここで出来る様にしています。 使い方は少し弄れば簡単に理解できます。
メニューで設定について
このメニューで設定した値はローカルストレージに保存されます。 ユーザーが再びこのメニューで変更をしない限り、設定が変わる事はありません。
設定に応じた文字装飾や要素生成がショートカットで実行されますが、それらの機能の実行時は、特に「パレットメニュー」を開く必要はありません。
Pause ➔ F3 / アンダーライン
▪「線幅」はアンダーラインの下線幅の調節で「1px」～「4px」で調節可能です。 通常のアンダーラインではなく、漢字フォントの下部にかからず綺麗です。 下線幅の設定により、下方に向かって太さが増す仕様です。
アンダーライン 1px アンダーライン 2px アンダーライン 3px
▪「線色」のカラー枠のクリックでパレットが表示され、そこで色を指定します。
Pause ➔ F4 / マーカー 線
▪「線幅」はマーカー線の幅調節で、「0.1em」～「1.2em」の調節が可能です。 マーカーは文字の下部から始まり、設定幅のマーカー線が描画されます。 幅の設定を増やすと、文字の下部から上方に向かって太さが増す仕様です。
マーカー線 0.3em マーカー線 0.6em マーカー線 1.2em
▪「線色」のカラー枠のクリックでパレットが表示され、そこで色を指定します。
Pause ➔ F6 / 囲み枠
▪「幅フィット」にチェックを入れると、内部の文字列に合わせた幅に変化する枠になります。 通常は本文幅に文字列が達すると改行しますが、「Shift+Enter」で途中改行すると、下の様に枠幅を内部の文字列で調節できます
幅フィットを指定した囲み枠です
幅フィットを指定した囲み枠です
幅フィットを指定した囲み枠です
幅フィットを指定した囲み枠です
幅フィットを指定した囲み枠です
▪「幅フィット」にチェックを入れないと、枠幅が常に本文幅になる通常の枠が生成されます。「Shift+Enter」で途中改行すると、下の様になります。
幅フィットを指定しない通常の囲み枠です
幅フィットを指定しない通常の囲み枠です
幅フィットを指定しない通常の囲み枠です
幅フィットを指定しない通常の囲み枠です
幅フィットを指定しない通常の囲み枠です
▪「幅」は枠線幅の設定で「0px」～「9px」で調節できます。「0px」は枠線無しで、枠を背景色のみで表現する場合に使います。
▪「カラー」は枠線色をパレットで指定します。
▪「角」は角の丸みで、「0px」～「20px」の範囲でコーナーの半径を指定します。「0px」は角を丸めない本来の矩形枠です。
▪「背景色」は、枠内の背景色をパレットで指定します。
幅フィット、枠線を「0」、角を「20」に指定
Pause ➔ F10 / 空白行の行間隔
▪ 空白行にキャレットを入れ、「 Pause ➔ F10」でキャレットのある行間隔を、指定値に設定します。 設定は「0em」～「3em」の範囲で調節できます。 通常のブログスキンでは、記事本文の行間隔は「1.4em～1.6em」程度です。 従って「0em」では改行していない（行が重なる）表示になり、「3em」は、ほぼ2行分にわたる空白行の表示になります。
「Elements Palette ⭐」他の機能についての纏め
「Elements Palette ⭐」は、「F5」を除く「F1」～「F12」のファンクションキーと「Pause」キーを組み合わせたショートカットで、以下の機能を利用できます。
Pause ➔ F1
下の「h2見出し」の雛形を生成します。 配色などのデザインはカスタマイズ可です。
h2見出し
Pause ➔ F2
下の「h3見出し」の雛形を生成します。 配色などのデザインはカスタマイズ可です。
h3見出し
「h2見出し」「h3見出し」の生成に関する詳細は、以下のページを参照ください。
Pause ➔ F3
反転選択した文字列にアンダーラインを付けます。
Pause ➔ F4
反転選択した文字列にマーカー線を付けます。
アンダーラインとマーカー線の詳細は、以下のページを参照ください。
Pause ➔ F6
囲み枠を生成します。 機能の詳細については、以下のページを参照ください。
Pause ➔ F7
コードを表記する「pre枠」を生成します。 この「pre枠」は、コードの行数によって自動的に拡張し、「pre枠」にスクロールバーは表示されないタイプです。
Pause ➔ F8
コードを表記する「pre枠」を生成します。 この「pre枠」縦方向の幅は固定されていて、コードの行数によってスクロールバーが表示されるタイプです。
コード枠に関する詳細は、以下のページを参照ください。
Pause ➔ F9
編集文書の最末尾に画像等のブロックがあり、改行して次行を書き難い状態の時、このショートカットで文書の末尾に空白行を生成します。
この機能の詳細は、以下のページを参照ください。
Pause ➔ F10
指定した空白行に、設定値の行間隔を指定します。
この機能の詳細は、以下を参照ください。
Pause ➔ F11
全角の「カギ括弧」を半角の「カギ括弧」に入れ替えます。（逆変更も可能） これは、カギ括弧の含まれた1行の文字数を調整したい場合に使います。
この機能についての詳細は、以下のページを参照ください。
Pause ➔ F12
「Element Palette」と「Fixed Format Palette」のショートカット/メニューを表示します。
（参考）「Fixed Format Palette」を使うと、ブログ記事上の一定の区画（複数行に渡り、文字以外にも画像やリンク等が含まれている範囲）を、まるごとコピーして登録し、それを編集時の必要な時に貼り付ける事ができます。 頻繁に使う同じ表示を登録すれば、過去記事に戻って何度もHTMLコピーする必要がありません。
「Fixed Format Palette」の詳細については、以下を参照ください。
「Elements Palette ⭐」を利用するには
このツールは Chrome / Edge / Firefox の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。 以下のページに簡単な導入の説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
●「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
●「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
● 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Elements Palette ⭐ 〕 ver. 3.8
// ==UserScript==
// @name Elements Palette ⭐
// @namespace http://tampermonkey.net/
// @version 3.8
// @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 ua=0;
let agent=window.navigator.userAgent.toLowerCase();
if(agent.indexOf('firefox') > -1){ ua=1; } // Firefoxの場合のフラッグ
let ep_preset=[]; // Elements Palette のユーザー設定
let read_json=localStorage.getItem('EP_Preset'); // ローカルストレージ 保存名
ep_preset=JSON.parse(read_json);
if(ep_preset==null){
ep_preset=[0, 2, "#2277dd", 0.6, "#4dffc9", 1, "#ff0000", 0, "#ffffff", 0, 0.5, 0]; }
let write_json=JSON.stringify(ep_preset);
localStorage.setItem('EP_Preset', write_json); // ローカルストレージ 保存
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を閉じる
} // F1
*/
if(sender==112){ // F1 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;}} // 文末処理
} // F1
if(sender==113){ // F2 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;}} // 文末処理
} // F2
if(sender==114){ // F3 修飾線の自動記入
// アンダーラインのデザイン
let style_text=
'linear-gradient(transparent 1.22em, '+
ep_preset[2] +' 0, '+ ep_preset[2] +' calc(1.22em + '+ ep_preset[1] +
'px), transparent 0)';
insert_node=document.createElement('span');
insert_node.style.background=style_text;
try{
range.surroundContents(insert_node); }
catch(e){;}
} // F3
if(sender==115){ // F4 修飾線の自動記入
// マーカー線のデザイン
let style_text=
'linear-gradient(transparent '+ (1.22 - ep_preset[3]) +'em, '+
ep_preset[4] +' 0, '+ ep_preset[4] +' 1.22em, transparent 0)';
insert_node=document.createElement('span');
insert_node.style.background=style_text;
try{
range.surroundContents(insert_node); }
catch(e){;}
} // F4
if(sender==116){ // F5
alert('【 F5 】 はショートカット無効です \n⛔ページリロードに注意してください'); }
if(sender==117){ // F6 囲み枠の自動生成
// 囲み枠のデザイン
let pad;
let fit;
if(ep_preset[9]==0){
pad='.62em 1.5em .5em';
fit=''; }
else{
pad='.62em 0.6em .5em';
fit='width: fit-content'; }
let style_text='border: '+ ep_preset[5] +'px solid '+ ep_preset[6] +
'; border-radius: '+ ep_preset[7] +'px; padding: '+ pad +'; '+
'max-width: 660px; background: '+ ep_preset[8] +'; '+ fit;
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;}} // 文末処理
} // F6
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;}} // 文末処理
} // F7
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;}} // 文末処理
} // F8
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終点を移動
} // F9
if(sender==121){ // F10 行間隔の狭い空白行の挿入
if(ac_node!=iframe_body.lastChild){ // 文末では禁（通常の改行が作れなくなる）
if(ac_node.tagName=='P' && ac_node.firstChild.tagName=="BR" &&
ac_node.childElementCount==1 && ac_node.parentNode.tagName=='BODY'){
// 空白行のみを対象に半改行にする
ac_node.style.lineHeight=ep_preset[10]+'em'; }}
else{
alert('文末の空白行は半改行にできません'); }
} // F10
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){;}}}
} // F11
if(sender==123){ // F12 「Elements Palette」のメニュー表示
// 表示パネルのデザイン
let css=
'.ep_menu { position: absolute; top: 10px; right: 20px; font: 16px/26px Meiryo; '+
'padding: 1em; border: 1px solid #009688; border-radius: 4px; z-index: 15; '+
'background: #f9fafa; box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.3); } '+
'.ep_menu input { height: 18px; font-family: system-ui; text-align: center; } '+
'#F3w { width: 30px; margin-right: 8px; } #F4w { width: 38px; } '+
'#F6w { width: 28px; } #F6r { width: 34px; } #F6f { vertical-align: -3px; } '+
'#F3c, #F4c, #F6c, #F6b { height: 26px; width: 22px; border: none; '+
'background: none; vertical-align: -3px; } #F10 { width: 40px; }';
if(ua==1){
css+=
'#F3w, #F6w { width: 34px; } #F4w, #F10 { width: 44px; } '+
'#F6r { width: 38px; } #F6f { vertical-align: -1px; } '+
'#F3c, #F4c, #F6c, #F6b { height: 18px; width: 18px; }'; }
let ep_style=document.createElement('style');
ep_style.textContent=css;
let menu=document.createElement('div');
menu.setAttribute('class', "ep_menu");
// パネルの表示内容
menu.innerHTML=
' 〔 Elements Palette Menu 〕<br>'+
'Pause ➔ F1 h2 見出し<br>'+
'Pause ➔ F2 h3 見出し<br>'+
'Pause ➔ F3 アンダーライン <br> 線幅 '+
'<input id="F3w" type="number" step="1" min="1" max="4">'+
' 線色 <input id="F3c" type="color"><br>'+
'Pause ➔ F4 マーカー線 <br> 線幅 '+
'<input id="F4w" type="number" step="0.1" step="0.1" min="0.1" max="1.2">'+
' 線色 <input id="F4c" type="color"><br>'+
'Pause ➔ F5 （無効）<br>'+
'Pause ➔ F6 囲み枠 <input id="F6f" type="checkbox"> 幅フィット<br>'+
' 幅 <input id="F6w" type="number" step="1" min="0" max="9">'+
' <input id="F6c" type="color">'+
' 角 <input id="F6r" type="number" step="1" min="0" max="20">'+
' 背景色 <input id="F6b" type="color"><br>'+
'Pause ➔ F7 PRE枠<br>'+
'Pause ➔ F8 PRE枠（スクロールタイプ）<br>'+
'Pause ➔ F9 文書末尾に空白行追加<br>'+
'Pause ➔ F10 空白行に行間隔を指定 '+
'<input id="F10" type="number" step="0.1" min="0" max="3"><br>'+
'Pause ➔ F11 「カギ括弧」全角 ⇄ 半角 変換<br>'+
'Pause ➔ F12 「Elements Palette」メニュー<br>'+
'<br>'+
' 〔 Fixed Format Palette Menu 〕<br>'+
'Alt + F11 通常表示で選択範囲を登録<br>'+
' ※Chrome/EdgeはHTML登録が可能<br>'+
'Ctrl + F11 通常表示で登録内容をペースト';
if(!document.querySelector('.ep_menu')){
document.querySelector('.l-body').appendChild(menu);
menu.appendChild(ep_style); }
else{
document.querySelector('.ep_menu').remove(); }
let F3w=document.querySelector('#F3w');
if(F3w){
F3w.value=ep_preset[1];
F3w.addEventListener("input", function(){
ep_preset[1]=parseFloat(F3w.value);
let write_json=JSON.stringify(ep_preset);
localStorage.setItem('EP_Preset', write_json); }); }
let F3c=document.querySelector('#F3c');
if(F3c){
F3c.value=ep_preset[2];
F3c.addEventListener("change", function(){
ep_preset[2]=F3c.value;
let write_json=JSON.stringify(ep_preset);
localStorage.setItem('EP_Preset', write_json); }); }
let F4w=document.querySelector('#F4w');
if(F4w){
F4w.value=ep_preset[3];
F4w.addEventListener("input", function(){
ep_preset[3]=parseFloat(F4w.value);
let write_json=JSON.stringify(ep_preset);
localStorage.setItem('EP_Preset', write_json); }); }
let F4c=document.querySelector('#F4c');
if(F4c){
F4c.value=ep_preset[4];
F4c.addEventListener("change", function(){
ep_preset[4]=F4c.value;
let write_json=JSON.stringify(ep_preset);
localStorage.setItem('EP_Preset', write_json); }); }
let F6w=document.querySelector('#F6w');
if(F6w){
F6w.value=ep_preset[5];
F6w.addEventListener("input", function(){
ep_preset[5]=parseFloat(F6w.value);
let write_json=JSON.stringify(ep_preset);
localStorage.setItem('EP_Preset', write_json); }); }
let F6c=document.querySelector('#F6c');
if(F6c){
F6c.value=ep_preset[6];
F6c.addEventListener("change", function(){
ep_preset[6]=F6c.value;
let write_json=JSON.stringify(ep_preset);
localStorage.setItem('EP_Preset', write_json); }); }
let F6r=document.querySelector('#F6r');
if(F6r){
F6r.value=ep_preset[7];
F6r.addEventListener("input", function(){
ep_preset[7]=parseFloat(F6r.value);
let write_json=JSON.stringify(ep_preset);
localStorage.setItem('EP_Preset', write_json); }); }
let F6b=document.querySelector('#F6b');
if(F6b){
F6b.value=ep_preset[8];
F6b.addEventListener("change", function(){
ep_preset[8]=F6b.value;
let write_json=JSON.stringify(ep_preset);
localStorage.setItem('EP_Preset', write_json); }); }
let F6f=document.querySelector('#F6f');
if(F6f){
if(ep_preset[9]==0){
F6f.checked=false; }
else{
F6f.checked=true; }
F6f.addEventListener("change", function(){
if(F6f.checked==true){
ep_preset[9]=1; }
else{
ep_preset[9]=0; }
let write_json=JSON.stringify(ep_preset);
localStorage.setItem('EP_Preset', write_json); }); }
let F10=document.querySelector('#F10');
if(F10){
F10.value=ep_preset[10];
F10.addEventListener("input", function(){
ep_preset[10]=parseFloat(F10.value);
let write_json=JSON.stringify(ep_preset);
localStorage.setItem('EP_Preset', write_json); }); }
} // F12
} // set_mark
} // main()
〔追記〕 2022.02.13
「input type="color"」のデザインを変更しました。 その更新版を「ver. 3.8」としています。 上記コードは更新済です。
「Elements Palette ⭐」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Elements Palette ⭐」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
