メイリオは優れたフォントだが弱点もある
「メイリオ」は美しく優れたフォントですが、弱点もあります。 漢字という複雑な線の多い文字のフォントに避けられない事かも知れませんが、行間の配置が上寄りになります。 下は、普通にオレンジの文字背景色を指定した場合ですが、文字が背景に対して上寄りなのが判ります。
この問題は検索窓の様な一行入力枠のデザインや、このページの「見出し（h2）」などのデザインでも、常に上下の補正が必要になります。 もっとも、拘る場合はどんなフォントでも補正をしますが。
アンダーライン（下線）が文字に着き過ぎるというのも漢字フォントの宿命で、これはメイリオに限ったことではありません。
アンダーラインは半角英数文字を基準に配置される様で、漢字はアンダーラインに着いてしまいます。
CSSで「text-decoration-color」を指定し下線色を変えると、この問題を幾分抑える事は出来ます。 しかしもっと積極的に、アンダーラインを自前でデザインする方法があります。 以前に詳しく書いているので、興味のある方は以下を参照ください。
配置位置と幅を任意に選べる文字の下線・上線・取り消し線・マーカー
配置位置と幅と間隔を任意に選べる二重取り消し線・三重取り消し線
「linear-gradient」を使った装飾線ツール
装飾線を自在にコントロールできるのが「linear-gradient」を使う方法です。 スキン編集用デザインの場合は、スキンに装飾線の class名を登録して、記事上でこの種の装飾線が使えます。 しかし、その場合は装飾線がスマホには表示されません。
一方、HTML編集でspanタグにインライン指定を書き込めば、PC・スマホで同じ装飾線を表示できます。 しかし、この「linear-gradient」のコードは長くなるので、毎回のHTMLへの書き込みに苦労します。
そこで「Elements Palette」を使います。 これがあれば、好みの下線のインライン指定を簡単に書き込む事が出来ます。「Tampermonkey」が必要ですが、全ての公式スキンで好みの装飾線が使えます。
下は、「linear-gradient」によるカラー下線のサンプルで、今回パレットに登録したものです。 線の太さは1pxで文字から少し離して可読性を優先しています。
「1.22em」▶ フォント上縁から測った装飾線の開始位置を「em値」で指定
「#27d」 ▶ 装飾線の色を指定（マーカー線の場合は透過色を指定）
「1px」 ▶ 装飾線の固定幅を「px値」で指定
◎ calc()のコードは、演算子「+」の両横に半角空白が必要です。
◎「Elements Palette」に登録するコードは上記デザインである必要はなく、上記の3値を変更して好みのデザインの装飾線に出来ます。 下はマーカー線の例です。
◎ アメブロ記事は、記入した文章が「p要素」に保存されます。 この段落が別の場合は、まとめて修飾線付けが出来ません。 1行ずつ分けて修飾線を付けます。
◎ 段落が別れていない一続きの文字列は、複数行まとめて修飾線付けが出来ます。
◎ この修飾線は、「A→Aもどす」の編集アイコンで修飾線を削除できます。
◎ フォント本来の下線・太字・文字色・文字背景色などと同時使用が可能です。
ショートカットキーの整理をしました
この装飾線のショートカットキーを「Pause + F9」に設定したところ、Chromeでは無問題でしたが Firefoxで問題が生じました。
反転した「装飾線」の文字に下線が記入されず、MS-IMEの「英文字再変換」が働いてしまいます。「Elements Palette」のキー判定部で「Pause」が押されたら次のキー入力をシステムに伝えない設定にしています。 Chromeではこれが日本語変換時にも効くのに対して、Firefoxでは抑止出来ない様です。 日本語変換がOFFなら Firefoxでも無問題ですが、下線付けのために日本語変換を切替えるのは不便です。
今回の「装飾線」ツールのショートカットを別のものに設定し、F9には反転選択なしで働くツールを設定すれば、この問題は避けられます。 そこで、これを機に、これまでのショートカットキーの割り当てを整理し変更しました。
「Elements Palette」ver. 1.2
「Elements Palette」をブラウザ拡張機能「Tampermonkey」に登録すれば、アメブロ編集画面に以下の編集ツールを追加できます。 スクリプトは Chrome 及び Firefox の「Tampermonkey」で動作を確認しています。
ツールを起動する「Elements Palette」のショートカットキーの設定は以下の様にしていますが、ユーザーの使用条件に合わせて変更できます。
「Pause」→「F1」: 「Font Awesome」のリンクアイコン自動記入
「Pause」→「F2」: デザインされた「h2タグ」の自動記入
「Pause」→「F3」: デザインされた「h3タグ」の自動記入
「Pause」→「F4」: 装飾線のインライン指定の自動記入
「Pause」→「F5」: （ F5 はショートカット無効が推奨）
「Pause」→「F6」: 「囲み枠」の自動記入
「Pause」→「F7」: コード掲載用「pre」枠の自動記入
「Pause」→「F8」: コード掲載用「pre」枠（縦スクロールタイプ）自動記入
「Pause」→「F9」: 文書末尾に空白行を自動記入
▪「Font Awesome」の表示は、ブログページに「@import」指定が必要です。
▪「Pause + 他のキー」の設定で、ツールのバリエーション等を追加出来ます。
▪ 各ツールのコードの先頭に、それぞれのデザイン要点を纏めています。 その部分を書き換えることで、ツールの配色・サイズ等の内容を変更可能です。
〔 Elements Palette 〕 ver. 1.2
// ==UserScript==
// @name Elements Palette
// @namespace http://tampermonkey.net/
// @version 1.2
// @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==120 || event.keyCode==120){
if(gate==1){ event.preventDefault(); send=120; }}
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){
let editor_iframe;
let iframe_doc;
let selection;
let range;
let insert_node;
let pre_node;
if(sender==112){ // F1 Font Awesomeアイコンの自動記入
let insert_node_z;
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("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("\u200B");
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: .2em 1em"; // h2のデザイン
let font_size="font-size: 1em"; // h2のフォントサイズ
let insert_node_h;
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.createTextNode("◀▶");
range.insertNode(insert_node);
if(insert_node.parentNode.tagName=="P" && insert_node.parentNode.parentNode.tagName=="BODY"){
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("\u200B"));
insert_node.parentNode.parentNode.insertBefore(insert_node_h, insert_node.parentNode.nextSibling);
pre_node=insert_node_h.previousElementSibling;
if(pre_node.lastChild.tagName=="BR"){ pre_node.removeChild(pre_node.lastChild); }
if(pre_node.childNodes.length==1 && pre_node.textContent=="◀▶"){ pre_node.remove(); }
if(insert_node_h.nextElementSibling==null){
insert_node_h.insertAdjacentHTML('afterend', '<p>\u00A0</p><p>\u00A0</p>'); }
range.setEnd(insert_node_h.lastChild, 0); // 生成したspanにrangeを移動
} // h要素生成の条件
insert_node.remove(); // アンカー削除
range.collapse(); // rangeを閉じる
}
if(sender==114){ // F3 h3 見出しの自動記入
let style_text="background:#ddd;padding: .2em 1em"; // h3のデザイン
let font_size="font-size: 1em"; // h3のフォントサイズ
let insert_node_h;
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.createTextNode("◀▶");
range.insertNode(insert_node);
if(insert_node.parentNode.tagName=="P" && insert_node.parentNode.parentNode.tagName=="BODY"){
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("\u200B"));
insert_node.parentNode.parentNode.insertBefore(insert_node_h, insert_node.parentNode.nextSibling);
pre_node=insert_node_h.previousElementSibling;
if(pre_node.lastChild.tagName=="BR"){ pre_node.removeChild(pre_node.lastChild); }
if(pre_node.childNodes.length==1 && pre_node.textContent=="◀▶"){ pre_node.remove(); }
if(insert_node_h.nextElementSibling==null){
insert_node_h.insertAdjacentHTML('afterend', '<p>\u00A0</p><p>\u00A0</p>'); }
range.setEnd(insert_node_h.lastChild, 0); // 生成したspanにrangeを移動
} // h要素生成の条件
insert_node.remove(); // アンカー削除
range.collapse(); // rangeを閉じる
}
if(sender==115){ // F4 修飾線の自動記入
// 文字アンダーライン・マーカー線のデザイン
let style_text="linear-gradient(transparent 1.22em, #27d 0, #27d calc(1.22em + 1px), transparent 0)";
editor_iframe=document.querySelector('.cke_wysiwyg_frame');
iframe_doc=editor_iframe.contentWindow.document;
selection=iframe_doc.getSelection();
range=selection.getRangeAt(0);
insert_node=document.createElement('span');
insert_node.style.background=style_text;
range.surroundContents(insert_node);
}
if(sender==116){ // F5
alert("【 F5 】 はショートカット無効です \n⛔ページリロードに注意してください"); }
if(sender==117){ // F6 囲み枠の自動生成
// 囲み枠のデザイン
let style_text="background: #f2faf8;border:1px solid #aaa;border-radius: 4px;max-width:660px;padding: .62em 2em .5em";
let insert_node_d;
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.createTextNode("◀▶");
range.insertNode(insert_node);
if(insert_node.parentNode.tagName=="P" && insert_node.parentNode.parentNode.tagName=="BODY"){
insert_node_d=iframe_doc.createElement("div");
insert_node_d.setAttribute("style", style_text);
insert_node_d.appendChild(iframe_doc.createElement("br"));
insert_node.parentNode.parentNode.insertBefore(insert_node_d, insert_node.parentNode.nextSibling);
pre_node=insert_node_d.previousElementSibling;
if(pre_node.lastChild.tagName=="BR"){ pre_node.removeChild(pre_node.lastChild); }
if(pre_node.childNodes.length==1 && pre_node.textContent=="◀▶"){ pre_node.remove(); }
if(insert_node_d.nextElementSibling==null){
insert_node_d.insertAdjacentHTML('afterend', '<p>\u00A0</p><p>\u00A0</p>'); }
range.setEnd( insert_node_d, 0 ); // 生成したdivにrange終点を移動
} // div要素生成の条件
insert_node.remove(); // アンカー削除
range.collapse(); // フォーカスを失わないでrangeを閉じる
}
if(sender==118){ // F7 PRE枠の自動生成
// PRE枠のデザイン 縦スクロールしないタイプ
let style_text="background:#fafafa; border:1px solid #aaa;overflow-y:hidden; max-width:660px; padding:0 30px";
let insert_node_d;
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.createTextNode("◀▶");
range.insertNode(insert_node);
if(insert_node.parentNode.tagName=="P" && insert_node.parentNode.parentNode.tagName=="BODY"){
insert_node_d=iframe_doc.createElement("div");
insert_node_d.setAttribute("style", style_text);
insert_node_d.appendChild(iframe_doc.createElement("pre"));
insert_node_d.lastChild.setAttribute("style", "white-space:pre");
insert_node_d.lastChild.appendChild(iframe_doc.createElement("br"));
insert_node.parentNode.parentNode.insertBefore(insert_node_d, insert_node.parentNode.nextSibling);
pre_node=insert_node_d.previousElementSibling;
if(pre_node.lastChild.tagName=="BR"){ pre_node.removeChild(pre_node.lastChild); }
if(pre_node.childNodes.length==1 && pre_node.textContent=="◀▶"){ pre_node.remove(); }
if(insert_node_d.nextElementSibling==null){
insert_node_d.insertAdjacentHTML('afterend', '<p>\u00A0</p><p>\u00A0</p>'); }
range.setEnd(insert_node_d.lastChild, 0); // 生成したpreにrange終点を移動
} // div要素生成の条件
insert_node.remove(); // アンカー削除
range.collapse(); // rangeを始点で閉じる
}
if(sender==119){ // F8 PRE枠の自動生成
// PRE枠のデザイン 縦スクロールするタイプ
let style_text="background:#fafafa; border:1px solid #aaa;overflow:auto;height:50vh;max-width:660px;padding:0 30px";
let insert_node_d;
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.createTextNode("◀▶");
range.insertNode(insert_node);
if(insert_node.parentNode.tagName=="P" && insert_node.parentNode.parentNode.tagName=="BODY"){
insert_node_d=iframe_doc.createElement("div");
insert_node_d.setAttribute("style", style_text);
insert_node_d.appendChild(iframe_doc.createElement("pre"));
insert_node_d.lastChild.setAttribute("style", "white-space:pre");
insert_node_d.lastChild.appendChild(iframe_doc.createElement("br"));
insert_node.parentNode.parentNode.insertBefore(insert_node_d, insert_node.parentNode.nextSibling);
if(insert_node_d.nextElementSibling==null){
insert_node_d.insertAdjacentHTML('afterend', '<p>\u00A0</p><p>\u00A0</p>'); }
pre_node=insert_node_d.previousElementSibling;
if(pre_node.lastChild.tagName=="BR"){ pre_node.removeChild(pre_node.lastChild); }
if(pre_node.childNodes.length==1 && pre_node.textContent=="◀▶"){ pre_node.remove(); }
if(insert_node_d.nextElementSibling==null){
insert_node_d.insertAdjacentHTML('afterend', '<p>\u00A0</p><p>\u00A0</p>'); }
range.setEnd(insert_node_d.lastChild, 0); // 生成したpreにrange終点を移動
} // div要素生成の条件
insert_node.remove(); // アンカー削除
range.collapse(); // rangeを始点で閉じる
}
if(sender==120){ // F9 文書末尾に空白行を追加
let iframe_body;
editor_iframe=document.querySelector('.cke_wysiwyg_frame');
iframe_doc=editor_iframe.contentWindow.document;
iframe_body=iframe_doc.querySelector('body.cke_editable');
selection=iframe_doc.getSelection();
range=selection.getRangeAt(0);
if(iframe_body.lastChild.tagName !="P"){
insert_node=iframe_doc.createElement("p");
insert_node.appendChild(iframe_doc.createTextNode("\u00A0"));
iframe_body.appendChild(insert_node);
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終点を移動
range.collapse(); // rangeを始点で閉じる
}
} // set_mark
})
「Elements Palette ⭐」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Elements Palette ⭐」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
