記事中で「囲み枠」が欲しい時がある
記事の中で、ある部分の記述を周囲の流れと区別したい時があります。「引用」（blockquote）をする場合もそうですが、それ以外の場合もあるでしょう。
そんな場合、段落を「=======」や「**********」で区切ったり、文字背景色を着けて段落ごと周囲と区別して見せる簡単な方法があります。
======= **********
段落 段落 段落 段落 段落 段落
======= **********
また、下の様にHTMLで <hr>タグを使う手もあります。
それでも良いですが、背景色や枠線のある「囲み枠」を使うと便利です。 装飾過剰な囲み枠の乱用は、みな飾りに見えてしまいますが、効果的な「囲み枠」の使用は読み手に内容の浸透を助けると思います。
「blockquote」の SEO問題
「囲み枠」を使う前に気になるのが、「blockquote」の「 」の問題です。 他の記事の引用は <blockquote>タグで囲まないと、検索エンジンから斜めに見られるという、SEO上の議論がありました。 もしそうなら、引用には独自の「囲み枠」を使わない方が良いことになります。
しかしネットを調べると「記事内に引用元のリンク等があったり、引用と判る書き方なら問題にならない」というのが、現在の主流意見の様です。 それなら引用の場合にも「囲み枠」を使って良さそうです。 編集画面のデフォルトでは「blockquote」タグを使うと左縦線が出て、このデザインは少し扱い難いですから。
「囲み枠」の自動記入するコード
自動記入のスクリプトで「囲み枠」に色々と装飾を施すと、その分のCSSのインラインコードが長くなります。 凝るのは別に構わないですが、ここではシンプルなCSSに留めています。 背景色、枠線色などのデザインは、必要による変更が前提です。
「囲み枠の背景色」 background: #f2faf8;
「枠線」 border: 1px solid #aaa;
「枠線の角丸め」 border-radius: 4px;
「枠内のpadding」 padding: .62em 2em .5em;
スクリプトは「pre」枠」のコードを簡単にしたものです。
〔 囲み枠の自動記入 〕
◎「Elements Palette」に実装する時は、他のツールで同様の変数が既に使用されているので、5つの変数に「var」が付けられません。（「var」を削除して実装）
下図は、この囲み枠を実際に使用したサンプルです。
「囲み枠」ツールを実装した「Elements Palette」
「Elements Palette」のショートカットキーの設定は以下の様にしていますが、ユーザーの使用条件に合わせて変更できます。
「Pause」→「F1」: 「Font Awesome」のリンクアイコン自動記入
「Pause」→「F2」: コード掲載用「pre」枠の自動記入
「Pause」→「F3」: デザインされた「h2タグ」の自動記入
「Pause」→「F4」: デザインされた「h3タグ」の自動記入
「Pause」→「F5」: （ F5 はショートカット無効が推奨）
「Pause」→「F6」: 「囲み枠」の自動記入
「Pause」→「F7」: コード掲載用「pre」枠の縦スクロールタイプ自動記入
「Pause」→「F8」: ツール未設定
ツール未設定の「F8」は「囲み枠」の配色等バリエーション等の用途が考えられます。 また「F9」以上もコードを書き加えて追加出来ます。
〔 Elements Palette 〕 ver. 0.8
// ==UserScript==
// @name Elements Palette
// @namespace http://tampermonkey.net/
// @version 0.8
// @description 編集枠に各種要素を自動記入するツール
// @author Ameba Blog User
// @match https://blog.ameba.jp/ucs/entry/srventry*
// @grant none
// ==/UserScript==
window.addEventListener( 'load', function() {
'use strict';
var target = document.getElementById('cke_1_contents'); // 監視 target
var monitor = new MutationObserver( catch_key );
monitor.observe(target, {childList: true}); // ショートカット待受け開始
catch_key();
function catch_key() {
var editor_iframe = document.querySelector('.cke_wysiwyg_frame');
var iframe_doc = editor_iframe.contentWindow.document;
iframe_doc.addEventListener( "keydown", check_key );
var gate;
function check_key(event) {
var send = -1;
if (event.which == 19 || event.keyCode == 19) { gate = 1; }
if (event.which == 112 || event.keyCode == 112) {
if( gate == 1 ){ event.preventDefault(); send = 112; } }
if (event.which == 113 || event.keyCode == 113) {
if( gate == 1 ){ event.preventDefault(); send = 113; } }
if (event.which == 114 || event.keyCode == 114) {
if( gate == 1 ){ event.preventDefault(); send = 114; } }
if (event.which == 115 || event.keyCode == 115) {
if( gate == 1 ){ event.preventDefault(); send = 115; } }
if (event.which == 116 || event.keyCode == 116) {
if( gate == 1 ){ event.preventDefault(); send = 116; } }
if (event.which == 117 || event.keyCode == 117) {
if( gate == 1 ){ event.preventDefault(); send = 117; } }
if (event.which == 118 || event.keyCode == 118) {
if( gate == 1 ){ event.preventDefault(); send = 118; } }
if (event.which == 119 || event.keyCode == 119) {
if( gate == 1 ){ event.preventDefault(); send = 119; } }
if (event.which != 19 || event.keyCode != 19) { gate = -1; }
if(send != -1) {
event.stopImmediatePropagation();
set_mark(send); }
} // check_key
} // catch_key
function set_mark(sender) {
if( sender == 112) {
var editor_iframe = document.querySelector('.cke_wysiwyg_frame');
var iframe_doc = editor_iframe.contentWindow.document;
var selection = iframe_doc.getSelection();
var range = selection.getRangeAt(0);
var 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 );
var insert_node_z = iframe_doc.createTextNode("\u200B");
insert_node.parentNode.insertBefore( insert_node_z, insert_node.nextSibling );
range.setEnd( insert_node_z.nextSibling, 0 );
range.collapse(); // フォーカスを失わないでrangeを閉じる
}
if( sender == 113) {
editor_iframe = document.querySelector('.cke_wysiwyg_frame');
iframe_doc = editor_iframe.contentWindow.document;
selection = iframe_doc.getSelection();
range = selection.getRangeAt(0);
insert_node = iframe_doc.createElement("div");
insert_node.setAttribute("style", "background:#fafafa; border:1px solid #aaa;overflow-y:hidden; max-width:660px; padding:0 30px");
insert_node.appendChild( iframe_doc.createElement("pre") );
insert_node.lastChild.setAttribute("style", "white-space:pre");
insert_node.lastChild.appendChild( iframe_doc.createElement("br") );
range.insertNode( insert_node );
range.setEnd( insert_node.lastChild, 0 ); // 生成したpreにrange終点を移動
range.collapse(); // rangeを始点で閉じる
}
if( sender == 114) {
editor_iframe = document.querySelector('.cke_wysiwyg_frame');
iframe_doc = editor_iframe.contentWindow.document;
selection = iframe_doc.getSelection();
range = selection.getRangeAt(0);
insert_node = iframe_doc.createElement("h2");
insert_node.setAttribute("style", "font-size: 1em");
insert_node.appendChild( iframe_doc.createElement("span") );
insert_node.lastChild.setAttribute("style", "background:#b0e0e6;padding: .2em 1em");
insert_node.lastChild.appendChild( iframe_doc.createTextNode("\u200B") );
range.insertNode( insert_node );
range.setEnd( insert_node.lastChild, 0 ); // 生成したspanにrangeを移動
range.collapse(); // rangeを閉じる
}
if( sender == 115) {
editor_iframe = document.querySelector('.cke_wysiwyg_frame');
iframe_doc = editor_iframe.contentWindow.document;
selection = iframe_doc.getSelection();
range = selection.getRangeAt(0);
insert_node = iframe_doc.createElement("h3");
insert_node.setAttribute("style", "font-size: 1em");
insert_node.appendChild( iframe_doc.createElement("span") );
insert_node.lastChild.setAttribute("style", "background:#ddd;padding: .2em 1em");
insert_node.lastChild.appendChild( iframe_doc.createTextNode("\u200B") );
range.insertNode( insert_node );
range.setEnd( insert_node.lastChild, 0 ); // 生成したspanにrangeを移動
range.collapse(); // rangeを閉じる
}
if( sender == 116) {
alert("F5はショートカット無効が推奨です"); }
if( sender == 117) {
editor_iframe = document.querySelector('.cke_wysiwyg_frame');
iframe_doc = editor_iframe.contentWindow.document;
selection = iframe_doc.getSelection();
range = selection.getRangeAt(0);
insert_node = iframe_doc.createElement("div");
insert_node.setAttribute("style", "background: #f2faf8;border:1px solid #aaa;border-radius: 4px;max-width:660px;padding: .62em 2em .5em");
insert_node.appendChild( iframe_doc.createElement("br") );
range.insertNode( insert_node );
range.setEnd( insert_node.lastChild, 0 ); // 生成したpreにrange終点を移動
range.collapse(); // rangeを始点で閉じる
}
if( sender == 118) {
editor_iframe = document.querySelector('.cke_wysiwyg_frame');
iframe_doc = editor_iframe.contentWindow.document;
selection = iframe_doc.getSelection();
range = selection.getRangeAt(0);
insert_node = iframe_doc.createElement("div");
insert_node.setAttribute("style", "background:#fafafa; border:1px solid #aaa;overflow:auto;height:50vh;max-width:660px;padding:0 30px");
insert_node.appendChild( iframe_doc.createElement("pre") );
insert_node.lastChild.setAttribute("style", "white-space:pre");
insert_node.lastChild.appendChild( iframe_doc.createElement("br") );
range.insertNode( insert_node );
range.setEnd( insert_node.lastChild, 0 ); // 生成したpreにrange終点を移動
range.collapse(); // rangeを始点で閉じる
}
if( sender == 119) {
alert("F8はショートカット未設定です"); }
} // set_mark
})
「Elements Palette ⭐」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Elements Palette ⭐」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
