Firefox上でのリンクカードアレンジの問題
以下は実物のリンクカードですが、上側は Firefox上で「Elements Palette ⭐」を使ってアレンジしたもので、下側は Chrome上で同様のアレンジをしたものです。
Chromeで参照すると、上側は「記事タイトル」が不本意な2行を超える表示になりますが、Firefoxで参照すると両方とも正常に2行に見えます。
◎ Firefox上でアレンジしたもの
◎ Chrome上でアレンジしたもの
ベンダープレフィックス
ベンダープレフィックスは「-moz-」「-webkit-」などで表記の仕様です。 これは各ブラウザが独自に「将来の標準になる予定のCSSプロパティ」を先行実装する時に、この表記を使うルールになっています。
プレフィックスはブラウザ独自のCSSで、他のブラウザには無視されます。 一般に、そういった「未共通」のプロパティを利用する場合は、プレフィックスの着いたプロパティを連記して、複数のブラウザで同じ修飾結果を得られる様にします。
ここで問題になっているのは、「記事タイトル」に設定された「行数の制限」を指定するプロパティで、Chromeでは「-webkit-line-clamp」という指定です。「行数の制限」を有効にするには、以下の4種の指定の全てが必要です。
一方、Firefoxで同様の「行数の制限」を指定するプロパティは以下になります。
この様に2行目の「-webkit-」「-moz-」が異なりますが、1、3行目は「-webkit-」で同じという妙な混成状態です。
アメブロのカード生成時のデフォルトは、2行目だけに着目すると以下の指定です。 これは Firefox上で生成しても同じです。
このため、Chrome上で「.ogpCard_title」（=記事タイトル）の修飾を JavaScriptで操作するのは何の問題も生じません。 しかし、同じ事を Firefox上で行うと、このプロパティのみが下の様に書換えられます。
良くある事ですが、「.ogpCard_title」で、全く無関係な「font-size」だけを変更しても、必ずこのプロパティの「-webkit-」を「-moz-」に書き換えてしまいます。 これを以下の様にプレフィックス併記にできれば良いのですが、「-webkit-」の方は削除されてしまい、併記は不可能でした。
この書き換えは Firefox上では何の変化もなく気付きません。少し変な事に、Firefoxはこの指定が「-webkit-」「-moz-」のどちらのプレフィックスでも有効です。 このプロパティは元は「-webkit-」に始まったものだからでしょうか。
ところが、Chromeでこの書き換えられた「-moz-box-orient: vertical;」を参照すると、CSSは無効になります。 むしろこちらがルール通りですが。
以上の結果、Firefoxで「Elements Palette ⭐」を使って、リンクカードのアレンジを行うと、Firefoxのユーザーにはタイトルは「2行制限」で表示されますが、Chromeのユーザーには「2行制限」が無効になって表示されます。
この記事の最初に挙げた例は、この結果です。 Firefoxから見ると、どちらも同じに見え、Chromeから見ると Firefoxでアレンジしたものは問題のある表示に見えます。
改善策
実は、この「2行制限」関連の指定が、この様な「未整理」な状態にあるプロパティだという事を無理解でした。 この問題で気付いたのですが、Operaや Safariでは、やはり「2行制限」は無効に見えるかも知れません。
アメブロのデフォルト指定はこの問題に対応していて、「max-height: 48px;」を指定していました。 私のアレンジは「記事タイトル」の「line-height」も変更していたので、「2行制限」が効かない場合に3行目が露出したのです。
「記事タイトル」のアレンジは必須のアレンジなので、Firefoxでのアレンジを考慮すると、「max-height」でカバーするしかありません。 精密に調べると
の指定で、「2行制限」が無効になった場合をカバーできました。 ただし「…」の省略表示は無くなりますが、これは仕方がありません。
この「line-clamp」のプロパティは、早く正式採用されると良いのですが。
カバー画像の配置指定を変更
「カバー画像」の配置指定に関するアレンジは、これまで以下のコードでした。
この「top: 3px」による上下方向の位置指定を、下の様に変更しました。
これは、過去にアレンジしたカードにも互換で、「LinkCard Editor ⭐」と共通の指定としたものです。
「Elements Palette ⭐」について
「Elements Palette ⭐」には、以下のメニューの「F1」～「F4」「F6」～「F12」の11種の機能があります。
Pause + F1
Font Awesome のリンクアイコン「 」を記入します。
詳細は、以下のページを参照ください。
Font Awesome のリンクアイコンを自動記入するツール
Pause + F2
下の「h2見出し」の雛形を生成します。 配色などのデザインはカスタマイズ可です。
h2見出し
詳細は、以下のページを参照ください。
Pause + F3
下の「h3見出し」の雛形を生成します。 配色などのデザインはカスタマイズ可です。
h3見出し
Pause + F4
右の様なカラーアンダーラインを付けます。 アンダーラインの生成
以下のページに、線色、太さ、マーカーへの変更などのカスタマイズについて纏めています。
「カラーのアンダーライン」「マーカー線」を自動記入するツール
Pause + F6
下の様な囲み枠を生成します。 枠の大きさは、「Shift + Enter」で改行して自由に拡張できます。 また、枠線色や背景色等は、スクリプトをカスタマイズできます。
囲み枠内部の改行で、大きさは可変です。
詳細は、以下のページを参照ください。
Pause + F7
コードを表記する「pre枠」を生成します。 この「pre枠」は、コードの行数によって自動的に拡張し、「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.5
このツールは Chrome / 新Edge / Firefox の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。 以下のページに簡単な導入の説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
●「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
●「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
● 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Elements Palette ⭐ 〕 ver. 3.5
// ==UserScript==
// @name Elements Palette ⭐
// @namespace http://tampermonkey.net/
// @version 3.5
// @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.maxHeight='39px';
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.margin='auto 0';
imageW.style.top='';
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 通常表示で選択範囲を登録<br>'+
' ※Chrome/EdgeはHTML登録が可能<br>'+
'Ctrl + F11 通常表示で登録内容をペースト';
if(!document.querySelector('.ep_menu')){
document.querySelector('.l-body').appendChild(menu); }
else{
document.querySelector('.ep_menu').remove(); }
}
} // set_mark
}
「Elements Palette ⭐」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Elements Palette ⭐」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
