「いいね！」ボタンは記事の単位で非表示にできない
「コメント」「リブログ」ボタンは、記事ごとに「表示/非表示」の選択が出来ます。 ところが「いいね！」ボタンは、ブログ全記事で「表示/非表示」の設定が可能ですが、記事個別には設定ができません。
（Amebaヘルプは出来る様に書いていますが、誤りだと思います）
特定のブログ記事だけ、「いいね！」をして欲しくない場合がありますが、そんな気持ちが読者に伝わるとは限らず、読んだと言う意味で「いいね！」が押される場合や、自動ツールで無作法な「いいね！」が押される事もあります。 でも、他の記事の「いいね！」は閉じたくないので、「いいね！」を受けるしかありません。
このあたりの改善は、何度もリクエストされている問題ですが、システム上の困難があるのか改善される気配がありません。
そこで、SNSボタンを纏めて非表示にする「styleタグ」を記事に書き込むツールを制作して、記事単位での SNSボタンの「表示/非表示」を実現しました。
この機能が使える環境
● 記事に書き込んだ「styleタグ」は、その記事を表示するページの範囲全体にCSSを適用します。 そのため、1ページに「複数記事表示」を設定している場合は、非表示指定をした記事が表示されたページ上の「他の記事」にも指定が適用されます。
これは「複数記事表示」の状態でのみ生じる問題で、影響された「他の記事」を個別に表示した場合は「いいね！」ボタン等は表示されます。
この問題は「ブログ記事の表示数」の設定を改めれば避けられます。「複数記事表示」はブログ独特のシステムですが、私は好ましいと思った事は一度もありません。 他の記事も見たい訪問者はページャーを使います。「複数記事表示」は、どこにページの区切りがあるのか判り難く、閲覧者が操作に迷うだけです。
▪この「ブログ記事の表示数」の設定は、以下のリンク先の画面で設定できます。
▪下の画面で「ブログ記事の表示数」を「1」に設定し、ページ下端の「保存」を押すと、「複数記事表示」が「単記事の表示」になります。
●「コメント」「リブログ」ボタンの投稿時指定に関わらず、全ての「SNSボタン」と「リブログ欄・コメント欄」を、設定をしたページだけ非表示にします。 非表示とするだけで、既にあるコメント等の削除は行いません。
● SNSボタン「非表示」を設定した記事は、再編集で開いて再設定すれば SNSボタン「表示」に戻す事ができます。
● PC版のブログ画面では「新タイプスキン」「旧タイプスキン」でSNSボタンのコードが異なります。 そこで、両タイプのスキンで共用できる「styleタグ」としました。
但し「レトロタイプスキン」に関しては、「styleタグ」のファット化を考慮して対象外としています。 もし必要があればコメントください。
● このツールは、スマホ画面上に表示されるSNSボタンに関しても、それを非表示にする「styleタグ」を記事本文に書き込みます。 しかし、アメブロの各種スマホ版アプリで表示される画面のCSSを全て掌握しているわけではないので、スマホの機種によっては、SNSボタンが非表示とならないかも知れません。
以下が記事に書き込まれる「styleタグ」の内容です。
「Auto Style Attach SNS ⭐ ver. 1.0」 72行
「Auto Style Attach SNS ⭐」の操作
SNSボタン「非表示」を指定する記事が頻繁にある場合は、「Tampermonkey」に「Auto Style Attach SNS ⭐」を登録し、常に「ON」として常駐して使用します。
また、SNSボタン「非表示」とする記事がたまにしかない場合は、その記事を設定する時だけ「Auto Style Attach SNS ⭐」を「ON」とし、他の場合は「OFF」とする使い方が適当です。
SNSボタン「非表示」を設定
「コメント」「リブログ」「公開範囲」の「設定パネル」が指定ボタンになります。 この「設定パネル」は「Ameblo Writer（Compact）」のアレンジを適用した編集画面では、下の様に横長で各種ボタンが並ぶパネルとして表示されます。
このパネルの、スイッチではない「コメント」等の表示部を「Click」すると、パネル自体に「赤枠」が表示されます。「赤枠」が表示された状態は、既に「styleタグ」が記入されています。
また、SNSボタン「非表示」を設定した記事を再編集で読み込んだ場合は、最初からこの「赤枠」が表示され、「styleタグ」が記入されている事を示します。
（ 注：「styleタグ」は、HTML表示で記事末尾を調べると確認できます ）
なお「Ameblo Writer（Compact）」のアレンジが無い場合は、「設定パネル」に相当する範囲は散漫です。 下は「styleタグ」が記入された状態の「赤枠」の表示です。
この範囲を「Click」する事で、SNSボタン「表示/非表示」を設定する事になります。
SNSボタン「非表示」の解除
「設定パネル」に「赤枠」が表示されている場合は、パネルのスイッチではない「コメント」などの表示部を「Click」すると、「赤枠」が消えます。 これは「styleタグ」が削除されて通常の記事に戻った事を意味します。
SNSボタン「非表示」の実際のブログ表示
このサンプルのブログページは、「いいね！」が5件、「コメント」が5件、既に書き込まれています。「Auto Style Attach SNS ⭐」は、記事投稿の最初からSNSボタンを「非表示」にするのが本来の扱い方です。 しかし、このサンプルの様に既に「いいね！」が押されたり「コメント」を受けた後でも設定は可能です。
◎ 以下は、SNSボタン「非表示」の設定前です。
◎「Auto Style Attach SNS ⭐」 を「ON」にしてこの記事を再編集し、「非表示」を設定すると、上図の赤枠の範囲が非表示になり、下の様な表示になります。
◎ 同じ記事のスマホでの表示です。（アメーバアプリの表示ではありません）
◎ SNSボタン「非表示」を設定すると、上の「赤枠」部が非表示になります。
「Auto Style Attach SNS ⭐」 ver. 1.0
このツールは Chrome・Edge / Firefox の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。 以下のページに簡単な導入の説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
●「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
●「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
● 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Auto Style Attach SNS ⭐ 〕 ver. 1.0
// ==UserScript==
// @name Auto Style Attach SNS ⭐
// @namespace http://tampermonkey.net/
// @version 1.0
// @description 記事単位でSNSボタン非表示にするstyleタグを記入する
// @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 target=document.getElementById('cke_1_contents'); // 監視 target
let monitor=new MutationObserver(protect_publish);
monitor.observe(target, {childList: true}); // 通常・HTML編集切換による発火不能を防ぐ
protect_publish();
function protect_publish(){
let l_com=document.querySelector('.l-communication');
if(l_com){
report();
l_com.onclick=function(){
if(report()==0){
insert_ptag(1);
report(); }
else if(report()==1){
insert_ptag(0);
report(); }}}
function report(){
let editor_iframe=document.querySelector('.cke_wysiwyg_frame');
if(editor_iframe){ // iframe読込みが実行条件
let iframe_doc=editor_iframe.contentWindow.document;
if(iframe_doc){
let iframe_body=iframe_doc.querySelector('body.cke_editable');
if(iframe_body){
let pts=iframe_body.querySelector('.pts');
if(pts){
l_com.style.outline='auto';
l_com.style.outlineColor='red';
return 1; }
else{
l_com.style.outline='none';
return 0; }}}}}
function insert_ptag(n){
let editor_iframe=document.querySelector('.cke_wysiwyg_frame');
if(editor_iframe){ // iframe読込みが実行条件
let iframe_doc=editor_iframe.contentWindow.document;
if(iframe_doc){
let iframe_body=iframe_doc.querySelector('body.cke_editable');
if(iframe_body){
if(n==0){
let pts=iframe_body.querySelector('.pts');
if(pts){
pts.remove(); }}
if(n==1){
// style_ptext を編集して SNSボタンの非表示内容を変更出来ます ⭕
let style_ptext=
'[data-uranus-component="entryAction"], '+
'[data-uranus-component="feedbacks"], '+
// 以下は 新タイプスキン対応で追加
'[data-uranus-component="entryShare"], '+
'[data-uranus-component="mainWidget"], '+
// 以下は 旧タイプスキン対応で追加
'.articleExLinkArea, '+
'.reblogArea, '+
'.commentArea, '+
'.pagingArea:nth-of-type(3), '+
// 以下は スマホスキン対応
'._2UJLz0lB { display: none; }';
let insert_elem_p=iframe_doc.createElement('style');
insert_elem_p.appendChild(iframe_doc.createTextNode(style_ptext));
insert_elem_p.setAttribute('class', 'pts');
iframe_body.appendChild(insert_elem_p); }}}}} // 記事末尾に style.ptsを追加
} // protect_publish()
} // main()
「Auto Style Attach SNS ⭐」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Auto Style Attach SNS ⭐」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
