「新マイページ」の項目表示順の変更可能なアレンジ / Ameblo Management

「新マイページ」のカスタマイズ

「新マイページ」のページレイアウトで、スタッフブログのコメントでは、以下の点に不満が多い様です。

❶「チェックリスト」の配置より上部にメイントピックス枠が表示される

❷「チェックリスト」が千鳥配置になり、横幅が狭くて記事タイトルが読みづらい

❸「チェックリスト」の未読/既読でのテキスト色の変更がなく、区別出来ない

私自身がアレンジしながら改善の必要を感じていたので、「Ameblo Management」に対応コードを追加する段階で、既に ❶ ❷ の問題はクリアしていました。

アレンジ初段階では、右列は600px（=チェックリスト1件の横幅）としていました。アレンジを進めると「新着トピックス（下方）」「AbemaTV」等のタイル型リンクの画像（横3個タイプ）の縮小が必要になり、混ざったADリンクのiframeの扱いがネックとなり、結局これらのサイズを変更しない方針に変更しました。

そこから右列幅を664pxに拡げざるを得なくなり、ページ全体幅は1024pxに落ち着きました。要するに「新着トピックス」などの横3個のタイルが、右列幅を押し拡げます。結果として「チェックリスト」は、私の思惑より少し幅が広くなりました。

この後に ➌ の問題を知りました。「新マイページ」のアレンジには、既読タイトルのハイライト色の対策を盛り込みました。「既読マーク」を表示させるアイデアもあったのですが、とりあえずオーソドックスなハイライトの仕様を継承させています。

アレンジの様子

下は「Ameblo Management」のデフォルトアレンジの状態です。各項目の上下の配置が変更可能ですが、右列は最初に「チェックリスト」を配置しています。

未読のタイトル文字は「黒」、既読のタイトル文字は「ブルーグレー」で、未読/既読を判断できる様にしています。

「マイページ」の表示項目は左列・右列とも順位の変更が可能

「Ameblo Management」の最新版は、問題の「チェックリスト」も含め、左列の7項目、右列の4項目の上下の配置順が、任意に変更出来ます。（カスタマイズは必ずしも必要なものではありません）

このカスタマイズは「セクション18」（Code 18）の簡単な書き換えで実現されます。以下は、Code 18 の主要な部分です。

/* マイページ 表示項目 ユーザー設定 *************************/

/* 左列項目 順位 と 非表示指定 ****************** */

/* ユーザプロフィール */
.HomeUserProfile {
    order: 0; }


/* あなたのブログ */
.HomeBlogModule {
    order: 0; }


/* あなたのピグ */
.HomePigg {
    order: 4; }


/* コメントした記事 */
.HomeBlogComment {
    order: 3; }


/* ドットマネー */
.HomeMoney {
    order: 5; }


/* コイン */
.HomeCoin {
    order: 6; }


/* お得にGETする */
.HomeLuckyDarts_Navigation {
    order: 7; }


/* 右列項目 順位指定 ************************** */

/* メイントピックス */
.HomeMainTopics {
    order: 3; }


/* チェックリスト */
.HomeChecklist {
    order: 1; }


/* 最近見たブログ */
.HomeBlogHistory {
    order: 2; }


/* 新着トピックス */
.HomeBlogFeed {
    order: 4; }