アメンバー記事は「白スキン」
「アメンバー記事」のページは、ページ全体の背景色が「白」で眩しいと感じられる方は多いと思います。 通常のブログページの様にスキンを選択できないので、これはユーザーに親切とはいえない環境です。
ブラウザ拡張機能「Stylus」を使えば、アメンバーページを自由に見易くアレンジできます。 この考えから制作したスタイルが「Ameblo Secret Page」です。
ただし、「Stylus」を使うユーザーの画面表示はアレンジできますが、「Stylus」を使わないユーザーには全く元のままの表示です。 全ての訪問者（アメンバー）の表示が改善されるのではない事に、発信する側のユーザーは注意してください。
上記のページに拡張機能「Stylus」の導入と、「Ameblo Secret Page」をインストールする手順の説明があります。
背景色を自由に選べる「Browse Am」
「Ameblo Secret Page」のデザインは、ページの背景色は淡いグレーです。 このスタイルの背景色は、CSSコードを書換えれば変更できます。 しかし、この操作は一般的ではないので、背景色の変更ができるツール「Browse Am」を作りました。
こちらは、拡張機能「Tampermonkey」を使い、それに「Browse Am」をインストールして使います。（Stylusは不要です）
◎ 基本的なデザインは、背景色以外は「Ameblo Secret Page」と全く同じです。
◎ ページ全体の背景色が、自由に変更・設定できます。
「Browse Am」の扱い方
「Browse Am」をインストールしてアメンバーページを開くと、アメブロヘッダーの中央に「カラー設定ボタン」が表示されます。 （表示はアメンバーページだけです）
● このボタンを「左クリック」すると、「カラー設定パネル」が表示されます。 下の図は Chrome / Edge の場合で、Firefoxはパネルのデザインが違います。
● スライダー ❶ をドラッグ移動すると、上側のピッカーエリアの配色が大きく変化します。 エリアの配色を、おうよそ必要な色の範囲に調節します。
● ピッカーエリアの任意の場所を「左クリック」すると、ピッカーポイント ❷ が移動します。 クリックした場所の色が選択され ❶ の左側の円内に表示されます。
下は、この様な操作でグリーンを選択したところです。
● アメブロヘッダー ❸ を「左クリック」すると、選択色がページに反映します。
（ウインドウ内のリンク以外の適当な場所を左クリックしても構いません）
▪カラー設定の操作は、必要な色が設定できるまで何度でもやり直せます。
▪設定した背景色は、次回にアメンバーページを開いた時に再現します。
▪アメンバー記事のページは全てのページが、設定した背景色になります。
▪この背景色は「Browse Am」を利用するユーザーのみの表示で、使用していないユーザー（アメンバー）には通常の白背景で表示されます。
▪もし「Ameblo Secret Page」を利用している場合は、「Browse Am」で背景色が変更できなくなるので、「Ameblo Secret Page」は「OFF」にしてください。
▪「Browse Am」は常駐型のツールです。「Tampermonkey」にインストール後は常に「ON」にしておけば、「アメンバー記事」を開いた時に自動で機能します。
背景色を設定する様子
下は、実際に「カラー設定パネル」を使ってページの背景色を変更する様子です。
「Browse Am」を利用するには
このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Browse Am 〕 ver. 0.1
// ==UserScript==
// @name Browse Am
// @namespace http://tampermonkey.net/
// @version 0.1
// @description アメンバー記事ページを背景色指定して読み易くする
// @author Ameba Blog User
// @match https://secret.ameba.jp/*
// @run-at document-start
// @noframes
// @icon https://www.google.com/s2/favicons?sz=64&domain=ameblo.jp
// @grant none
// ==/UserScript==
let ua=0;
let agent=window.navigator.userAgent.toLowerCase();
if(agent.indexOf('firefox') > -1){ ua=1; } // Firefoxの場合のフラッグ
let am_color=localStorage.getItem('BrowseAm'); // 背景色ユーザー設定値 🔵
if(!am_color){
am_color='#eceff1'; }
let retry=0;
let interval=setInterval(wait_target, 1);
function wait_target(){
retry++;
if(retry>100){ // リトライ制限 100回 0.1secまで
clearInterval(interval); }
let target=document.body; // 監視 target
if(target){
clearInterval(interval);
style_in(0); }}
function style_in(n){
let css=
'<style id="browse_am">'+
'/* 全体背景色 */'+
'.skin-bgHeader, .skin-blogBody, .skin-blogBodyInner '+
'{ background: '+ am_color +'; } '+
'/* グローバルナビゲーションバー */'+
'.skin-topNavIcon, .skin-topNavText, .skin-topNavText:hover, .skin-topNavText:visited '+
'{ color: #333; } '+
'/* ページャーボタン */'+
'.skin-btnPaging { background-color: #fff; color: #000 !important; } '+
'/* 記事本文上部 */'+
'.skin-blogMainInner { padding-top: 20px; } '+
'/* 下部のコンパクトナビボタン */'+
'.skin-bottomNavIcon, .skin-bottomNavText, .skin-bottomNavText:hover, '+
'.skin-bottomNavText:visited { color: #000; } '+
'/* サイドバーの各種表示 */'+
'[data-uranus-component=profileName] a, .skin-sideLink { color: #000 !important; } '+
'[data-uranus-component=profileStatus] dd, [data-uranus-component=amemberWidget] '+
'{ color: #333; } '+
'.skin-btn, .skin-btn:hover, .skin-btn:visited { color: #000; }'+
'</style>';
if(n==0){
if(!document.querySelector('#browse_am')){
document.documentElement.insertAdjacentHTML('beforeend', css); }}
if(n==1){
if(document.querySelector('#browse_am')){
document.querySelector('#browse_am').remove(); }
document.documentElement.insertAdjacentHTML('beforeend', css); }
} // style_in()
window.addEventListener('DOMContentLoaded', function(){
let css=
'.control_am { font: normal 14px Meiryo; vertical-align: -9px; margin-right: -90px} '+
'#bgc_am { height: 27px; width: 25px; border: none; '+
'background: none; vertical-align: -4px; } ';
if(ua==1){
css+=
'#bgc_am { height: 25px; width: 25px; }'; }
let ambH=document.querySelector('#ambHeaderLeft');
if(ambH){
let add_input=
'<span class="control_am">Background Color <input id="bgc_am" type="color">'+
'<style>'+ css +'</style></span>';
if(!document.querySelector('#bgc_am')){
ambH.insertAdjacentHTML('afterend', add_input); }
let bgc_am=document.querySelector('#bgc_am');
bgc_am.value=am_color;
bgc_am.addEventListener('change', function(){
am_color=bgc_am.value;
localStorage.setItem('BrowseAm', am_color); // ストレージに 背景色を登録🔵
style_in(1); }); }
});