「LinkCard Editor ⭐」ver. 3.2 の登録手順
●「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
●「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 前ページのコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
● コード行数が多い場合のペースト操作は、「編集枠」の第1行目に「ゴミ文字」が混入していないかを確認してください。
● 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 LinkCard Editor ⭐ 〕 ver. 3.2
// ==UserScript==
// @name LinkCard Editor ⭐
// @namespace http://tampermonkey.net/
// @version 3.2
// @description 通常表示でリンクカードを編集 「Ctrl+F6」
// @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 mode=0;
let mode_e=0;
let mode_c=0;
let retry=0;
let interval=setInterval(wait_target, 100);
function wait_target(){
retry++;
if(retry>10){
clearInterval(interval); }
let target=document.querySelector('#cke_1_contents');
if(target){
clearInterval(interval);
main(); }}
function main(){
let editor_iframe;
let iframe_doc;
let iframe_body;
let selection;
let range;
let ua=0;
let agent=window.navigator.userAgent.toLowerCase();
if(agent.indexOf('firefox')>-1){ ua=1; }
let read_json=localStorage.getItem('LinkCard Style');
let lcard_set=JSON.parse(read_json);
if(!Array.isArray(lcard_set)){
lcard_set=
[0, 0, "rgb(255, 255, 255)", 1, "rgb(226, 226, 226)", 0, "rgb(51, 51, 51)"]; }
if(lcard_set.length<7){
lcard_set[6]="rgb(51, 51, 51)"; }
let write_json=JSON.stringify(lcard_set);
localStorage.setItem('LinkCard Style', write_json);
let target0=document.querySelector('#cke_1_contents');
let monitor0=new MutationObserver( catch_key );
monitor0.observe(target0, {childList: true});
catch_key();
function catch_key(){
editor_iframe=document.querySelector('.cke_wysiwyg_frame');
if(editor_iframe){
iframe_doc=editor_iframe.contentWindow.document;
if(iframe_doc){
when_back();
iframe_doc.addEventListener('keydown', check_key);
document.addEventListener('keydown', check_key);
function check_key(event){
if(event.ctrlKey && event.keyCode==117){
event.preventDefault();
event.stopImmediatePropagation();
if(mode==0 && editor_iframe){
mode=1;
sign();
card_edit(); }
else if(mode==1 && editor_iframe){
mode=0;
mode_e=0;
mode_c=0;
sign_clear();
card_close();
bg_reset();
tx_reset();
bd_reset(); }}
if(event.keyCode==116){
event.preventDefault();
event.stopImmediatePropagation();
alert(
" ⛔ F5 / Ctrl + F5 / Shift + F5 \n"+
" このショートカットは現在のページを遷移して、編集中の\n"+
" データを損失する可能性があるので、無効にしています。\n"+
" ----- LinkCard Editor -----"); }}}}
before_end();
} // catch_key()
function when_back(){
if(mode==1){
sign();
card_close();
mode_e=0;
mode_c=0;
card_edit(); }}
function card_close(){
iframe_body=iframe_doc.querySelector('body');
if(iframe_body){
selection=iframe_doc.getSelection();
selection.removeAllRanges();
let target_card=iframe_body.querySelectorAll('.ogpCard_root');
for(let k=0; k<target_card.length; k++){
if(target_card[k].classList.contains('edit_card')){
target_card[k].classList.remove('edit_card');
if(target_card[k].classList.contains('edit_card_e')){
target_card[k].classList.remove('edit_card_e');
edit_span_end(target_card[k]); }
let fake_img=target_card[k].querySelector('.fake_img');
if(fake_img){
fake_img.remove(); }}} // 文字列編集モードの空imgを削除
sens_help(0); }}
function card_edit(){
iframe_body=iframe_doc.querySelector('body');
if(iframe_body){
let target_card=iframe_body.querySelectorAll('.ogpCard_root');
for(let k=0; k<target_card.length; k++){
target_card[k].addEventListener('click', function(event){
event.preventDefault();
if(event.ctrlKey || event.shiftKey){
event.stopImmediatePropagation();
set_card(target_card[k], event); }}); } // Card編集開始
function set_card(card, event){
if(mode==1 && card.classList.contains('edit_card')){
if(mode_e==0){
mode_e=1;
sens_help(2);
mode_enhance(card, event); }
else{
mode_e=0;
sens_help(1);
mode_no_enhance(card); }}
if(mode==1 && !card.classList.contains('edit_card') && event.ctrlKey){
mode_e=0;
mode_c=1;
card_close(); // 他のCardを閉じる
card.classList.add('edit_card');
sens_help(1);
url_reset();
edit_in(card); }}
}} // card_edit()
function sens_help(n){
let e_hint=document.querySelector('#disp_le .e_hint');
if(e_hint){
if(n==0){
e_hint.innerHTML=''; }
if(n==1){
e_hint.innerHTML=
' テキスト編集：Ctrl+Click'; }
if(n==2){
e_hint.innerHTML=
' テキスト編集終了：Ctrl+Click テキストを全選択：Shift+Click'+
' '; }}}
function mode_enhance(card, event){ // TEXT編集する
let elem=iframe_doc.elementFromPoint(event.clientX, event.clientY);
let closest_ogp=elem.closest('.ogpCard_root');
if(closest_ogp && closest_ogp.classList.contains('edit_card')){
if(elem.textContent && mode_e==1){
let select_parent;
if(elem.closest('.ogpCard_title')){
select_parent=card.querySelector('.ogpCard_title'); }
if(elem.closest('.ogpCard_description')){
select_parent=card.querySelector('.ogpCard_description'); }
if(elem.closest('.ogpCard_iconWrap')){
select_parent=card.querySelector('.ogpCard_iconWrap'); }
if(elem.closest('.ogpCard_urlText')){
select_parent=card.querySelector('.ogpCard_urlText'); }
if(event.ctrlKey){
edit_span(select_parent, 0); } // 対象SPANを編集 💢
else if(event.shiftKey){
edit_span(select_parent, 1); } // 対象SPANを選択 💢
if(!card.classList.contains('edit_card_e')){
card.classList.add('edit_card_e'); }
let link=card.querySelector('.ogpCard_link');
if(link){
link.setAttribute('draggable', 'false'); } // firefoxで必要
if(link && !link.querySelector('img')){ //画像の無い a要素に出るダイアログ抑止
let fake_img=iframe_doc.createElement('img');
fake_img.setAttribute("class", "fake_img"); // 空のimg要素を追加
fake_img.setAttribute("style", "min-width: 0; min-height: 0;");
link.appendChild(fake_img); }}}}
function mode_no_enhance(card){
if(card.classList.contains('edit_card_e')){
card.classList.remove('edit_card_e'); }
let link=card.querySelector('.ogpCard_link');
if(link.hasAttribute('draggable')){
link.removeAttribute('draggable'); } // firefoxで必要
let title=card.querySelector('.ogpCard_title'); // タイトルの上方ズレ抑止
if(title){
let mH= title.style.maxHeight;
title.style.maxHeight='';
title.style.height='65px';
setTimeout(()=>{
title.style.maxHeight=mH;
title.style.height='';
}, 10); }
let fake_img=card.querySelector('.fake_img');
if(fake_img){
fake_img.remove(); }
edit_span_end(card); // 編集不能に戻す
selection.removeAllRanges(); }
function edit_span(elem, n){
elem.setAttribute('contenteditable', 'true');
elem.style.zIndex='1';
elem.style.outline='#2196f3 auto';
elem.style.outlineOffset='3px';
if(n==1){
selection=iframe_doc.getSelection();
range=iframe_doc.createRange();
range.selectNodeContents(elem);
selection.removeAllRanges();
selection.addRange(range); }}
function edit_span_end(card){
let spans=card.querySelectorAll('span');
for(let k=0; k<spans.length; k++){
if(spans[k].hasAttribute('contenteditable')){
spans[k].removeAttribute('contenteditable');
spans[k].style.zIndex='';
spans[k].style.outline=''; }}}
function edit_in(card){
if(mode==1){
if(!card.style.textAlign){
card.style.textAlign='center'; } // デフォルトで中央配置
let card_link=card.querySelector('.ogpCard_link');
if(!card.querySelector('.ogpCard_imageWrap')){
let imgw=document.createElement('span');
imgw.setAttribute('class', 'ogpCard_imageWrap');
imgw.setAttribute('style', 'position:relative; width:120px; height:120px; '+
'flex-shrink:0; border: 1px solid #eee;');
card_link.appendChild(imgw); } // カバー画像が無い場合に表示エリア確保
slim_title(card);
slim_icon(card);
item_setter(card);
align_in(card);
size_in(card);
bgcolor_set(card);
txcolor_set(card);
set_url(card);
bd_width(card);
bdcolor_set(card);
mem_plus(card);
mem_paste(card);
if(ua==1){
moz(card); }
}} // edit_in()
function slim_title(card){ // 先頭・末尾の『』を削除
if(card.classList.contains('edit_card')){
let link=card.querySelector('.ogpCard_link');
if(link.getAttribute('href').includes('https://ameblo.jp/')){
let title=card.querySelector('.ogpCard_title');
if(title){
let title_str=title.innerHTML;
if(title_str.slice(0, 1)=='『' && title_str.slice(-1)=='』'){
title_str=title_str.slice(1).slice(0, -1); }
title.innerHTML=title_str; }}}}
function slim_icon(card){ // リンクマークをテキスト化
let ogpCard_url=card.querySelector('.ogpCard_url');
if(ogpCard_url){
ogpCard_url.style.margin='auto 0 0 22px'; }
let ogpCard_iconWrap=card.querySelector('.ogpCard_iconWrap');
if(ogpCard_iconWrap){
if(card.querySelector('.ogpCard_icon')){
ogpCard_iconWrap.innerHTML='∽'; }
ogpCard_iconWrap.style.position='';
ogpCard_iconWrap.style.width='0';
ogpCard_iconWrap.style.height='0';
ogpCard_iconWrap.style.flexShrink='';
ogpCard_iconWrap.style.font='bold 14px/17px Meiryo';
ogpCard_iconWrap.style.transform='rotate(135deg)'; }
let ogpCard_urlText=card.querySelector('.ogpCard_urlText');
if(ogpCard_urlText){
ogpCard_urlText.style.fontSize='13px'; }}
function item_setter(card){
let target_i=document.querySelector('#js-photos-imageList');
let monitor_i=new MutationObserver(item_select);
monitor_i.observe(target_i, {childList: true, subtree: true}); // 画像パレット監視
item_select();
function item_select(){
let item=document.querySelectorAll('.p-images-imageList__item');
for(let k=0; k<item.length; k++){
item[k].addEventListener('click', function(event){
set_img(event, item[k]); }); }}
function set_img(e, item){
if(mode==1){
e.stopImmediatePropagation();
let img_src=item.getAttribute('data-image');
let inner=
'<img alt="" class="ogpCard_image" data-ogp-card-image="" '+
'height="120" loading="lazy" data-cke-saved-src="' + img_src +
'" src="' + img_src +
'" style="position:absolute;top:50%;left:50%;object-fit:cover;'+
'min-height:100%;min-width:100%;'+
'transform:translate(-50%,-50%)" width="120">';
editor_iframe=document.querySelector('.cke_wysiwyg_frame');
if(editor_iframe){
let target_card=iframe_body.querySelectorAll('.ogpCard_root');
for(let k=0; k<target_card.length; k++){
if(target_card[k].classList.contains('edit_card')){
range_con(target_card[k]);
let card_imgw=
target_card[k].querySelector('.ogpCard_imageWrap');
if(card_imgw){
card_imgw.innerHTML=inner; }}}
function range_con(card){
if(mode==1){
selection=iframe_doc.getSelection();
range=iframe_doc.createRange();
range.setStart(card, 0);
range.setEnd(card, 0);
selection.removeAllRanges();
selection.addRange(range); }}
}}} // set_img()
item_sign(card);
function item_sign(card){
let photos_w=document.querySelector('#js-photos-wrapper');
photos_w.addEventListener('mouseover', function(){
let card_imgw=card.querySelector('.ogpCard_imageWrap');
if(card_imgw && card.classList.contains('edit_card')){
card_imgw.style.filter='invert(1)';
card_imgw.style.background='#442814'; }});
photos_w.addEventListener('mouseout', function(){
let card_imgw=card.querySelector('.ogpCard_imageWrap');
if(card_imgw && card.classList.contains('edit_card')){
card_imgw.style.filter='';
card_imgw.style.background='';}}); }
} // item_setter()
function align_in(card){
let al=document.querySelector('#disp_le .al');
let ac=document.querySelector('#disp_le .ac');
let ar=document.querySelector('#disp_le .ar');
al.onclick=function(){
if(card.style.textAlign!='left'){
if(card.classList.contains('edit_card')){
card.style.textAlign='left'; }}}
ac.onclick=function(){
if(card.classList.contains('edit_card')){
if(card.style.textAlign!='center'){
card.style.textAlign='center'; }}}
ar.onclick=function(){
if(card.classList.contains('edit_card')){
if(card.style.textAlign!='right'){
card.style.textAlign='right'; }}}
} // arrange_in()
function size_in(card){
let lz=document.querySelector('#disp_le .lz');
lz.onclick=function(event){
let link=card.querySelector('.ogpCard_link');
if(card.classList.contains('edit_card')){
if(event.ctrlKey){
ex_compact(card); }
else{
if(mode_e==1){
mode_e=0;
mode_no_enhance(card); }
else{
if(link){
if(link.style.height=='108px'){
arrange_min1(card); }
else if(link.style.height=='54px'){
arrange_min2(card); }
else if(link.style.height=='auto'){
arrange_default(card); }
else{ // 未アレンジは compactに変更
arrange_compact(card); }}}}}}
} // size_in()
function ex_compact(card){
let ok=confirm(
" 💢 リンクカードの小型最軽量化オプション\n\n"+
" 「OK」 を押すと カバー画像・記事本文を削除し軽量化をします。\n"+
" 軽量化を元に戻すには、直後に編集アイコンのアンドゥを押すか、\n"+
" カードを最初から作り直す必要があります。\n"+
" アンドゥ操作は多くの場合スクリプトが停止します。 その場合は\n"+
" 「Ctrl + F6」 で OFF/ON をして ツールを再起動してください。");
if(ok){
if(card.classList.contains('edit_card')){
arrange_ex_compact(card); }
mode_e=0; // テキスト編集モードの場合はリセット
mode_no_enhance(card); }
else{ ; }} // ex_compact()
function arrange_ex_compact(card){
let link=card.querySelector('.ogpCard_link');
if(link){
link.style.width='500px';
link.style.height='auto';
link.style.margin='';
link.style.boxSizing=''; }
let content=card.querySelector('.ogpCard_content');
if(content){
content.style.padding='7px 15px 4px 15px';
content.style.flexDirection='';
content.style.overflow='';
content.style.justifyContent='inherit'; }
let title=card.querySelector('.ogpCard_title');
if(title){
title.style.maxHeight='19px';
title.style.flexShrink='';
title.style.font='bold 16px/1.25 Meiryo';
title.style.WebkitLineClamp='1'; }
let description=card.querySelector('.ogpCard_description');
if(description){
description.remove(); }
let ogpCard_urlText=card.querySelector('.ogpCard_urlText');
if(ogpCard_urlText){
ogpCard_urlText.style.overflow='';
ogpCard_urlText.style.textOverflow='';
ogpCard_urlText.style.textAlign=''; }
let imageW=card.querySelector('.ogpCard_imageWrap');
if(imageW){
imageW.remove(); }}
function arrange_compact(card){
if(card.classList.contains('edit_card')){
let link=card.querySelector('.ogpCard_link');
if(link){
link.style.width='500px';
link.style.height='108px';
link.style.margin='0 auto';
link.style.boxSizing=''; }
let content=card.querySelector('.ogpCard_content');
if(content){
content.style.padding='8px 25px 4px 15px';
content.style.flexDirection='column';
content.style.justifyContent='inherit'; }
let title=card.querySelector('.ogpCard_title');
if(title){
title.style.maxHeight='39px';
title.style.flexShrink='0';
title.style.font='bold 16px/1.25 Meiryo';
title.style.WebkitLineClamp='2'; }
let description=card.querySelector('.ogpCard_description');
if(description){
description.style.whiteSpace='';
description.style.margin='0';
description.style.font='13px/1.4 Meiryo';
description.style.display=''; }
let imageW=card.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';
imageW.style.display=''; }}}
function arrange_min1(card){
if(card.classList.contains('edit_card')){
let link=card.querySelector('.ogpCard_link');
if(link){
link.style.width='500px';
link.style.height='54px';
link.style.margin='0 auto';
link.style.boxSizing=''; }
let content=card.querySelector('.ogpCard_content');
if(content){
content.style.padding='8px 15px 4px 15px';
content.style.flexDirection='column';
content.style.justifyContent='inherit'; }
let title=card.querySelector('.ogpCard_title');
if(title){
title.style.maxHeight='19px';
title.style.flexShrink='0';
title.style.font='bold 16px/1.25 Meiryo';
title.style.WebkitLineClamp='1'; }
let description=card.querySelector('.ogpCard_description');
if(description){
description.style.whiteSpace='';
description.style.margin='0';
description.style.font='13px/1.4 Meiryo';
description.style.display='none'; }
let imageW=card.querySelector('.ogpCard_imageWrap');
if(imageW){
imageW.style.width='';
imageW.style.height='';
imageW.style.margin='';
imageW.style.top='';
imageW.style.right='';
imageW.style.border='';
imageW.style.display='none'; }}}
function arrange_min2(card){
if(card.classList.contains('edit_card')){
let link=card.querySelector('.ogpCard_link');
if(link){
link.style.width='500px';
link.style.height='auto';
link.style.margin='0 auto';
link.style.boxSizing=''; }
let content=card.querySelector('.ogpCard_content');
if(content){
content.style.padding='7px 15px 4px 15px';
content.style.flexDirection='row';
content.style.justifyContent='inherit'; }
let title=card.querySelector('.ogpCard_title');
if(title){
title.style.maxHeight='19px';
title.style.flexShrink='1';
title.style.font='bold 16px/1.25 Meiryo';
title.style.WebkitLineClamp='1'; }
let description=card.querySelector('.ogpCard_description');
if(description){
description.style.whiteSpace='';
description.style.margin='0';
description.style.font='13px/1.4 Meiryo';
description.style.display='none'; }
let imageW=card.querySelector('.ogpCard_imageWrap');
if(imageW){
imageW.style.width='';
imageW.style.height='';
imageW.style.margin='';
imageW.style.top='';
imageW.style.right='';
imageW.style.border='';
imageW.style.display='none'; }}}
function arrange_default(card){
if(card.classList.contains('edit_card')){
let link=card.querySelector('.ogpCard_link');
if(link){
link.style.width='620px';
link.style.height='120px';
link.style.margin='';
link.style.boxSizing='border-box'; }
let content=card.querySelector('.ogpCard_content');
if(content){
content.style.padding='16px 16px 12px';
content.style.flexDirection='column';
content.style.justifyContent='inherit';
content.style.backgroundColor=''; }
let title=card.querySelector('.ogpCard_title');
if(title){
title.style.maxHeight='44px';
title.style.flexShrink='0';
title.style.font='bold 16px/1.4 Meiryo';
title.style.WebkitLineClamp='2'; }
let description=card.querySelector('.ogpCard_description');
if(description){
description.style.whiteSpace='nowrap';
description.style.marginTop='4px';
description.style.font='12px/1.6 Meiryo';
description.style.display=''; }
let imageW=card.querySelector('.ogpCard_imageWrap');
if(imageW){
imageW.style.width='120px';
imageW.style.height='120px';
imageW.style.margin='';
imageW.style.top='';
imageW.style.right='';
imageW.style.border='1px solid #e2e2e2';
imageW.style.display=''; }}}
function bgcolor_set(card){
let set_color;
let lc_color=document.querySelector('#lc_color');
let lc_trance=document.querySelector('#lc_trance');
let link=card.querySelector('.ogpCard_link');
if(link){
let link_bgc=link.style.backgroundColor;
if(link_bgc){
lc_color.style.backgroundColor=link_bgc;
lc_trance.value=rgba_trance(link_bgc);
set_color=link_bgc; }}
import_color(card, lc_color);
let target_elem=lc_color;
let monitor_elem=new MutationObserver(import_c);
monitor_elem.observe(target_elem, {attributes: true});
function import_c(){
if(target_elem.style.opacity==2){
monitor_elem.disconnect();
setTimeout(()=>{
lc_trance.value=1;
set_color=lc_color.style.backgroundColor;
target_elem.style.opacity=1;
if(card.classList.contains('edit_card')){
link.style.backgroundColor=set_color; }
}, 40);
monitor_elem.observe(target_elem, {attributes: true}); }}
lc_trance.addEventListener('input', function(event){
event.preventDefault();
if(mode_c==1){
let set_color_tmp=rgba(set_color, lc_trance.value);
let lc_color=document.querySelector('#lc_color');
lc_color.style.backgroundColor=set_color_tmp;
let link=card.querySelector('.ogpCard_link');
if(card.classList.contains('edit_card')){
link.style.backgroundColor=set_color_tmp; }}});
function rgba(c_val, alpha){ // 透過色の白背景時の非透過色に変換
let R, G, B;
let c_val_arr=c_val.split(',');
R=c_val_arr[0].replace(/[^0-9]/g, '');
G=c_val_arr[1].replace(/[^0-9]/g, '');
B=c_val_arr[2].replace(/[^0-9]/g, '');
return 'rgb('+cpColor(R, alpha)+', '+cpColor(G, alpha)+', '+cpColor(B, alpha)+')'
function cpColor(deci_code, alp){
const colorCode=deci_code*alp + 255*(1 - alp);
return Math.floor(colorCode).toString(10); }}
} // bgcolor_set()
function import_color(card, elem){
let color_label;
let icon_button;
editor_iframe=document.querySelector('.cke_wysiwyg_frame');
iframe_doc=editor_iframe.contentWindow.document;
selection=iframe_doc.getSelection();
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);
elem.onclick=function(event){
if(card.classList.contains('edit_card')){
selection.removeAllRanges(); // 記事中の選択に誤指定を防止
icon_button.click();
monitor_p.observe(target_p, {attributes: true}); }}
function get_copy(){
if(card.classList.contains('edit_card')){
elem.style.backgroundColor=color_label.style.backgroundColor;
elem.style.opacity=2; }
monitor_p.disconnect(); }
document.addEventListener('mousedown', function(){
monitor_p.disconnect(); });
if(document.querySelector('.cke_wysiwyg_frame')!=null){
editor_iframe=document.querySelector('.cke_wysiwyg_frame');
if(editor_iframe){
iframe_doc=editor_iframe.contentWindow.document;
if(iframe_doc){
iframe_doc.addEventListener('mousedown', function(){
monitor_p.disconnect(); }); }}}
let target_body=document.querySelector('.l-body');
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(); }); }}
} // import_color()
function rgba_trance(color_val){
let trance_val;
let c_val_arr=color_val.split(',');
if(c_val_arr.length==3){
trance_val=1; }
else{
trance_val=c_val_arr[3].replace(/[^0-9]/g, '')/10; }
return trance_val; }
function bg_reset(){
let lc_color=document.querySelector('#lc_color');
let lc_trance=document.querySelector('#lc_trance');
lc_color.style.background='#fff';
lc_trance.value=1; }
function txcolor_set(card){ // Cardの基本文字色指定
let link=card.querySelector('.ogpCard_link');
if(link){
if(link.style.color==''){ //「Alt+Click」で指定した配色は訂正しない
link.style.color='rgb(51, 51, 51)'; }} // Cardの基本文字色を指定
let title=card.querySelector('.ogpCard_title');
if(title){
title.style.color=''; }
let description=card.querySelector('.ogpCard_description');
if(description){
description.style.color=''; }
let ogpCard_urlText=card.querySelector('.ogpCard_urlText');
if(ogpCard_urlText){
ogpCard_urlText.style.color=''; }
let tc_color=document.querySelector('#tc_color');
tc_color.style.background=link.style.color;
import_color(card, tc_color);
let target_elem=tc_color;
let monitor_elem=new MutationObserver(import_c);
monitor_elem.observe(target_elem, {attributes: true});
function import_c(){
if(target_elem.style.opacity==2){
monitor_elem.disconnect();
setTimeout(()=>{
target_elem.style.opacity=1;
if(card.classList.contains('edit_card')){
link.style.color=tc_color.style.backgroundColor; }
}, 40);
monitor_elem.observe(target_elem, {attributes: true}); }}
} // txcolor_set()
function tx_reset(){
let tc_color=document.querySelector('#tc_color');
tc_color.style.background='#fff'; }
function set_url(card){
let url_wide=document.querySelector('#url_wide');
let url_input=document.querySelector('#url_input');
let url_clear=document.querySelector('#ex_disp .url_clear');
let lw_h=document.querySelector('#lw_h');
let write_url=document.querySelector('#write_url');
url_input.onclick=function(){
if(mode_c==1){
if(!url_input.classList.contains('url_input_w')){
url_input.classList.add('url_input_w');
lw_h.classList.remove('lw_hint');
lw_h.classList.add('lw_hint_w');
url_wide.style.display='block'; }}}
url_wide.onclick=function(event){
event.stopImmediatePropagation();
if(mode_c==1){
if(url_input.classList.contains('url_input_w')){
url_input.classList.remove('url_input_w');
lw_h.classList.remove('lw_hint_w');
lw_h.classList.add('lw_hint');
url_wide.style.display='none'; }}}
let ogpCard_link=card.querySelector('.ogpCard_link');
let def_url=ogpCard_link.getAttribute('href');
url_input.value=def_url;
url_clear.onclick=function(event){
event.stopImmediatePropagation();
url_input.value=''; }
write_url.onclick=function(event){
let ogpCard_urlText=card.querySelector('.ogpCard_urlText');
if(event.shiftKey){
if(card.classList.contains('edit_card')){
if(ogpCard_urlText){
if(ogpCard_urlText.textContent==get_domain(card)){
ogpCard_urlText.textContent=url_input.value; // URL入力枠内容を記入
ogpCard_urlText.style.height='19px'; }
else{
ogpCard_urlText.textContent=get_domain(card); }}}} // ドメイン表示
else{
rewrite(); }}
url_input.addEventListener('keydown', function(event){
if(event.keyCode==13){
rewrite(); }});
function rewrite(){
def_url=ogpCard_link.getAttribute('href');
if(url_input.value!='' && url_input.value!=def_url){ // 変更ある場合のみ実行
let ok=confirm(
" 💢 リンクカードのURL書換えオプション\n\n"+
" 現在の「URL入力枠」の内容をリンクURLに設定します。\n"+
" 書換え後、カードを右クリックして別ウインドウにリンク先\n"+
" を開き、正しく設定されたかを確認してください。");
if(ok){
if(card.classList.contains('edit_card')){
ogpCard_link.setAttribute('href', url_input.value);
let data_cke_saved_href=
ogpCard_link.getAttribute('data-cke-saved-href');
if(data_cke_saved_href){
ogpCard_link.setAttribute('data-cke-saved-href', url_input.value); }
url_input.style.background='#80deea';
setTimeout(()=>{
url_input.style.background='';
}, 1500); }}
else{
url_input.style.background='#80deea';
url_input.value='現在のリンクURLに戻します';
setTimeout(()=>{
url_input.style.background='';
url_input.value=def_url; // URL入力枠内容を元に戻す
}, 3000); }}
else{
url_input.value=def_url;
if(url_input.classList.contains('url_input_w')){
url_input.classList.remove('url_input_w');
lw_h.classList.remove('lw_hint_w');
lw_h.classList.add('lw_hint');
url_wide.style.display='none'; }}}
function get_domain(card){
let domein=def_url.match(/^https?:\/{2,}(.*?)(?:\/|\?|#|$)/)[1];
return domein; }
} // set_url()
function bd_width(card){
let link=card.querySelector('.ogpCard_link');
let lborder=document.querySelector('#lborder');
let link_bw=parseInt(link.style.borderWidth);
if(link_bw || link_bw==0){
lborder.value=link_bw; }
if(mode_c==1){
lborder.disabled=false; }
lborder.onchange=function(){
if(card.classList.contains('edit_card')){
lborder.blur();
link.style.borderWidth=lborder.value+'px'; }}}
function bd_blind(){ // Card選択まで 枠線幅を非表示
let lborder=document.querySelector('#lborder');
if(lborder){
if(mode_c==0){
lborder.disabled=true; }}}
function bd_reset(){
let lborder=document.querySelector('#lborder');
lborder.value='';
let lb_color=document.querySelector('#lb_color');
lb_color.style.background='#fff'; }
function bdcolor_set(card){
let lb_color=document.querySelector('#lb_color');
let link=card.querySelector('.ogpCard_link');
let link_bc=link.style.borderColor;
if(link_bc){
lb_color.style.background=link_bc; }
import_color(card, lb_color);
let target_elem=lb_color;
let monitor_elem=new MutationObserver(import_c);
monitor_elem.observe(target_elem, {attributes: true});
function import_c(){
if(target_elem.style.opacity==2){
monitor_elem.disconnect();
setTimeout(()=>{
target_elem.style.opacity=1;
if(card.classList.contains('edit_card')){
link.style.borderColor=lb_color.style.backgroundColor; }
}, 40);
monitor_elem.observe(target_elem, {attributes: true}); }}
} // bdcolor_set()
function mem_plus(card){
let memo_plus=document.querySelector('#memo_plus');
if(memo_plus){
memo_plus.onclick=function(){
if(card.classList.contains('edit_card')){
let link=card.querySelector('.ogpCard_link');
if(link){
if(link.style.height=='108px'){
lcard_set[0]=1; } // compact
else if(link.style.height=='54px'){
lcard_set[0]=2; } // min1
else if(link.style.height=='auto'){
lcard_set[0]=3; } // min2
else{
lcard_set[0]=0; } // 未アレンジ
if(card.style.textAlign=='left'){
lcard_set[1]=1; }
else if(card.style.textAlign=='center'){
lcard_set[1]=2; }
else if(card.style.textAlign=='right'){
lcard_set[1]=3; }
else{
lcard_set[1]=0; }
let link_bgc=link.style.backgroundColor;
if(link_bgc){
lcard_set[2]=link_bgc; }
let link_bw=parseInt(link.style.borderWidth);
if(link_bw || link_bw==0){
lcard_set[3]=link_bw; }
let link_bc=link.style.borderColor;
if(link_bc){
lcard_set[4]=link_bc; }
let imageW=card.querySelector('.ogpCard_imageWrap');
if(!imageW){
lcard_set[5]=1; }
else{
lcard_set[5]=0; }
let link_tc=link.style.color;
if(link_tc){
lcard_set[6]=link_tc; }
let write_json=JSON.stringify(lcard_set);
localStorage.setItem('LinkCard Style', write_json); // ストレージ保存
}}}}} // mem_plus()
function mem_paste(card){
let memo_paste=document.querySelector('#memo_paste');
if(memo_paste){
memo_paste.onclick=function(event){
if(event.shiftKey){ //「ドメイン表示部」に「強調デザイン」適用
if(card.classList.contains('edit_card')){
let ogpCard_iconWrap=card.querySelector('.ogpCard_iconWrap');
if(ogpCard_iconWrap){
if(ogpCard_iconWrap.style.color!='red'){
ogpCard_iconWrap.style.color='red';
let ogpCard_urlText=card.querySelector('.ogpCard_urlText');
if(ogpCard_urlText){
ogpCard_urlText.style.color='#222';
ogpCard_urlText.style.fontWeight='bold'; }}
else{
ogpCard_iconWrap.style.color='';
let ogpCard_urlText=card.querySelector('.ogpCard_urlText');
if(ogpCard_urlText){
ogpCard_urlText.style.color='';
ogpCard_urlText.style.fontWeight=''; }}}}}
else{ // カード全体に「登録デザイン」適用
if(card.classList.contains('edit_card')){
if(lcard_set[0]==1){
arrange_compact(card); }
else if(lcard_set[0]==2){
arrange_min1(card); }
else if(lcard_set[0]==3){
arrange_min2(card); }
else{
arrange_default(card); }
let al=document.querySelector('#disp_le .al');
let ac=document.querySelector('#disp_le .ac');
let ar=document.querySelector('#disp_le .ar');
if(lcard_set[1]==1){
al.click(); }
else if(lcard_set[1]==2){
ac.click(); }
else if(lcard_set[1]==3){
ar.click(); }
else{
al.click(); }
let link=card.querySelector('.ogpCard_link');
if(link){
link.style.backgroundColor=lcard_set[2];
let lc_color=document.querySelector('#lc_color');
lc_color.style.background=lcard_set[2];
let lc_trance=document.querySelector('#lc_trance');
lc_trance.value=rgba_trance(lcard_set[2]);
link.style.borderWidth=lcard_set[3]+'px';
let lborder=document.querySelector('#lborder');
lborder.value=lcard_set[3];
link.style.borderColor=lcard_set[4];
let lb_color=document.querySelector('#lb_color');
lb_color.style.background=lcard_set[4];
link.style.color=lcard_set[6];
let tc_color=document.querySelector('#tc_color');
tc_color.style.background=lcard_set[6]; }
if(lcard_set[5]==1){
arrange_ex_compact(card); }
mode_e=0; // テキスト編集モードの場合はリセット
sens_help(1);
mode_no_enhance(card);
bgcolor_set(card); }}
}}} // mem_paste()
function moz(card){
let ogpCard_wrap=card.querySelector('.ogpCard_wrap');
let monitor_br=new MutationObserver(no_br);
monitor_br.observe(ogpCard_wrap, {childList: true, subtree: true});
no_br();
function no_br(){
let br_moz=ogpCard_wrap.querySelector('br[type="_moz"]');
if(br_moz){
br_moz.remove(); }}}
function sign(){
monitor0.disconnect();
let disp=document.createElement("div");
disp.setAttribute("id", "disp_le");
disp.innerHTML=
'<span class="e_hint"></span>'+
'<span class="ls_hint hint"><b>▼</b> Card指定：Ctrl+Click</span>'+
'<span class="lz_hint hint">型変換：'+
'<i class="lz lc_enter fas fa-retweet"></i></span> 配置：'+
'<i class="al fas fa-caret-square-left"></i>'+
'<i class="ac fas fa-square"></i>'+
'<i class="ar fas fa-caret-square-right"></i></span> '+
'<span class="lc_hint hint">背景色：'+
'<span id="lc_w"><span id="lc_color"> </span></span></span> '+
'<input id="lc_trance" type="number" max="10" min="0.1" step="0.1">'+
'：濃度 '+
'<span class="tc_hint hint">文字色：'+
'<span id="tc_w"><span id="tc_color"> </span></span></span> '+
'<div id="ex_disp"> '+
'<i id="url_wide" class="lc_enter fas fa-sign-in-alt fa-rotate-180"></i> '+
'<input id="url_input" type="url" placeholder="変更するURLを入力" '+
'autocomplete="off">'+
'<span class="url_clear"><i class="fas fa-times"></i></span>'+
'<span id="lw_h" class="lw_hint hint">'+
'<i id="write_url" class="lc_enter fas fa-share fa-rotate-90"></i></span>'+
' 枠線幅：<input id="lborder" type="number" max="5" min="0"> '+
'<span class="lb_hint hint">線色：'+
'<span id="lb_w"><span id="lb_color"> </span></span></span> M：'+
'<i id="memo_plus" class="lc_enter hint fas fa-plus"></i> '+
'<span class="mp_hint hint">'+
'<i id="memo_paste" class="lc_enter fas fa-share fa-rotate-90"></i>'+
'</span></div>';
let css=
'@import url("https://use.fontawesome.com/releases/v5.6.0/css/all.css"); '+
'#cke_1_contents { display: flex; flex-direction: column; } '+
'#disp_le { margin: 0 0 5px; padding: 4px 0 1px; white-space: nowrap; '+
'font: normal 16px/24px Meiryo; color: #fff; background: #607d8b; '+
'user-select: none; } '+
'#disp_le .e_hint { position: absolute; background: #607d8b; z-index: 1; } '+
'#disp_le .hint { position: relative; } '+
'#disp_le .hint:hover::after { position: absolute; z-index: 1; height: 23px; '+
'padding: 1px 9px 0; font: 16px Meiryo; color: #fff; background: #000; } '+
'#disp_le .ls_hint { margin: 0 45px 0 15px; } '+
'#disp_le .ls_hint b { color: #a4fff7; } '+
'#disp_le .lz_hint:hover::after { top: 27px; left: -220px; '+
'content: " 標準▸中型▸小型1▸小型2：Click ▲ '+
'軽量化Cardに変更：Ctrl+Click "; } '+
'#disp_le .lc_hint:hover::after { top: 27px; left: -161px; '+
'content: " カラーパレット表示：Click ▲ "; } '+
'#disp_le .tc_hint:hover::after { top: 27px; left: -161px; '+
'content: " カラーパレット表示：Click ▲ "; } '+
'#disp_le .lw_hint:hover::after { top: -29px; left: -195px; '+
'content: "リンクURLの書換：Click ▼ ドメイン表示部に記入：Shift+Click"; } '+
'#disp_le .lw_hint_w:hover::after { top: -29px; left: -503px; '+
'content: " ドメイン表示部に記入：Shift+Click '+
'リンクURLの書換：Click ▼ "; } '+
'#disp_le .lb_hint:hover::after { top: -29px; left: -163px; '+
'content: "カラーパレット表示：Click ▼ "; } '+
'#memo_plus:hover::after { top: -31px; left: -161px; '+
'content: "デザイン登録：Click ▼ "; } '+
'#disp_le .mp_hint:hover::after { top: -29px; left: -472px; '+
'content: "ドメイン表示強調：Shift+Click 登録デザインを適用：Click ▼"; } '+
'#disp_le .al, #disp_le .ac, #disp_le .ar { cursor: pointer; font-size: 20px; '+
'margin-right: 4px; vertical-align: -1px; } '+
'#disp_le .al, #disp_le .ac { margin-right: 4px; } '+
'#lc_w, #tc_w { display: inline-block; overflow: hidden; width: 16px; '+
'height: 16px; border: 1px solid #fff; background: #fff; vertical-align: -3px; } '+
'#lc_color, #tc_color { cursor: pointer; background: #fff; } '+
'#lc_trance { height: 22px; width: 15px; border: none; vertical-align: 1px; '+
'background: transparent; } '+
'#lc_trance::-webkit-inner-spin-button { opacity: 1; } '+
'#url_wide { position: absolute; top: 36px; left: 37px; display: none;'+
'padding: 3px 4px 4px; border-radius: 0; color: #000; background: #eceff1; } '+
'.lw_hint_w { margin-right: 400px; } '+
'#url_input { height: 18px; width: 334px; padding: 3px 22px 0 12px; '+
'margin: 2px 10px 2px -2px; color: #000; } '+
'#url_input.url_input_w { width: 580px; padding: 3px 22px 0 32px; } '+
'#disp_le .url_clear { margin: 0 15px 0 -28px; color: #444; cursor: pointer; } '+
'#disp_le .url_clear:hover { color: red; } '+
'.lc_enter { position: relative; cursor: pointer; font-size: 14px; padding: 2px; '+
'color: #607d8b; background: #fff; border-radius: 2px; vertical-align: 1px; } '+
'#lborder { height: 22px; width: 32px; border: none; color: #fff; '+
'font-weight: bold; background: transparent; } '+
'#lborder::-webkit-inner-spin-button { opacity: 1; } '+
'#lb_w { display: inline-block; width: 16px; height: 16px; overflow: hidden; '+
'border: 1px solid #fff; background: #fff; vertical-align: -3px; } '+
'#lb_color { cursor: pointer; background: #fff; } '+
'#memo_plus { padding: 2px 3px; }';
let style=document.createElement('style');
style.setAttribute("id", "le_style");
style.innerHTML=css;
disp.appendChild(style);
editor_iframe=document.querySelector('.cke_wysiwyg_frame');
if(editor_iframe){
if(!target0.querySelector('#disp_le')){
target0.insertBefore(disp, editor_iframe); }
iframe_doc=editor_iframe.contentWindow.document;
if(iframe_doc){
let iframe_html=iframe_doc.querySelector('html');
iframe_body=iframe_doc.querySelector('body');
if(iframe_html && iframe_body){
let card_style=iframe_doc.createElement('style');
let css=
'.edit_card { outline: 2px solid #2196f3; outline-offset: 6px; } '+
'.edit_card_e .ogpCard_link { height: auto !important; } '+
'.edit_card_e .ogpCard_title { display: unset !important; } '+
'.edit_card_e .ogpCard_title { max-height: unset !important; } '+
'.edit_card_e .ogpCard_description { white-space: normal !important; } '+
'.ogpCard_wrap *{ background-color: initial; }'; // cke editorのリセット
card_style.setAttribute("id", "card_style");
card_style.innerHTML=css;
if(!iframe_html.querySelector('#card_style')){
iframe_html.appendChild(card_style); }}}}
monitor0.observe(target0, {childList: true});
let disp_le=document.querySelector('#disp_le');
disp_le.style.display='block';
let photos_w=document.querySelector('#js-photos-wrapper');
photos_w.style.background='#607d8b'; // 画像パレットとメニューバー色を統一
url_reset(); // url入力枠幅をリセット
bd_blind(); // 枠線幅を非表示
} // sign()
function sign_clear(){
if(target0.querySelector('#disp_le')){
target0.querySelector('#disp_le').style.display='none'; }
let photos_w=document.querySelector('#js-photos-wrapper');
photos_w.style.background='';
let url_input=document.querySelector('#url_input');
url_input.value=''; }
function url_reset(){
let url_wide=document.querySelector('#url_wide');
let url_input=document.querySelector('#url_input');
let lw_h=document.querySelector('#lw_h');
if(url_input.classList.contains('url_input_w')){
url_input.classList.remove('url_input_w');
lw_h.classList.remove('lw_hint_w');
lw_h.classList.add('lw_hint');
url_wide.style.display='none'; }}
function before_end(){
editor_iframe=document.querySelector('.cke_wysiwyg_frame');
let submitButton=document.querySelectorAll('.js-submitButton');
submitButton[0].addEventListener("click", all_close, false);
submitButton[1].addEventListener("click", all_close, false);
function all_close(){
if(mode==1){
if(!editor_iframe){ // HTML表示の場合
alert("⛔ LinkCard Editor が処理を終了していません\n\n"+
" 通常表示画面に戻り 編集を終了してください");
event.stopImmediatePropagation();
event.preventDefault(); }
else if(editor_iframe){ // 通常表示の場合
mode=0;
card_close(); }}}
} // before_end()
} // main()