記事リストのサムネイル
「ホーム」のフォローフィードは、デフォルトデサインは2列の千鳥配置で、フィードの時系列が判り難いものです。「Ameblo Management」では、1列のリストにしてこの問題を改善していますが、記事のサムネイル(カバー画像)のサイズがリスト1記事分の高さを決定するので、あえて縮小しています。
沢山フォローして、どんどん気に入ったユーザーを選ぶ(気に入らなかったら外す)フォローの仕方が、私はお推めです。 下はそれを助けるツールです。
そして、フォローフィードの多くのリストを扱い易くするには、リスト1記事の高さを制限したい。 そのためにサムネイルは縮小せざるを得ないのです。
このマイナスを補うため、サムネイルをフォバーした時に拡大表示するデザインを採り入れましたが、その表示方法は下図の位置にさっと表示するものでした。
本当は、画像の右上端を保持したまま、左下に拡大アニメ―ションするデザインにしたかったのですが、「transition」を指定すると下図の様に反対方向に拡大するので、アニメーションを使いませんでした。
しかし、右上から左下へ拡大するアニメーションは出来るはずと、薄々は判っていたのですが、なんとなく放置していました。 今回その方法を調べて、拡大アニメーションを採り入れました。
CSSのアニメーションは「transform」と「transition」
私の想像ですが、「transition」はCSSでアニメーションを可能にした初期のプロパティで、更に高度なアニメーション表現へ発展させたのが「transform」プロパティだろうと思っています。 その経過が関係するのか、「transition」と「transform」とで共通した指定や、共通ではない指定があり、紛らわしい時があります。 まあ、その度に調べてなんとか解決できるものですが。
「transform」を使って画像の左下方へ3倍の拡大アニメーションをさせる場合、下の様なコードが基本になります。
確かに、これで拡大表示が可能ですが、画像が拡大する途中で、上方向に少し移動して、最後に左下方向の拡大位置に収まります。 最初は画像中心位置を保持したまま拡大し、その後に「transform-origin」の指定に従って、左下方に向きを変えている様です。(この動作はブラウザによって異なるかも知れません)
この変なアニメーション表示が疎ましく、「transition」のコードを採用しました。 そのコードの基本は以下です。
最初の「direction: rtl;」は、描画方法を「右から左方向」に指定するもので、これによって、「左下方」への拡大アニメーションになります。 また「transition」のコードでは、画像が対角線に沿って左下方に拡大する好ましい結果になりました。 下図は、今回のデザインでサムネイルが拡大した位置です。
「Ameblo Management」をアップデートしました
上記の更新をした、最新版「ver.2020.10.08」をアップデートしました。
既に「Ameblo Management」をご利用の方は、「Stylus」の「管理画面」を開き、「Ameblo Management」の行の「 」ボタンをクリックする事で、最新の更新版にアップデートする事が出来ます。
ただし、スタイルをユーザーの手で再アレンジしている場合は、更新でアレンジ内容が上書きされるので注意してください。
「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」の Code構成
現在のこのスタイルは、以下の 32Code の構成です。
Code 1 スタイル表紙
Code 2 ブログ管理メニュー 全体
Code 3 ブログ管理メニュー コンテンツ幅が狭いページの修正
Code 4 管理トップページ
Code 5 記事の編集・削除ページ
Code 6 アクセス解析ページ
Code 7 アクセス解析 記事別アクセス数ページ
Code 8 アクセス解析 リンク元ページ
Code 9 いいね!履歴ページ
Code 10 コメント管理ページ
Code 11 リブログ履歴ページ
Code 12 フォロー管理ページ
Code 13 設定・管理ページ
Code 14 ブログページ
Code 15 アメンバーページ(非アメンバーへの表示)
Code 16 プロフィールページ
Code 17 フォロー登録(登録終了)ページ
Code 18 画像一覧ページ
Code 19 記事一覧ページ
Code 20 各種管理ページ(左メニュー小型タイプ)
Code 21 ペタ管理ページ
Code 22 ペタ帳(ぺタ送信ページ)
Code 23 メッセージページ
Code 24 Ameba検索ページ
Code 25 Ameba検索ページ 記事詳細モード
Code 26 Ameba検索ページ 全体表示モード
Code 27 ハッシュタグ トップページ
Code 28 ブログ コメントダイアログ
Code 29 こえの管理(PC版 こえのブログ)
Code 30 ホーム・プッシュ通知設定
Code 31 ホーム 表示項目 ユーザー設定オプション 🔆
Code 32 「ホーム 表示項目の設定方法」チュートリアル
🔆「ホーム」の項目表示順位は「Code 31」の書換えで簡単に順位変更が出来ます。
その手順の説明は「Code 31」上にコメントとして記入しています。
◎「Code1」「Code2」「Code3」「Code20」「Code32」以外のCodeは、アレンジ対象のページ毎の修飾を纏めた構成です。 これらのCodeの適用先の設定変更で、対象ページの単位でアレンジの「有効・無効」を選択できます。
▪「Stylus」の管理画面から「Ameblo Management」の編集画面を開きます。
▪ アレンジの「有効・無効」を変更したいページの「Code」を探します。
▪「次で始まるURL」「正規表現に一致するURL」➔「ドメイン上のURL」
の変更で、そのCodeの適用が「無効」になります。
▪ 上記の変更を元に戻すことで、そのCodeの適用を「有効」に戻せます。
▪ 適用先の変更を行った後、「Stylus」の編集画面の「保存」ボタンを押します。
▪ 以上で、適用先を変更したページのアレンジ「有効・無効」が変更されます。
「Ameblo Management」のアレンジが一部の管理ページなどで不適当な場合は、この適用先の設定変更で、そのページのアレンジだけを無効にしてください。