新しいアクセス解析ページに対応

新しいアクセス解析は、思った以上に良く纏まった表示体系です。 従来の4~5画面に渡っていた内容がメイン画面とサブの2画面に収まり、それでいて内容に不足がなく、私は好ましく感じています。 唯一アクセス数の縦棒グラフは妙な気がしますが、馴れの問題でしょうか。

 

アメブロを扱う上で、主要なページのアレンジを統合した「Ameblo Management」は、このアクセス解析ページを見易くしようと始めたアレンジです。 今回のリニュアルに対応して、早速に「Ameblo Management」を更新しました。

 

◎以前のバージョンは、解析の項目のページ内の配置変更に重きを置いていましたが、今回はそれを省いています。 私自身が、新しいアクセス解析ページでは配置変更の必要が無いと感じたからです。

 

◎このアレンジは縦の無駄な表示幅を画面上から駆逐しているので、スクロールする量が減ります。

 

◎横方向もウインドウ幅が850px程度に抑えられていて、小型モニターやノートPCでも余裕があります。 この様なデザインは、ブラウザ拡大で文字を見易くしたい場合にも、柔軟に対応出来ます。

 

◎今回、「画像一覧ページ」をアレンジ範囲に入れました。

 

 

 

アレンジした結果

縮小して少し判りにくいですが、左が本来の解析ページで、右がアレンジを適用した状態です。 文字やパーツを縮小したのではなく、無駄な隙間を減らしています。

 

 

「管理ページ」の全てに渡って左サイドに表示されるメニューは、今回、横方向に並ぶプルダウンメニューに変更しました。 ヘッダー左端の「ブログ管理」にマウスを乗せると、下の青枠の様にプルダウンします。

 

 

●下は「アクセス解析ページ」のコピーです。 かなりの箇所で縦方向の幅節約をしています。

 

 

●「記事別」の項目の「もっと見る」を押すと、下図の「記事別アクセス数」の詳細が表示されます。 縦方向に無駄がないのが判ると思います。

 

 

●下はこれまで通りですが、管理メニューの「記事の編集・削除」のページです。 縦方向に詰めているので、スクロール無しで一覧できる件数がとても増えています。

 

 

●下は今回アレンジに追加した「画像一覧ページ」の様子です。 右側の不要な表示を省き、プロフィールーのリンクをページ上部に移動しました。 これでウインドウ幅はコンパクトになっていますが、画像のサムネイルを少し小型にして、横3列を4列に増やしています。

 

 

画像個別の選択表示画面も、右側の表示を省いてすっきりしました。

 

 

 

 

「Ameblo Management」を利用するには

「Ameblo Management」の利用可能なブラウザは Chrome / Edge / Firefox のいずれかです。

 

手順 ❶ 

このスタイルを利用するには、使用されているブラウザに拡張機能「Stylus」を導入する必要があります。 既に「Stylus」を導入されている場合は、手順 ❶は不要です。

 

 拡張機能「Stylus」を導入する手順は、以下のリンクを参照ください。

(EdgeはChrome版が使えます)

 

 

 

手順 ❷ 

「Ameblo Management」は下の「UserStyles.world」のサイトから入手できます。

 

 

このリンク先は、下の様なページです。

 

 

● サンプル画像の下の install ボタンを押してください。

 

下の様な「Stylus」側のインストール画面が表示されます。

 

● 画面の左側メニューの上部にある インストール {S} のボタンを押します。

 

 

「スタイルがインストー­ルされています」と表示されたら、この画面を閉じます。 これで「Ameblo Management」のアレンジが対象ページに実行されます。

 

●「Styus」の管理画面を表示するとインストールした「Ameblo Management」のバージョンが判ります。 バージョン数は「年月.日付.修正更新」の表示です。

 

 

 

セクション構成

Ameblo Management ver.2018.04.26」は 9セクションの構成です。

 

セクション1 スタイル表紙

 

セクション2 ブログ管理メニュー 全体

 

セクション3 ブログ管理メニュー コンテンツ幅が狭いページの修正

 

セクション4 管理トップページ

 

セクション5 記事の編集・削除ページ

 

セクション6 アクセス解析ページ

 

セクション7 ブログページ

 

セクション8 プロフィールページ

 

セクション9 画像一覧ページ

 

 

◎ブラウザ拡張機能「Stylus」を導入する手順は、以下のリンクを参照ください。 

 

  ブラウザが Chrome の場合

 

  ブラウザが Firefox の場合

 

「Stylus」はユーザースタイルシートを管理する優れた拡張機能です。「Stylus」を導入すると、このぺージで紹介したアレンジスタイルに限らず、様々なページやサイトをカスタマイズする、ユーザーの投稿したアレンジスタイルが利用出来ます。 またユーザーが、自身が必要なアレンジスタイルを「Stylus」上で作成することが出来ます。