「セル配色」のコードを修正
セルの配色指定は、おそらくこのツールで一番必要とされる機能でしょう。 任意の配色を指定する機能は、「Blog Table ⭐」でも使用しているコードを流用しています。
ただ、「Blog Table ⭐」とは異なるタイミングで、この部分のコードで設定した配色をセルに適用するので、以前になかった問題が生じていました。 これは、Chromeでは問題にならずに看過していたのですが、Firefoxではブラウザの動作が少し異なり、セルの配色設定を操作すると、セル内部のテキストの背景色が不本意に設定される問題が生じました。
下は、「B1」のセルを選択して赤色の背景色を設定する目的で操作している所ですが、未だ「Alt+左Click」はしていません。
しかし、配色のパレットを表示し赤を選択した段階で、上の様にセル内のテキストに背景色が設定されてしまうのです。 Firefoxの場合は「table要素」の扱いが独特で、セルを「左Click」した段階で「セル内部のテキスト」を含めた「セル全体」が選択されます。 その状態で配色設定操作をすると、ちょうどテキストを選択して背景色を指定するのと同じことになってしまうためです。 Chromeはセルを「左Click」しても、セル内部のテキストは選択されないので、この様な事は生じません。
Firefoxでも、注意してセル内部をもう一度「左Click」すると、この問題は避けられますが、これは想定したインターフェイスではなく、修正する事にしました。
カラー設定の舞台裏
この部分のコードは結構複雑です。 ブラウザのデフォルトの「color設定パレット」を使えば問題は生じ難いのですが、アメーバ編集画面のデフォルトのカラーパレットを使いたいので、敢えて複雑な方法を採用しています。
❶ カラー設定の入力枠を「Ctrl+左Click」すると、カラーパレットを開きます。
❷ 色を選択すると、文字背景色設定のアイコンに選択した色が表示されます。
❸ その色を取得して、カラー設定の入力枠に採り込みます。
この ❶～❸ の過程は、選択した文字列の背景色を指定する操作を利用しています。 ただし、文字の選択が無い状態での操作なので、文字背景色が「見える状態」にはなりません。
この部分が問題で、もし文字が選択された状態だと、文字背景色が設定されてしまいます。 Firefoxは「table要素」の扱いが Chromeと異なり、セルにキャレットを入れた最初は、セル内の文字列が選択状態になり、問題が生じるわけです。
修正
ユーザーがカラー設定の操作に入った段階で、キャレット位置の文字列の選択を、非選択にする様にしました。 これは「編集枠内」の「selection」の操作になります。
「Blog Table ⭐ Cell Design」ver.0.3 258行～
太字のコードは、編集枠内（iframe_doc）の選択をリセットするコードです。 これにより、セル内のテキスト選択は削除されるので、このツールのカラー設定で文字背景色が設定されてしまう問題は改善されました。
なお、セルのテキストを選択して編集アイコンで文字背景色を設定する操作は、上記のコードに影響される事はなく、通常の文字列と同様に背景色を設定できます。
マニュアルを纏めました
「Blog Table ⭐ Cell Design」の操作マニュアルを纏めました。
「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.3
// ==UserScript==
// @name Blog Table ⭐ Cell Design
// @namespace http://tampermonkey.net/
// @version 0.3
// @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){ // 🟡
let editor_iframe=document.querySelector('.cke_wysiwyg_frame');
let iframe_doc=editor_iframe.contentWindow.document;
iframe_doc.getSelection().removeAllRanges();
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.toLowerCase();
sticky_color(color_input);
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 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();
memo_td(td_);
paste_wide_td(td_);
back_to_plain(td_);
table_.parentNode.style.overflowY='hidden'; // 高さ減少時のスクロールバーを抑止
let bg=getComputedStyle(td_).backgroundColor;
color_input.value=rgb_hex(bg);
sticky_color(color_input);
let default_color=color_input.value;
color_input.onclick=function(event){
event.preventDefault();
event.stopImmediatePropagation();
if(event.altKey){
if(color_input.value!=default_color){
td_.style.backgroundColor=color_input.value; }
else{
td_.style.backgroundColor=''; }}}
let pt=getComputedStyle(td_).paddingTop;
pt=pt.replace('px', '');
padd_t.value=Math.round(pt);
let default_pt=padd_t.value;
padd_t.onclick=function(event){
event.preventDefault();
event.stopImmediatePropagation();
if(event.altKey){
if(padd_t.value!=default_pt){
td_.style.paddingTop=padd_t.value +'px'; }
else{
td_.style.paddingTop=''; }}}
let plr=getComputedStyle(td_).paddingLeft;
plr=plr.replace('px', '');
padd_lr.value=Math.round(plr);
let default_plr=padd_lr.value;
padd_lr.onclick=function(event){
event.preventDefault();
event.stopImmediatePropagation();
if(event.altKey){
if(padd_lr.value!=default_plr){
td_.style.paddingLeft=padd_lr.value +'px';
td_.style.paddingRight=padd_lr.value +'px'; }
else{
td_.style.paddingLeft='';
td_.style.paddingRight=''; }}}
let pb=getComputedStyle(td_).paddingBottom;
pb=pb.replace('px', '');
padd_b.value=Math.round(pb);
let default_pb=padd_b.value;
padd_b.onclick=function(event){
event.preventDefault();
event.stopImmediatePropagation();
if(event.altKey){
if(padd_b.value!=default_pb){
td_.style.paddingBottom=padd_b.value +'px'; }
else{
td_.style.paddingBottom=''; }}}
let fz=getComputedStyle(td_).fontSize;
fz=fz.replace('px', '');
cell_fz.value=Math.round(fz);
let default_fz=cell_fz.value;
cell_fz.onclick=function(event){
event.preventDefault();
event.stopImmediatePropagation();
if(event.altKey){
if(cell_fz.value!=default_fz){
td_.style.fontSize=cell_fz.value +'px'; }
else{
td_.style.fontSize=''; }}}
let lh=getComputedStyle(td_).lineHeight;
if(lh=='normal'){
lh=fz*(1.5); }
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=Math.round(lh);
let default_lh=cell_lh.value;
cell_lh.onclick=function(event){
event.preventDefault();
event.stopImmediatePropagation();
if(event.altKey){
if(cell_lh.value!=default_lh){
td_.style.lineHeight=cell_lh.value +'px'; }
else{
td_.style.lineHeight=''; }}}
} // if(task==3)
function memo_td(td_){
copy_memo.onclick=function(){
let yes=window.confirm(
" 🔵 選択したセルの設定をコピーします");
if(yes){
let td_style=td_.getAttribute('style');
sessionStorage.setItem('BTCD_style', td_style);
sessionStorage.setItem('BTCD_bg', color_input.value);
}} // ストレージ 保存
paste_memo.onclick=function(event){
if(!event.shiftKey){ // 変更値のみ適用
td_.setAttribute('style', sessionStorage.getItem('BTCD_style')); }
else{
td_.setAttribute('style', sessionStorage.getItem('BTCD_style'));
color_input.value=sessionStorage.getItem('BTCD_bg');
sticky_color(color_input);
td_.style.background=color_input.value; }} // 背景色の適用を追加
} // memo_td()
function paste_wide_td(td_){
let paste_wide=document.querySelector('#paste_wide'); // 行全体に設定適用
paste_wide.onclick=function(event){
let td_style=td_.getAttribute('style');
let bg=getComputedStyle(td_).backgroundColor;
let td_tr=td_.closest('tr');
let td_all=td_tr.querySelectorAll('td');
if(!event.shiftKey){
for(let k=0; k<td_all.length; k++){
td_all[k].setAttribute('style', td_style); }} // 変更値の適用
else{
for(let k=0; k<td_all.length; k++){
td_all[k].setAttribute('style', td_style); // 変更値の適用
td_all[k].style.background=bg; }} // 背景色の適用を追加
}} // paste_wide_td()
function back_to_plain(td_){
let tcd_plain=document.querySelector('#tcd_plain');
tcd_plain.onclick=function(){
td_.removeAttribute('style'); }}
} // 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-12842271491.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」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
