「Blog Table ⭐」を補佐するツール
表作成ツールが要求される基本的な部分は、これまでの「Blog Table ⭐」で満たされたと思います。 表の印刷原稿としてなら、偶数行の背景色を変えるといった芸当も必要でしょうが、ブログ上では余り必要性は感じません。
で、後は重箱の隅をつつくような機能を付け足したいと思います。 このページで紹介する「Blog Table ⭐ Cell Design」のコードは「Blog Table ⭐」に併合できない事もありませんが、「Blog Table ⭐」を重たくしたくないので、別ツールにしました。「Blog Table ⭐」で作った表にしか対応しないので、サブツールです。
このツールの機能は、特定のセル、あるいは特定行のセル全部などを、インラインで修飾する事です。「Blog Table ⭐」の「ver.4.0」以降は、個別セルにインラインの修飾(要素ごとにstyle属性でスタイル指定)をせず、table要素添付の「styleタグ」で纏めてスタイルを指定する仕様です。
この構成から、表の特定のセルのスタイルを、インラインで指定して気軽に表内の部分的なデザインを変更できます。 この場合は、指定した「style属性」を削除すれば、簡単に元に戻すこともできます。「DevTools」や「HTML編集」が使えるユーザーには、特定セルのデザイン変更は難しくないのですが、「Blog Table ⭐ Cell Design」それを通常表示で簡単に調節できる様にします。
セルに指定できる内容
文字色やボールド等の文字修飾、左寄せ/センタリング/右寄せなどは、編集アイコンがそのまま使えます。 このツールは、編集アイコンでは設定できないセルデザインをコントロール可能にします。
現在、「Blog Table ⭐ Cell Design」で操作可能なセルデザインは以下です。
指定項目 | style属性で指定するプロパティ | 指定範囲 |
セル背景色 | background-color | |
Padding 上 | padding-top | 0 ~ 40px |
Padding 左右 | padding-left = padding-right | 0 ~ 40px |
adding 下 | padding-bottom | 0 ~ 40px |
文字サイズ | font-size | 6 ~ 32px |
行間隔 | line-height | 10 ~ 40px |
デザイン変更の指定は「Alt+左Click」
「Blog Table ⭐ Cell Design」は「Blog Table ⭐」と似たインターフェイスで、自然に使えます。 異なる点は、入力枠を「Alt+左Click」して設定を適用する点です。 この方法にした事で、セルの変化を見ながらデザインを調節できます。
「Blog Table ⭐ Cell Design」の起動
このツールのショートカットは「Ctrl+F3」です。
●「Ctrl+F3」のショートカットを押すと、操作パネルが開きます。
▪ もう一度「Ctrl+F3」を押すと、いつでもこのツールを停止できます。
デザインを変更するセルの選択
●「Blog Table ⭐」で制作した「表」で、特別にデザインを指定したいセル(1個)を「Ctrl+左Click」で指定します。
▪ 選択したセルに「青のアウトライン」、表の左に「青の縦バー」が表示されます。
▪ 別のセルを「Ctrl+左Click」すると、セルの選択を変更できます。
▪ 結合セルは、1個のセルとして扱えます。
セルを選択すると、「Blog Table ⭐ Cell Design」のコントロールパネルが表示されます。 下は現在のパネルの全体の様子です。
下の赤枠の6種の設定枠があり、セルの選択時はそれぞれの設定値が表示されます。
セル単位でのデザイン変更
「Blog Table ⭐」は各種の設定変更後に「表更新」で適用する必要がありましたが、このツールでは「Alt+」の操作で変更を適用する仕様です。
● 各設定枠で値を変更して「Alt+左Click」すると、セルに変更が適用されます。
「Alt+Shift+左Click」の操作で、少しずつ連続した淡色指定が出来ます。
▪ カラー設定枠の基本色の設定方法は「Blog Table ⭐」と同じです。
スピナーを「Alt+左Click」する事で、設定の変化を連続して確認できます。
セル単位でデザイン指定をした例
「Blog Table ⭐ Cell Design」を使う事で、セル単位でデザインを指定できます。
下の様に、上下にサブヘッダーを設けたデザインが可能になります。
セルデザインの登録と適用
特定のセルに適用した設定をセッションストレージに記録して、他のセルに適用する機能です。
▪ 登録は編集画面を開いている間は保持されますが、閉じると消えます。
▪ 登録されるのは、このツールで変更・指定した値だけです。
●「 」を「左Click」すると、選択しているセルの設定を登録します。
● 他のセルを「Ctrl+左Click」で選択して「 」を「左Click」すると、登録したセルの設定が、新しいセルに適用されます。
行全体に登録した指定を適用する
「◀▶」のボタンを「左Click」すると、登録したセルの設定を、選択しているセルを含む行内の全てのセルに適用します。
〔注〕この機能は、「ver.0.1」では未実装で使えません。
セル単位でのインライン設定を削除
「⬜」のボタンを「左Click」すると、選択しているセルの「style属性」を削除します。 この操作で、このツールによるセルデザインの変更をリセットして、本来の表のデザインに戻します。
〔注〕この機能は、「ver.0.1」では未実装で使えません。
「Blog Table ⭐ Cell Design」を利用するには
このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「+」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Blog Table ⭐ Cell Design 〕 ver. 0.1
// ==UserScript== // @name Blog Table ⭐ Cell Design // @namespace http://tampermonkey.net/ // @version 0.1 // @description 個別のtable-cellのデザインを指定する「Ctrl+F3」 // @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; // Chromeの場合のフラグ let agent=window.navigator.userAgent.toLowerCase(); if(agent.indexOf('firefox') > -1){ ua=1; } // Firefoxの場合のフラグ let task=0; // 起動1・更新3・終了0 let btcd_bg=sessionStorage.getItem('BTCD_bg'); if(!btcd_bg){ btcd_bg='#F4F4F4'; } sessionStorage.setItem('BTCD_bg', '#F4F4F4'); let target=document.getElementById('cke_1_contents'); // 監視 target let monitor=new MutationObserver( catch_key ); monitor.observe(target, {childList: true, attributes: true}); // ショートカット待受け開始 catch_key(); function catch_key(){ if(document.querySelector('.cke_wysiwyg_frame') !=null){ //「通常表示」から実行開始 let editor_iframe=document.querySelector('.cke_wysiwyg_frame'); let iframe_doc=editor_iframe.contentWindow.document; iframe_doc.addEventListener('keydown', check_key); document.addEventListener('keydown', check_key); function check_key(event){ if(event.keyCode==13 && iframe_doc.hasFocus()){ remove_mark(); } // 改行入力が連続マークとなるのを抑止 let gate=-1; if(event.ctrlKey==true){ if(event.keyCode==114){ event.preventDefault(); gate=1; } if(gate==1){ event.stopImmediatePropagation(); do_task(); }}} function do_task(){ if(task==0){ task=1; table_panel(); enhanced(); } else{ task=0; remove_t_panel(); remove_mark_all(); }}} before_end(); } // catch_key() function table_panel(){ let SVG_cm= '<svg class="copy_memo" viewBox="-45 -20 540 540">'+ '<path fill="#fff" d="M416 208H272V64c0-18-14-32-32-32h-32c-18 '+ '0-32 14-32 32v144H32c-18 0-32 14-32 32v32c0 18 14 32 32 32h144v '+ '144c0 18 14 32 32 32h32c18 0 32-14 32-32V304h144c18 0 32-14 '+ '32-32v-32c0-18-14-32-32-32z"></path></svg>'; let SVG_pm= '<svg class="paste_memo" viewBox="0 -10 256 256">'+ '<path style="fill:#fff" d="M102 136L72 136C67 136 61 136 58 141C54 148 '+ '59 153 63 158C72 169 82 180 91 191C100 201 109 212 118 222C122 226 '+ '126 232 132 232C138 232 142 226 146 222C155 211 164 201 173 190C182 '+ '179 192 169 201 158C205 153 210 148 207 142C203 136 198 136 192 '+ '136L162 136C162 108 157 79 145 54C139 43 132 31 121 24C102 13 79 '+ '13 58 17C53 18 39 20 38 27C37 31 49 29 51 29C67 27 85 32 96 45C102 53 '+ '104 63 105 72C108 94 105 114 102 136z"/></svg>'; let panel= '<div id="tcd_panel">'+ '<span class="tcd_label">背景色</span>'+ '<input id="cell_bg" type="text" autocomplete="off">'+ '<span class="tcd_label">Padding 上</span>'+ '<div class="tcd_wpx"><input id="padd_t" type="number" min="0" max="40" value="2"></div>'+ '<span class="tcd_label">左右</span>'+ '<div class="tcd_wpx"><input id="padd_lr" type="number" min="0" max="40" value="6"></div>'+ '<span class="tcd_label">下</span>'+ '<div class="tcd_wpx"><input id="padd_b" type="number" min="0" max="40" value="0"></div>'+ '<span class="tcd_label">文字サイズ</span>'+ '<div class="tcd_wpx"><input id="cell_fz" type="number" min="6" max="32" value="16"></div>'+ '<span class="tcd_label">行間隔</span>'+ '<div class="tcd_wpx"><input id="cell_lh" type="number" min="10" max="40" value="20"></div>'+ '<span class="tcd_label">デザイン登録</span>'+ '<span id="copy_memo">'+ SVG_cm +'</span>'+ '<span id="paste_memo">'+ SVG_pm +'</span>'+ '<span id="paste_wide">◀▶</span>'+ '<span id="tcd_plain">⬜</span>'+ '<span id="tcd_test"></span>'+ '<div id="tcd_first">'+ '<span id="tcd_help">?</span>'+ '<div class="tcd_help1">'+ 'デザインを指定するセルを<b>「Ctrl+左Click」</b>で指定してください</div>'+ '</div>'+ '<style>'+ '#tcd_panel { position: fixed; top: 15px; left: calc(50% - 490px); width: 954px; '+ 'font-size: 14px; padding: 6px 12px; overflow: hidden; '+ 'border: 1px solid #ccc; border-radius: 4px; background: #eff5f6; z-index: 10; }'+ '#tcd_panel * { user-select: none; }'+ '#tcd_panel input { position: relative; margin-right: 10px; padding-top: 2px; '+ 'height: 27px; box-sizing: border-box; border: thin solid #aaa; }'+ '#tcd_panel input[type="number"] { padding-right: 2px; margin-right: 0; }'+ '#tcd_panel input[type="number"]:focus, #tcd_panel input[type="submit"]:focus '+ '{ box-shadow: none; }'+ '.tcd_label { margin: 0 3px 0 0; }'+ '#padd_t, #padd_lr, #padd_b, #cell_fz, #cell_lh { width: 50px; text-align: center; }'+ '.tcd_wpx { position: relative; display: inline-block; }'+ '.tcd_wpx { margin-right: 10px; }'+ '.tcd_wpx::after { content: "px"; }'+ '.tcd_wpx::after { position: absolute; right: 2px; top: 2px; '+ 'padding: 3px 0 0; width: 17px; background: #fff; }'+ '.tcd_wpx:hover::after { content: ""; }'+ '#cell_bg { width: 100px; padding: 2px 0 0 22px; cursor: pointer; }'+ '#cell_bg:focus { cursor: text; }'+ '#copy_memo, #paste_memo { margin: 0 4px; }'+ '#copy_memo:hover, #paste_memo:hover, #tcd_plain:hover { filter: invert(1); }'+ '#tcd_panel svg { width: 22px; height: 22px; padding: 2px; border-radius: 3px; '+ 'background: #000; vertical-align: -8px; cursor: pointer; }'+ '#paste_wide { padding: 4px 2px 1px; margin-left: 20px; border-radius: 3px; '+ 'color: #fff; background: #2196F3; vertical-align: -1px; cursor: pointer; }'+ '#paste_wide:hover { color: #000; background: #fff; }'+ '#tcd_plain { padding: 3px 3px 1px; margin-left: 15px; border: 1px solid #aaa; '+ 'border-radius: 3px; cursor: pointer; }'+ '#tcd_first { position: absolute; top: 0; left: 0; color: #fff; background: #2196f3; '+ 'width: 100%; padding: 10px 0; font-size: 16px; text-align: center; }'+ '#tcd_help { position: absolute; top: 11px; right: 25px; padding: 2px 1px 0; '+ 'line-height: 16px; font-weight: bold; border-radius: 30px; '+ 'color: #2196f3; background: #fff; cursor: pointer; }'+ '.tcd_help1 { text-align: left; margin-left: 60px; }'+ '#tcd_test { display: none; }'+ '#cke_42, #cke_43 { top: 60px !important; left: calc( 50% - 45px) !important; }'; if(ua==1){ panel += '.tcd_wpx::after { padding: 3px 1px 0; }'; } panel += '</style>'+ '</div>'; if(!document.querySelector('#tcd_panel')){ document.body.insertAdjacentHTML('beforeend', panel); } } // table_panel() function enhanced(){ let target_r=document.getElementById('cke_1_contents'); // 監視 target let monitor_r=new MutationObserver(select); monitor_r.observe(target_r, {childList: true}); // ショートカット待受け開始 select(); function select(){ if(document.querySelector('.cke_wysiwyg_frame') !=null){ //「通常表示」から実行開始 remove_mark_all(); // Html編集後のリセット show_first(1); let editor_iframe=document.querySelector('.cke_wysiwyg_frame'); let iframe_doc=editor_iframe.contentWindow.document; if(iframe_doc){ let style_tcd_if= '<style id="style_tcd_if">'+ '.tcd_active { box-shadow: #fff -4px 0px, #2196f3 -8px 0px !important; }'+ '.cell_active { outline: 2px solid #2196f3; outline-offset: 4px; }'+ '</style>'; if(!iframe_doc.head.querySelector('#style_tcd_if')){ iframe_doc.head.insertAdjacentHTML('beforeend', style_tcd_if); } let editor=iframe_doc.querySelector('.cke_editable'); if(editor){ editor.onclick=function(event){ event.stopImmediatePropagation(); if(event.ctrlKey){ remove_mark_all(); if(task==1 || task==3){ let elm=iframe_doc.elementFromPoint(event.clientX, event.clientY); if(elm.closest('table')!=null){ let table_=elm.closest('table'); if(table_.id && table_.id.includes('ambt')){ table_.parentNode.classList.add('tcd_active'); show_first(0); task=3; let td_=elm.closest('td'); td_.classList.add('cell_active'); edit_table(table_, td_); } //「セルをデザイン」 else{ remove_mark(); } //「選択終了」 }}} }}}}} // select() } // enhanced() function pick_color(){ let set_color; let color_label; let icon_button; if(ua==0){ color_label=document.querySelector('#cke_16_label'); icon_button=document.querySelector('#cke_17'); } else if(ua==1){ color_label=document.querySelector('#cke_15_label'); icon_button=document.querySelector('#cke_16'); } let target_p=color_label; // 監視 アイコンのカラーラベル let monitor_p=new MutationObserver(get_copy); let trust_color; let color_input=document.querySelector('#cell_bg'); color_input.onmousedown=function(event){ // 🟡 if(event.ctrlKey==true){ event.preventDefault(); event.stopImmediatePropagation(); // 🟡 icon_button.click(); monitor_p.observe(target_p, {attributes: true}); } else if(event.shiftKey==true){ event.preventDefault(); if(test_colorE(hex_bright(color_input.value))){ color_input.value=hex_bright(color_input.value); // 明度を上げる sticky_color(color_input); }}} color_input.addEventListener('change', function(event){ event.preventDefault(); if(test_colorE(color_input.value)){ color_input.value=hex_8_6(trust_color); sticky_color(color_input); } else{ if(color_input.value==''){ color_input.style.boxShadow='inset 0 0 0 1px black'; } else{ color_input.style.boxShadow='inset 0 0 0 1px black'; // 担保コード color_input.style.boxShadow= 'inset 0 0 0 1px black, inset 17px 0 ' + color_input.value+ ', inset 18px 0 #aaa'; }}}); function test_colorE(color){ let test=document.querySelector('#tcd_test'); test.style.color='#000001'; if(color!=''){ test.style.color=color; } // 入力枠が空の場合はNG判定 let colorR=window.getComputedStyle(test).color; if(colorR){ trust_color=rgb_hex(colorR); // 適正値を6桁16進で返す if(colorR!='rgb(0, 0, 1)'){ return true; } // 正常な色 else{ if(color=='rgb(0, 0, 1)' || color=='#000001' || color=='#000001ff'){ return true; } //「#000001」をテストした場合は 例外処理 else{ return false; }}} else{ return false; }} document.addEventListener('mousedown', function(){ // 🟡 monitor_p.disconnect(); }); // カラー取得終了 if(document.querySelector('.cke_wysiwyg_frame') !=null){ let editor_iframe=document.querySelector('.cke_wysiwyg_frame'); let iframe_doc=editor_iframe.contentWindow.document; iframe_doc.addEventListener('mousedown', function(){ // 🟡 monitor_p.disconnect(); }); } // カラー取得終了 function get_copy(){ set_color=color_label.getAttribute('data-color'); color_input.value='#'+ set_color; sticky_color(color_input); color_input.style.outline='none'; monitor_p.disconnect(); } // カラー取得終了 let target_body=document.querySelector('.l-body'); // 監視 target let monitor_generator=new MutationObserver(stealth); monitor_generator.observe(target_body, {childList: true, subtree: true}); function stealth(){ let color_generator=document.querySelector('.ck-l-colorGenerator'); if(color_generator){ color_generator.addEventListener('mousedown', function(event){ // 🟡 event.stopImmediatePropagation(); }); }} } // pick_color() function show_color(){ let color_input=document.querySelector('#cell_bg'); color_input.value=sessionStorage.getItem('BTCD_bg'); sticky_color(color_input); } function sticky_color(box){ box.style.boxShadow='inset 17px 0 '+ box.value +', inset 18px 0 #aaa'; } function edit_table(table_, td_){ let editor_iframe=document.querySelector('.cke_wysiwyg_frame'); let iframe_doc=editor_iframe.contentWindow.document; let color_input=document.querySelector('#cell_bg'); // 背景色 let padd_t=document.querySelector('#padd_t'); // padding-top let padd_lr=document.querySelector('#padd_lr'); // padding-left/right let padd_b=document.querySelector('#padd_b'); // padding-bottom let cell_fz=document.querySelector('#cell_fz'); // 文字サイズ let cell_lh=document.querySelector('#cell_lh'); // 行間隔 let copy_memo=document.querySelector('#copy_memo'); // コピーボタン let paste_memo=document.querySelector('#paste_memo'); // ペーストボタン if(task==3){ pick_color(); show_color(); memo_td(); table_.parentNode.style.overflowY='hidden'; // 高さ減少時のスクロールバーを抑止 let bg=getComputedStyle(td_).backgroundColor; color_input.value=rgb_hex(bg); sticky_color(color_input); color_input.onclick=function(event){ event.preventDefault(); event.stopImmediatePropagation(); if(event.altKey){ td_.style.backgroundColor=color_input.value; }} let pt=getComputedStyle(td_).paddingTop; pt=pt.replace('px', ''); padd_t.value=pt; padd_t.onclick=function(event){ event.preventDefault(); event.stopImmediatePropagation(); if(event.altKey){ td_.style.paddingTop=padd_t.value +'px'; }} let plr=getComputedStyle(td_).paddingLeft; plr=plr.replace('px', ''); padd_lr.value=plr; padd_lr.onclick=function(event){ event.preventDefault(); event.stopImmediatePropagation(); if(event.altKey){ td_.style.paddingLeft=padd_lr.value +'px'; td_.style.paddingRight=padd_lr.value +'px'; }} let pb=getComputedStyle(td_).paddingBottom; pb=pb.replace('px', ''); padd_b.value=pb; padd_b.onclick=function(event){ event.preventDefault(); event.stopImmediatePropagation(); if(event.altKey){ td_.style.paddingBottom=padd_b.value +'px'; }} let fz=getComputedStyle(td_).fontSize; fz=fz.replace('px', ''); cell_fz.value=fz; cell_fz.onclick=function(event){ event.preventDefault(); event.stopImmediatePropagation(); if(event.altKey){ td_.style.fontSize=cell_fz.value +'px'; }} let lh=getComputedStyle(td_).lineHeight; if(lh=='normal'){ lh=fz*(1.2); } else if(lh.indexOf('em')!=-1){ lh=lh.replace('em', ''); lh=lh*fz; } else if(lh.indexOf('px')!=-1){ lh=lh.replace('px', ''); } cell_lh.value=lh; cell_lh.onclick=function(event){ event.preventDefault(); event.stopImmediatePropagation(); if(event.altKey){ td_.style.lineHeight=cell_lh.value +'px'; }} } // if(task==3) function memo_td(){ copy_memo.onclick=function(){ let yes=window.confirm( " 🔵 選択したセルの設定をコピーします"); if(yes){ sessionStorage.setItem('BTCD_bg', color_input.value); sessionStorage.setItem('BTCD_pt', padd_t.value); sessionStorage.setItem('BTCD_plr', padd_lr.value); sessionStorage.setItem('BTCD_pb', padd_b.value); sessionStorage.setItem('BTCD_fz', cell_fz.value); sessionStorage.setItem('BTCD_lh', cell_lh.value); }} // ストレージ 保存 paste_memo.onclick=function(){ show_color(); td_.style.background=color_input.value; padd_t.value=sessionStorage.getItem('BTCD_pt'); td_.style.paddingTop=padd_t.value +'px'; padd_lr.value=sessionStorage.getItem('BTCD_plr'); td_.style.paddingLeft=padd_lr.value +'px'; td_.style.paddingRight=padd_lr.value +'px'; padd_b.value=sessionStorage.getItem('BTCD_pb'); td_.style.paddingBottom=padd_b.value +'px'; cell_fz.value=sessionStorage.getItem('BTCD_fz'); td_.style.fontSize=cell_fz.value +'px'; cell_lh.value=sessionStorage.getItem('BTCD_lh'); td_.style.lineHeight=cell_lh.value +'px'; } // MEMO値を設定 } // memo_td() } // edit_table() function remove_t_panel(){ document.querySelector('#tcd_panel').remove(); } function remove_mark(){ if(document.querySelector('.cke_wysiwyg_frame') !=null){ //「通常表示」から実行開始 let editor_iframe=document.querySelector('.cke_wysiwyg_frame'); let iframe_doc=editor_iframe.contentWindow.document; let item=iframe_doc.querySelectorAll('.tcd_active'); for(let k=0; k<item.length; k++){ item[k].classList.remove('tcd_active'); }}} function remove_mark_cell(){ if(document.querySelector('.cke_wysiwyg_frame') !=null){ //「通常表示」から実行開始 let editor_iframe=document.querySelector('.cke_wysiwyg_frame'); let iframe_doc=editor_iframe.contentWindow.document; let item=iframe_doc.querySelectorAll('.cell_active'); for(let k=0; k<item.length; k++){ item[k].classList.remove('cell_active'); }}} function remove_mark_all(){ remove_mark(); remove_mark_cell(); } function show_first(n){ let first=document.querySelector('#tcd_first'); let tcd_help1=document.querySelector('.tcd_help1'); if(first){ if(n==0){ first.style.display='none'; } else{ first.style.display='block'; tcd_help1.style.display='block'; }} let tcd_help=document.querySelector('#tcd_help'); if(tcd_help){ tcd_help.onclick=function(){ let url='https://ameblo.jp/personwritep/entry-12841917456.html'; window.open(url, target="_blank"); }}} function equal_color(R, G, B, A){ // RGBは整数 Aは小数が必須 ➔ 等価 6桁hexコードに変換 return '#' + tohex(upColor(R, A)) + tohex(upColor(G, A)) + tohex(upColor(B, A)); function upColor(value, A){ let color_value=value*A + 255*(1 - A); return Math.floor(color_value); } function tohex(value){ return ('0'+ value.toString(16)).slice(-2); }} function hex_bright(hex){ // 明度を段階的に変換 if(hex.slice(0, 1)=='#'){ hex=hex.slice(1); } if(hex.length==3){ hex=hex.slice(0,1) + hex.slice(0,1) + hex.slice(1,2) + hex.slice(1,2) + hex.slice(2,3) + hex.slice(2,3); } // 透過度 0.6 とした色値に変更 let R=parseInt(hex.slice(0, 2), 16); let G=parseInt(hex.slice(2, 4), 16); let B=parseInt(hex.slice(4, 6), 16); return equal_color(R, G, B, 0.6); } // 非透過色値に変更 function hex_8_6(hex){ // 8桁hex値を6桁hexに変換 if(hex.length!=9 || hex.slice(0, 1)!='#'){ return hex; } else{ hex=hex.slice(1); let R=parseInt(hex.slice(0, 2), 16); let G=parseInt(hex.slice(2, 4), 16); let B=parseInt(hex.slice(4, 6), 16); let A=hex.slice(6, 8); // 16進の「A値」を透過度(小数)に変更 let alp=0; for(let i=0; i<2; i++){ alp +=Math.pow(16, -(i + 1))*parseInt(A[i], 16); } return equal_color(R, G, B, alp); }} // 非透過色値に変更 function rgb_hex(color){ // rgb or rgba 表記をhex6桁表記に変換 if(color.includes('#')){ // hex表記の場合 return color; } else{ // rgb表記の場合 color=color.split('(')[1].split(')')[0].replace(/ /g, ''); let rgb_ar=color.split(','); let R=parseInt(rgb_ar[0], 10); let G=parseInt(rgb_ar[1], 10); let B=parseInt(rgb_ar[2], 10); let A; if(rgb_ar.length==3){ A=1; } else if(rgb_ar.length==4){ A=parseFloat(rgb_ar[3]); } return equal_color(R, G, B, A); }} // 非透過色値に変更 function before_end(){ let submitButton=document.querySelectorAll('.js-submitButton'); submitButton[0].addEventListener('mousedown', all_clear, false); submitButton[1].addEventListener('mousedown', all_clear, false); function all_clear(){ let editor_iframe=document.querySelector('.cke_wysiwyg_frame'); if(!editor_iframe){ //「HTML表示」編集画面の場合 alert("⛔ Blog Table が処理を終了していません\n\n"+ " 通常表示画面に戻り 編集を終了してください"); event.stopImmediatePropagation(); event.preventDefault(); } if(editor_iframe){ //「通常表示」編集画面の場合 remove_mark_all(); } // table編集のマークを削除 }} // before_end( } // main()
「Blog Table ⭐ Cell Design」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Blog Table ⭐ Cell Design」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。