リブログカードをコンパクトにする自動変換ツール / JavaScript

リブログカードのデザインをコンパクトに

現在のリブログカードは「iframe」を使っているので、CSSアレンジには限界があります。「iframe」は嵌込み合成の様な機能で、呼び出したページからフレームの中を簡単には弄れません。 しかし「iframe」の外側枠はページのスキンでアレンジ可能で、以下のページにその方法を纏めています。

更新された「リブログカード」をアレンジする / iframeに負けるな

上のページは「CSS編集用デザイン」のスキンを前提として書いています。 少々長めのCSSアレンジコードを、リブログカードを「div」要素で囲って適用する方法です。しかし、このカードデザインは、その気になればHTML編集でリブログカードにインライン指定を書き込む事で実現出来ます。

〔 インラインで書き込む方法の利点と欠点 〕

◎「CSS編集用デザイン」でなくても、あらゆる公式スキンでアレンジが可能。

◎ PC用・スマホの両方のリブログカードのデザインをアレンジできる。

◎ 長いコードを毎回HTMLに書くのが大変。

◎ 擬似クラス（:hover等のデザイン）はインラインで指定出来ない。

インラインのスタイル指定は、スマホに効くなどオールマイティで良いですが、やはり毎回指定を書き込む手間がネックになります。 しかし「Elements Palette」ならショットカットキーを1回押すだけで、間違いなくHTMLに書き込めます。

リブログカードのデザイン

今回のリブログカードのデザインは、上記ページのデザインをそのまま利用しますが、インライン指定にする事で幾つかの部分に修正があります。

◎ カードの幅指定を「width:500px」から「max-width:500px」に変更

インライン指定はスマホにも反映するので「width:500px」ではスマホの画面からはみ出してしまいます。「max-width:500px」とする事で、PCでは500px、スマホでは表示幅に合わせた幅になります。

〔追記〕2019.08.19

コード中の設定値を赤文字に修正しまた。

.rlink {
    max-width: 500px;
    height: 140px;
    margin: 0 auto;
    border: 1px solid #009688;
    border-radius: 4px;
    overflow: hidden;
    transition: .5s; }

iframe.reblogCard {
    max-width: unset;
    width: calc(100% + 30px);
    margin: -48px -15px 0;        /* margin: -45px -15px 0; */
    background: #f0f7fb; }

この太字の内容は、以下のスクリプトコードでインラインで書き込まれます。 このスクリプトは「Elements Palette」に登録されたものです。 

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:-48px -15px 0;background:#f0f7fb";
// let style_itext="max-width:unset;width:calc(100% + 30px);margin:-45px -15px 0;background:#f0f7fb";

    editor_iframe=document.querySelector('.cke_wysiwyg_frame');
    iframe_doc=editor_iframe.contentWindow.document;
    let iframe_body= iframe_doc.querySelector('body.cke_editable');
    let rebrog=iframe_doc.querySelector('.reblogCard');
    let 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);
    insert_node_d.setAttribute("style", style_dtext);
    insert_node_d.setAttribute("class", "rlink");
    rebrog.setAttribute("style", style_itext); }
}

◎ リブログカードのデザインは、太字部分を変更する事で好みにアレンジできます。 サイズに関係する部分は制約がありますが、配色などは自由に変更できます。

◎ 擬似クラスのホバースタイルはインラインに書けません。 これはHTMLの仕様で、もしホバースタイルを指定したければ「スキンCSS」に登録するか「フリープラグイン」「フリースぺース」に<style>タグで指定する事が必要です。

ちなみに、当ページのカードのホバーデザインは以下です。 このコードを「フリープラグイン」「フリースペース」のどちらかに登録すれば、同等のホバースタイルが実現できます。（当ページはスキンCSSにホバースタイルを登録しています）

<style>.rlink:hover { transform: translateY(-1px); box-shadow: 10px 15px 40px 0 rgba(0,0,0,0.08); }</style>

◎ リブログカードは記事中に1個しか置けません。 従ってこの変換ツールは、カーソルが「通常表示の編集枠」内のどこにあっても「Pause + F10」を押すだけで自動的にカードに適用される様にしています。

◎ 幅縮小の度合いはスキンによって違いますが、私の620px幅のスキンでは以下の様に縮小されます。 文字サイズは全く変化していません。

◎ アレンジを適用後、更にツールを実行するとデザインが崩れるので、リブログカードが「p要素」内の初期設定かどうかを判定し、重複指定がされない様にしました。

◎ 昔に投稿した記事上のリブログカードも、再編集でこのツールを実行すればデザインを更新する事が出来ます。

「Elements Palette」ver. 1.4

「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」:   文書末尾に空白行を自動記入

　「Pause」→「F10」:   リブログカードを縮小アレンジするツール

▪「Font Awesome」の表示は、ブログページに「@import」指定が必要です。

▪「Pause + 他のキー」の設定で、ツールのバリエーション等を追加出来ます。

▪ 各ツールのコードの先頭に、それぞれのデザイン要点を纏めています。 その部分を書き換えることで、ツールの配色・サイズ等の内容を変更できます。

〔追記〕2019.08.19

コード中のリブログカードの設定値を赤文字に修正しまた。

〔 Elements Palette 〕 ver. 1.4

// ==UserScript==
// @name         Elements Palette
// @namespace    http://tampermonkey.net/
// @version      1.4
// @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==121 || event.keyCode==121){
        if(gate==1){ event.preventDefault(); send=121; }}

    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"){
        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(); }}

    range.setEnd(insert_node.lastChild, 0); // 追加した空白行にrange終点を移動
    range.collapse(); // rangeを始点で閉じる
    iframe_doc.querySelector('html').scrollTop=iframe_doc.querySelector('html').scrollHeight;

    function add_nextline(){
        insert_node=iframe_doc.createElement("p");
        insert_node.appendChild(iframe_doc.createTextNode("\u00A0"));
        iframe_body.appendChild(insert_node); }
}


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:-48px -15px 0;background:#f0f7fb";
// let style_itext="max-width:unset;width:calc(100% + 30px);margin:-45px -15px 0;background:#f0f7fb"; 

    editor_iframe=document.querySelector('.cke_wysiwyg_frame');
    iframe_doc=editor_iframe.contentWindow.document;
    let iframe_body= iframe_doc.querySelector('body.cke_editable');
    let rebrog=iframe_doc.querySelector('.reblogCard');
    let 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);
    insert_node_d.setAttribute("style", style_dtext);
    insert_node_d.setAttribute("class", "rlink");
    rebrog.setAttribute("style", style_itext); }
}


} // set_mark

})

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

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

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

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