カバー画像の「チェック画面」は いまいち
PCの編集画面から投稿しようとすると、「カバー画像」の設定を促す画面が出ます。 これをとっくにOFFにして、もう忘れてしまったユーザーも居られるかも。
編集時に「カバー画像」を設定済でも、再びこの画面が出るので「？」なんですが、そのまま投稿してよいのか不安になり、またこの画面から設定したりしてます。 プログラムは、既に設定したのを判定出来ないのか？
カバー画像設定の仕様
「チェック画面」の仕様が良く判らないので、テストをしてみました。 以下は、その結果判った事です。
❶「カバー画像」の指定をしなかった場合は、記事中でカバー画像として使用できる画像があれば、その画像が「カバー画像」に自動的に設定されます。
❷ カバー画像に適した画像が複数ある場合は、記事中で最初の画像になります。
❸ 記事中にカバー画像に使える画像がなく、ユーザーが他の記事などの使える画像を指定しなかった場合は、「カバー画像無し」になります。
❹「チェック画面」を無視しても、❶ ～ ❸ の本来の自動設定は実行されます。
➎「チェック画面」で「カバー画像なしで投稿する」を選択しても、❶ ❷ のカバー画像に使える画像が記事中にある場合は、それが「カバー画像」に自動設定されます。
以上の様に、「チェック画面」のインターフェイスは不適切です。 要は、設定忘れがないかを問うて、もし忘れていたら「設定」出来る様にしたものです。
❻ 一旦投稿した記事の「カバー画像」は、再編集の「編集画面」の「カバー画像の設定」で、変更が可能です。 ただし、❶ ❷ のカバー画像に使える画像が記事中にある限り、「カバー画像なし」の設定にはできません。
再度「チェック」画面を表示させる方法
「チェック画面」の「次から表示しない」をチェックすると、ローカルストレージに登録されて、次からは表示されなくなります。 これは Cookie削除では戻せません。 この「チェック画面」を再び使いたい場合は、以下の操作で復元できます。
▪ Chrome / Edge では、「編集画面」で「F12」で DevToolsを起動します。
▪ メインメニューで「Application」を選択し「Storage」の「Local Storage」の項を左列メニューで選択します。
▪「Local Storage」の「https://blog.ameba.jp」の項目を選択します。
▪ 右側に下の様な「Key」と「Value」の並んだリストが表示されます。
「Key」が「COVER_CONFIRM_MODAL_FLAG」の行を探します。
▪ 右側の「Value」は「チェック画面」を非表示にしていると「2」、デフォルトの表示は「1」です。 リストの「Value」上で右クリックすると、値を書換える事ができます。 この「Local Storage」の値は「チェック画面」の 表示/非表示 の登録です。
カバー画像の欠落
「カバー画像」はユーザーが編集画面で設定しなおさない限り、同じ画像が設定されたままになります。 その後の記事の再編集などで元画像が削除されると、カバー画像が欠落した状態となり、少しみっともない事になります。
▪ ブログ記事中の「リンクカード」や「リブログカード」
▪ ブログページの「記事一覧」の「記事リスト」
▪ 各種の記事検索で表示される「検索された記事のリスト」
などで「カバー画像の欠落」になりますが、画像が表示されないだけなら良いのですが、「記事一覧」の「記事リスト」で、以前はデザイン崩れが生じていました。
下は、過去の状態を再現したものです。
この崩れはアメーバのページデザインのミスですが、画像の欠落は余り生じないので、しばらく気付かなかった様です。 現在は、下の様に修正されています。
私は、この状態になるのを経験して「CoverImg Checker」を作りました。「記事一覧」のデザイン崩れは「カバー画像」の欠落の指標になりました。 ツールの目的はデザイン崩れ抑止ではなく「カバー画像」の欠落の防止です。
デザインが修復された結果 ツールが不具合に
上図の様に、崩れていたデザインが修正されたので、「カバー画像の欠落」をチェックできなくなりました。 修復前の様に「画像の代替文字列」が表示されて崩れてくれないと「欠落」が判定出来ないので、このツールが調査する間だけ、修復を無効化する事にしました。
修復は「カバー画像」に「display: block;」を指定して「幅・高さ」を固定しているので、「display: initial !important;」を指定するコードを追加しました。
このツールが「カバー画像」をチェックする時は、「記事一覧」が下の様に特殊なリスト表示になります。 下は、本来の機能が戻り、「カバー画像の欠落」が生じた記事を検出したところです。
このツールで検出した記事は、リストの右クリックからそのまま再編集が出来ます。
ブログのメンテナンスに労を惜しまないユーザーは、この「CoverImg Checker」を試してください。
「CoverImg Checker」の取扱い方法
このツールの取扱い方法は、以下のページを参照ください。
「CoverImg Checker」ver. 0.4
このツールは Chrome / Edge / Firefox の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。 以下のページに簡単な導入の説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
●「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
●「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
● 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 CoverImg Checker 〕 ver. 0.4
// ==UserScript==
// @name CoverImg Checker
// @namespace http://tampermonkey.net/
// @version 0.4
// @description 「記事一覧」の無効なカバー画像を自動チェックする
// @author Ameba Blog User
// @match https://ameblo.jp/*
// @match https://secret.ameba.jp/*
// @match https://blog.ameba.jp/ucs/entry/srventry*
// @noframes
// @grant none
// ==/UserScript==
let stop_next=0; // 自動実行の進行フラグ
let target=document.querySelector('head');
let monitor=new MutationObserver(main);
monitor.observe(target, { childList: true });
main();
function main(){
if(document.querySelector('.skin-blogArchive')){
//「記事一覧」画面の場合
let menu=document.createElement('div');
menu.innerHTML=
'<span id="retoucha">再編集</span> '+
'<span id="filea">リスト表示</span>'+
'<style>#eaoa_menu { position: absolute; z-index: 20; '+
'font: normal 14px Meiryo; color: #333; padding: 3px 10px 1px; '+
'border: 1px solid #dadce0; background: #fff; cursor: default; '+
'box-shadow: 4px 4px 2px -2px rgba(0, 0, 0, 0.48); } '+
'#eaoa_menu span { padding: 1px 4px 0; } '+
'#eaoa_menu span:hover { color: #fff; background: #2196f3; }</style>';
menu.setAttribute("id", 'eaoa_menu');
menu.style.display='none';
if(!document.getElementById('eaoa_menu')){
document.querySelector('body').appendChild(menu); }
let cic_menu=document.createElement('div');
cic_menu.innerHTML=
'<input id="end_out" type="submit" value="処理終了">'+
'<input id="wait_time" type="number" min="1" max="9">'+
'<span id="sec">sec</span>'+
'<style>#cic_menu { display: flex; flex-direction: column; '+
'position: fixed; top: 30px; left: calc(50% + 425px); '+
'background: #fff; width: 90px; font: 16px Meiryo; '+
'border: 1px solid #2196f3; padding: 4px; display: none; } '+
'#end_out { margin-bottom: 4px; padding: 6px 0 4px; } '+
'#wait_time { padding: 2px 6px 0 20px; } '+
'#sec { position: absolute; bottom: 6px; right: 30px; }</style>';
cic_menu.setAttribute("id", 'cic_menu');
if(!document.getElementById('cic_menu')){
document.querySelector('body').appendChild(cic_menu); }
let wait_time=document.querySelector('#wait_time');
if(wait_time){
let wait_sec=sessionStorage.getItem('cic_wait');
if(!wait_sec){
wait_sec=3; }
wait_time.value=wait_sec; }
let style=document.createElement('style');
style.innerHTML=
'[data-uranus-layout="archive"] { margin: 0; } '+
'[data-uranus-component="archiveNavTab"] { '+
'height: 32px; line-height: 32px; } '+
'[data-uranus-layout="archiveBody"] { padding-top: 15px; } '+
'[data-uranus-component="archiveList"]>li { '+
'height: 32px; padding: 4px 8px; background: #fff; } '+
'[data-uranus-component="entryItemFeedback"], '+
'[data-uranus-component="entryItemTheme"] { '+
'display: none; } '+
'[data-uranus-component="entryItemImage"], '+
'[data-uranus-component="imageFrame"] img { background: #eee; '+
'height: 32px !important; display: initial !important; } '+
'[data-uranus-component="entryItemTitle"] { overflow: hidden; '+
'font-size: 16px; color: #000; height: 21px; margin: 0 0 -5px; } '+
'[data-uranus-component="entryItemMeta"] { '+
'min-height: unset; height: 20px; } '+
'[data-uranus-component="entryItemDatetime"] { '+
'margin-bottom: -2px; } '+
'[data-uranus-component="archiveFooter"] { padding: 0; } '+
'[data-uranus-component="pagination"] { '+
'margin-top: 10px; padding: 4px; } '+
'[data-uranus-component="pagination"] li { '+
'font-size: 16px; line-height: 32px; } '+
'[data-uranus-component="pagination"] li a { height: 30px; } '+
'html { scroll-behavior: auto; } '+
'#main { position: absolute; top: 0; left: calc(50% - 420px); '+
'width: 840px; font-family: Meiryo; '+
'background: #d2e0e6; box-shadow: 0 0 0 200vw #d2e0e6; } '+
'#ambHeader, .skin-bgHeader, .skin-blogHeaderNav, '+
'#subA, .skin-blogSubB, .skin-blogFooterNav { display: none; } '+
'div[id^="div-gpt-ad"] { display: none; } '+
'#app> :not(.skin-page) { display: none; } ';
style.setAttribute("id", 'cic_style');
if(!document.getElementById('cic_style')){
document.querySelector('body').appendChild(style); }
let ctrl_f=0; // Ctrlキー 押下フラグ
let ac_list=document.querySelectorAll('.skin-borderQuiet');
for(let k=0; k<ac_list.length; k++){
ac_list[k].setAttribute("onContextmenu", 'return false;'); // コンテキスト抑止
ac_list[k].addEventListener('contextmenu', function(e){ // 専用メニュー表示
menu_disp(e, ac_list[k]); }); }
function menu_disp(event, target){
if(ctrl_f==0){
document.getElementById('eaoa_menu').style.display="block";
document.getElementById('eaoa_menu').style.left=event.pageX+"px";
document.getElementById('eaoa_menu').style.top=event.pageY+"px"; }
retouch_item(target);
file_item(target); }
document.addEventListener('keydown', function(event){
if(event.ctrlKey){ //コンテキスト表示
ctrl_f=1;
let ac_list=document.querySelectorAll('.skin-borderQuiet');
for(let k=0; k<ac_list.length; k++){
ac_list[k].removeAttribute("onContextmenu", 'return false;'); }}});
document.addEventListener('click', function(){
document.getElementById('eaoa_menu').style.display="none"; // 専用メニュー抑止
ctrl_f=0;
let ac_list=document.querySelectorAll('.skin-borderQuiet');
for(let k=0; k<ac_list.length; k++){
ac_list[k].setAttribute("onContextmenu", 'return false;'); }}); // コンテキスト抑止
function retouch_item(target){
let retouch=document.getElementById('retoucha');
retouch.onclick=function(){
let title_link=target.querySelector('h2 a');
let entry_id_a=title_link.getAttribute('href').split('entry-');
if(entry_id_a[1]){
let entry_id=entry_id_a[1].slice(0, 11);
if(entry_id){
let path=
'https://blog.ameba.jp/ucs/entry/srventryupdateinput.do?id='+entry_id;
window.open(path, "_blank"); }}}}
function file_item(target){
let file=document.getElementById('filea');
file.onclick=function(){
let user;
let entry_id;
let entry_ym;
let date=target.querySelector(
'[data-uranus-component="entryItemDatetime"]').textContent;
let title_link=target.querySelector('h2 a').getAttribute('href');
let user_a=title_link.split('/');
if(user_a.indexOf('secret.ameba.jp')==-1){
user=user_a[1]; }
else{
user=user_a[3]; }
let entry_id_a=title_link.split('entry-');
if(date && user && entry_id_a[1]){
entry_ym=date.replace(/[^0-9]/g, '').slice(0, 6);
entry_id=entry_id_a[1].slice(0, 11);
let path=
'https://blog.ameba.jp/ucs/entry/srventrylist.do?pageID='+
'1&entry_ym='+entry_ym+'&user='+user+'&entry_id='+entry_id;
window.open(path, "_blank");
}}}
if(location.pathname.indexOf('entrylist')!=-1){ // 新着リストでのみ実行
document.addEventListener('keydown', function(event){ //「Space」で停止
event.preventDefault();
event.stopImmediatePropagation();
if(event.keyCode==32){
let footer=
document.querySelector('[data-uranus-component="pagination"]');
let cic_menu=document.querySelector('#cic_menu');
if(stop_next==0){
stop_next=1;
if(footer){
footer.style.background='#2196f3'; }
if(cic_menu){
cic_menu.style.display='flex'; }}
else{
if(footer){
footer.style.background=''; }
location.reload(); }}}, false);
let wait_time=document.querySelector('#wait_time');
if(wait_time){
wait_time.onchange=function(){
sessionStorage.setItem('cic_wait', wait_time.value); }} // ストレージ記入
let wait_sec=sessionStorage.getItem('cic_wait');
if(!wait_sec){
wait_sec=3; }
wait_sec=wait_sec*1000;
setTimeout(()=>{
let retry=0;
let interval=setInterval(wait_img, 100);
function wait_img(){
retry++;
if(retry>100){ // リトライ制限
clearInterval(interval); }
if(img_check()==20){
clearInterval(interval);
go_next(); }}
function img_check(){
let check=0;
let imgFrame=
document.querySelectorAll('[data-uranus-component="imageFrame"]');
for(let k=0; k<imgFrame.length; k++){
let img=imgFrame[k].querySelector('img');
if(!img){
check+=1; }
else{
let img_width=img.getBoundingClientRect().width;
if(img_width==100){
check+=1; }
else if(img_width!=0){
let li=img.closest('.skin-borderQuiet');
li.style.outline='2px solid red';
stop_next=1; }}}
return check; }
function go_next(){
if(stop_next==0){
next_open(); }}
}, wait_sec); // ページ更新タイミングの調節 🔴
function next_open(){
let next_button=document.querySelector('.js-paginationNext');
if(next_button && next_button.classList.contains('is-disabled')!=true){
let next_url=next_button.getAttribute('href');
window.location.href=next_url; }}
function pre_open(){
let pre_button=document.querySelector('.js-paginationPrev');
if(pre_button && pre_button.classList.contains('is-disabled')!=true){
let pre_url=pre_button.getAttribute('href');
window.location.href=pre_url; }}
let end_out=document.querySelector('#end_out');
if(end_out){
end_out.onclick=function(){
let blog_url=location.href;
blog_url=blog_url.substring(0, blog_url.indexOf('entrylist'));
window.location.href=blog_url; }}
} // 新着リストでのみ実行
} //「記事一覧」画面の場合
if(document.querySelector('#entryListEdit')){ //「記事の編集・削除」の場合
let arg=new Object;
let pair=location.search.substring(1).split('&');
for(let i=0; pair[i]; i++){
let key=pair[i].split('=');
arg[key[0]]=key[1]; } // key[0]がkey, key[1]がvalue
let entry_ym=arg.entry_ym;
let pageID=parseInt( arg.pageID, 10); // 数値に変換
let user=arg.user;
let entry_id=arg.entry_id;
let amebaId=document.querySelector('#gHeaderRight .amebaId').textContent;
let entryList_li=document.querySelectorAll('#entryList li');
if(user!=null){
if(amebaId!=user){ // 他ユーザーのブログでリスト表示を押した場合
if(history.length>1){
window.history.back(); }
else{
window.close(); }}
else{
let k;
for(k=0; k<entryList_li.length; k++){
let entryList_a=entryList_li[k].querySelector('h2 a');
if(entryList_a){
if(entryList_a.getAttribute('href').indexOf(entry_id)!=-1){
entryList_li[k].style.outline='2px solid red';
entryList_li[k].scrollIntoView({block: "center"});
break; }}}
if(k==entryList_li.length){
pageID+=1;
let path=
'https://blog.ameba.jp/ucs/entry/srventrylist.do?pageID='+
pageID+'&entry_ym='+entry_ym+'&user='+user+'&entry_id='+entry_id;
window.location.href=path; }}}
} //「記事の編集・削除」の場合
if(document.querySelector('.l-body')){ //「編集画面」の場合
if(document.querySelector('.l-form form > .error')){ // 他ユーザで再編集を押した場合
if(history.length>1){
window.history.back(); }
else{
window.close(); }}
} //「編集画面」の場合
} // main()
「CoverImg Checker」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「CoverImg Checker」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
