「HOME」のデザインをアレンジして5年目
「HOME」の現在のデザインが提供されて5年になります。 このアレンジを目的のひとつとした「Ameblo Management」ですが、「フォローフィード」の上部表示と供に、フィードに表示される記事の「新着・未読・既読」の明瞭化を現在も受け継いでいます。 以下は、開発当時の記事です。
「フォローフィード」は、リストの記事を縦一列に並べ、記事の時系列の並びが判り易いデザインです。 しかし最近は、記事のサムネイルがもう少し大きければと思う事がありました。 サムネイルにマウスを乗せると拡大する様にしていますが、やはり無操作で目に入る情報は大事と思ったのです。
「サムネイルサイズ」を拡大
これまで「64×64px」だったサムネイルを「78×78px」に拡大しました。 リスト1件の高さ（80px）を変更せずに、配置できる最大サイズに設定しています。
この変更は僅かですが、それでもサムネイルの視認性が少し改善したと思います。
「新着・未読・既読」マークのサイズを拡大
下は「Ameblo Management」でアレンジした「フォローフィード」の例です。
「● 新着」「● 未読」を示すマークが、リスト行の左端に表示されます。 デフォルトの「新着」マークはすぐに消えるので、未読・既読 が区別できなくなります。 このデザインは「未読」マークが消えずに表示され続けます。
また、記事タイトルの文字色でも区別ができます。 未読は「黒」、既読は「グレー」となり、直感的に「既読」「未読」が判ります。
今回、サムネイルのサイズ変更と同時に、マークのサイズを径「8px」➔「10px」に拡大しました。
「Ameblo Management」をアップデートしました
上記の更新をした「ver.202306.22.01」をアップロードしました。
既に「Ameblo Management」をご利用の方は、「Stylus」の「管理画面」を開き、「Ameblo Management」の行の「 」ボタンをクリックする事で、最新の更新版にアップデートする事が出来ます。
◎ スタイルをユーザーの手で再アレンジしている場合は、更新でアレンジ内容が上書きされるので注意してください。
◎ ご自分でスタイルの再アレンジをされない方は、「Stylus」の自動更新を「ON」にしておくと、手動の操作なしで設定した期間ごとに自動更新されます。 自動更新の設定は「Stylus」の「オプション」メニューの先頭にあります。
「Ameblo Management」をはじめて利用するには
「Ameblo Management」の利用可能な環境は Chrome・Edge・Firefox などの拡張機能「Stylus」を利用できるブラウザです。
手順 ❶
このスタイルを利用するには、使用されているブラウザに拡張機能「Stylus」を導入する必要があります。 既に「Stylus」を導入されている場合は、手順 ❶は不要です。
拡張機能「Stylus」を導入する手順は、以下のリンクを参照ください。
（EdgeはChrome版が使えます）
手順 ❷
「Ameblo Management」は下の「UserStyles.world」のサイトから入手できます。
このリンク先は、下の様なページです。
● サンプル画像の下の install ボタンを押してください。
下の様な「Stylus」側のインストール画面が表示されます。
● 画面の左側メニューの上部にある インストール {S} のボタンを押します。
「スタイルがインストールされています」と表示されたら、この画面を閉じます。 これで「Ameblo Management」のアレンジが対象ページに実行されます。
●「Styus」の管理画面を表示するとインストールした「Ameblo Management」のバージョンが判ります。 バージョン数は「年月．日付．修正更新」の表示です。
「Ameblo Management」の セクション構成
バージョン「202306.22.01」は、以下の 33セクション構成です。
1： スタイル表紙（バージョン表示）
2： ブログ管理メニュー 全体
3： ブログ管理メニュー コンテンツ幅が狭いページの修正
4： 管理トップページ
5： 記事の編集・削除ページ
6： アクセス解析ページ
7： アクセス解析 記事別アクセス数ページ
8： アクセス解析 リンク元ページ
9： いいね！履歴ページ
10： コメント管理ページ
11： リブログ履歴ページ
12： デザインの変更ページ
13： 設定・管理ページ
14： フォロー管理ページ
15： アメンバー管理ページ
16： こえの管理（PC版 こえのブログ）
17： 各種管理ページ（左メニュー小型タイプ）
18： メッセージページ
19： プロフィールページ
20： ブログページ
21： ブログ コメントダイアログ
22： アメンバーページ（非アメンバーへの表示）
23： アメンバー申請ページ
24： フォロー登録ページ
25： 画像一覧ページ
26： 記事一覧ページ
27： Ameba検索ページ
28： Ameba検索ページ 記事詳細モード
29： Ameba検索ページ 全体表示モード
30： ハッシュタグ トップページ
31： ホーム・お知らせ画面・プッシュ通知設定
32： ホーム 表示項目 ユーザー設定オプション
33： 管理トップ ユニバーサル アナリティクスの告知
「ホーム」の項目表示順位は「セクション32」の書換えで順位変更が出来ます。
その手順の説明は「セクション32」の末尾にコメントとして記入しています。
カスタム配色の設定
前バージョンから、ページ背景色やホバー色などの配色をユーザーの好みで指定できる機能を導入しました。 方法は以下のページを参照ください。
