2023年にアメンバーページのドメイン構成が変更になり、通常記事ページと同じドメインの扱いになりました。 通常ページのデザインがアメンバーページにも適用される形になり、「Ameblo Secret Page」の役目は終わりました。
これに伴って、「UserStyles.world」におけるこのスタイルの配布も終了しました。 ご利用いただいた皆様、ありがとうございました。 ◞(..)◟
置き忘れられた「アメンバーページ」を改善する
「アメンバー限定公開」の機能は、利用するユーザーにとっては無くてはならない機能でしょう。 ユーザーによっては「アメンバー記事」のみでブログ更新をされている場合もある様です。 それも使い方、ユーザーにより条件は様々ですから。
ただ、アメブロの「アメンバーページ」の扱いはとてもそっけなく、ページのデザインは最低限です。 ユーザーの中には眩しい純白の背景を我慢している方も居られるかも知れません。 今回は、この「アメンバーページ」を改善するスタイルを制作しました。 PCブラウザに「Stylus」を導入し「スタイル」を登録するのは、説明の通りにすれば簡単です。 また、背景色をカスタマイズするのも、そう難しくはありません。
「背景色」を指定したアレンジ
下は、デフォルトの「アメンバーページ」のサンプルです。
「Ameblo Secret Page」のアレンジを適用すると、下の様になります。
上の画像では僅かの違いに感じるかも知れませんが、実際は目に優しいです。
背景色のカスタマイズについて
「Ameblo Secret Page」のコードの1ヵ所を書き変えるだけで、背景色が好みの色に変更できます。（ただし明るい系の色が適当です）
❶「Stylus」の「管理画面」のリストで「Ameblo Secret Page 202110.04.01」（末尾は現在のバージョン表示です）の行をクリックします。
❷ このスタイルのCSSコードがスタイルの「編集画面」の右側に表示されます。 コードは「適用先」で3個のセクションに区分されていますが、その「2: 適用先」の下のコードに着目してください。
「セクション2」のコードは、このバージョンでは14行目から始まっています。 その中で「16行 ～ 25行」が「全体背景色」を指定するコードです。
| 16 17 18 19 20 21 22 23 24 25 |
/* 全体背景色 */ .skin-bgHeader, .skin-blogBody, .skin-blogBodyInner { background: #eceff1; } /* *********************************** アメンバーページの背景色は、上の「#eceff1」の カラーコードを書換えてカスタマイズできます。 *************************************/ |
❸ この部分の「#eceff1」が背景色のカラーコードで、このスタイル既定の「淡いブルーグレー」を指定しています。 これを好みの色のカラーコードに書換えて、この「編集画面」の左メニューの「保存」を押すと、「アメンバーページ」の背景色が指定した色になります。 カラーコードについては、ネットで調べてください。
「画像一覧」ページのアレンジ
「アメンバー記事」に掲載された画像を左クリックすると、通常の記事と同様に「画像一覧」のページが表示されます。 しかし、ページドメインが「secret.ameba.jp」のため、HTML構成が全く異なる画面です。
下は、そのデフォルトの「画像一覧」ページです。
このページもデザインがおざなりで、ページの左右の余白がありません。
「Ameblo Management」が適用された通常の記事の「画像一覧」ページは扱い易いデザインで、これに準じたデザインにアレンジしました。
「Ameblo Secret Page」を利用するには
❶ 拡張機能「Stylus」を導入
「Ameblo Secret Page」は Chrome / Edge / Firefox など、拡張機能「Stylus」が対応するブラウザで利用が可能です。
使用されているブラウザに拡張機能「Stylus」を導入します。 導入する手順は、以下のリンクを参照ください。 （EdgeはChrome版が使えます）
すでに「Stylus」を使用されている場合は、❶ の操作は不要です。
❷ 「Ameblo Secret Page」のスタイルを入手
「Ameblo Secret Page」の最新版「ver.202110.04.01」は、以下のページから入手できます。
このページは、ユーザー自身が制作したスタイルを公開・配布する目的で設立された「UserStyles.world」というサイトです。 ページを開くと以下の様な画面です。
サンプル画像の下の install ボタンを押します。
この操作で下の様な「Stylus」のインストール画面が表示されます。 画面の左上にある インストール {S} のボタンをもう一度押します。
「スタイルがインストールされています」と表示されたら、この画面を閉じます。
「アメンバー記事」のどれかを開いて見てください。 記事本文の背景色が変わっていると思います。 また、記事の画像を左クリックすると開く「画像一覧」ページのデザインが変わっている事を確認してください。