カードデザインのパターンは多いのに…
私は「Ameba Pick」を使用していないのですが、「ピックカード」はカードデザインを選べる様になっていて、リンクカードに比べるとずいぶん力が入っています。
しかし、スマホユーザーを念頭に置いているのか、カードに枠線が無く、本文幅が広いブログページでは左寄せになります。 これは、PC表示を主にしたブログデザインでは、少々使い難いカードデザインと思います。
そこで、通常表示からカード配置の中央寄せと、カードの枠線付けをワンタッチで出来るツールを作りました。 デフォルトのデザインパターンは豊富なので、補助的なツールという位置付けです。
ツールの扱い方
このツール「PickCard Editor ⭐」は、常駐型のスクリプトツールです。 拡張機能「Tampermonkey」にツールを登録して、常にONの状態にしておきます。
これにより、PCの記事編集画面を開くとツールが自動的に起動し、記事中のピックカードに対し、以下の処理が可能になります。
●「通常表示」の編集画面で ピックカードを「Ctrl+Click」すると
➔ カードが左寄せの場合は、中央寄せになります
➔ カードが中央寄せの場合は、左寄せになります
●「通常表示」の編集画面で ピックカードを「Shift+Click」すると
➔ カードに枠線が無い場合は、カードに細枠線が表示されます
➔ カードに細枠線がある場合は、カードの枠線が非表示になります
横長のデザイン
カード生成時は左寄せです。 これを「Ctrl＋Click」するところです。
下は、配置が中央寄せになったカードを「Shift+Click」するところです。
カードに細枠線が表示されました。
編集画面では、上の様に「リンク追加」ボタンや「編集」ボタンが表示されていますが、投稿するとこれらは消えて下の様になります。
縦長のデザイン
カード生成時は左寄せです。 これを「Ctrl＋Click」するところです。
配置が中央寄せになったカードを「Shift+Click」するところです。
カードに細枠線が表示されました。
画像のみのデザイン
カード生成時は左寄せです。 これを「Ctrl＋Click」するところです。
配置が中央寄せになったカードを「Shift+Click」するところです。
カードに細枠線が表示されました。
〔注〕縦横比が偏った画像の「画像のみ」のデザインは、枠線と画像の間に余白が大きく出る場合があります。 下の例の右側は、上下に大きな余白があります。
ツールの仕様
◎ このツールは、「ピックカード」の配置デザインと枠線デザインを追加します。 カードのコードに関与しないので、アフィリエイト機能に影響する事はありません。
但し、ツール使用による万一の損失に関しては責を負いません。 すべて自己責任の下でご利用ください。
◎「Ameba Pick」の利用規約に従って、カードのHTMLコードには全く改変を行わない工夫をしています。
◎ このツールは、PCのブログ編集画面の「通常編集」の画面でのみ動作しますが、中央寄せ・枠線表示は、PCとスマホの両環境での参照に反映します。
◎ 記事本文中に新たに生成したカードに対し、ツールが機能しない場合があります。 これは、ツールが新しいカードを認識していない場合です。 その時は、カード右下の「編集」ボタンを押し、「レイアウト選択」のダイアログを開いて閉じる（レイアウトの変更をしてもしなくてもOKです）と、新しいカードにツールが機能します。
◎ このツールは「テキストのみ」「画像のみ」のレイアウトにも有効です。 ただし、「画像」の縦横比によっては、枠線と画像の間に空白が出来る場合があります。
◎ 当方の環境が不完全で、想定外の問題があるかもしれません。 使用上の問題点などを指摘いただければ、ありがたいです。
「PickCard Editor ⭐」を使用するには
このツールは Chrome / Edge / Firefox の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。 以下のページに簡単な導入の説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
●「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
●「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
● 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 PickCard Editor ⭐ 〕ver. 0.2
// ==UserScript==
// @name PickCard Editor ⭐
// @namespace http://tampermonkey.net/
// @version 0.2
// @description 通常表示でピックカードを編集
// @author Ameba Blog User
// @match https://blog.ameba.jp/ucs/entry/srventry*
// @exclude https://blog.ameba.jp/ucs/entry/srventrylist.do*
// @grant none
// ==/UserScript==
let retry=0;
let interval=setInterval(wait_target, 100);
function wait_target(){
retry++;
if(retry>10){
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 target1=document.querySelector('#root');
let monitor1=new MutationObserver( catch_key );
monitor1.observe(target1, {childList: true});
let target=document.querySelector('#cke_1_contents');
let monitor=new MutationObserver( catch_key );
monitor.observe(target, {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){
iframe_body=iframe_doc.querySelector('body');
if(iframe_body){
let pickC=iframe_body.querySelectorAll('.pickCreative');
for(let k=0; k<pickC.length; k++){
wrap(pickC[k]); }
function wrap(C){
let type=C.getAttribute('data-layout-type');
if(type=='1' || type=='2' || type=='5'){
let C_root=C.parentNode.parentNode;
let warC=iframe_doc.createElement('div');
warC.setAttribute('class', 'warC');
if(!C_root.closest('.warC')){
warC.appendChild(C_root.cloneNode(true));
C_root.parentNode.replaceChild(warC, C_root);
warC.style.width='fit-content'; }}
else if(type=='3' || type=='4'){
let warC=iframe_doc.createElement('div');
warC.setAttribute('class', 'warC');
if(!C.closest('.warC')){
warC.appendChild(C.cloneNode(true));
C.parentNode.replaceChild(warC, C);
warC.style.width='fit-content'; }}}
for(let k=0; k<pickC.length; k++){
pickC[k].onclick=function(event){
if(event.ctrlKey){
event.preventDefault();
event.stopImmediatePropagation();
card_edit_c(pickC[k]); }
else if(event.shiftKey){
event.preventDefault();
event.stopImmediatePropagation();
card_edit_s(pickC[k]); }}}
function card_edit_c(C){
let warC=C.closest('.warC');
if(warC){
if(warC.style.margin!='0px auto'){
warC.style.margin='0px auto'; }
else{
warC.style.margin=''; }}}
function card_edit_s(C){
let warC=C.closest('.warC');
if(warC){
if(warC.style.borderRadius!='4px'){
warC.style.outline='1px solid #aaa';
warC.style.borderRadius='4px'; }
else{
warC.style.outline='';
warC.style.borderRadius=''; }}}
}}}} // catch_key()
} // main()
〔追記〕 2021.12.06
「Ameba Pick」の利用規約に抵触しない様に、コードを改善しました。