ブログ記事61件
「メッセージ画面」の熟練者向けスタイル「メッセージ」関連画面では、細かく注意喚起する「注意書き」「ヘルプ」が表示されます。これは原則的に必要ですが、ネットリテラシーを正しく備え、アメーバブログにも熟練したユーザーにとって、少々作業の邪魔です。「AmebaManagement」は広範囲のユーザーを想定してそれらを表示しますが、熟練者向けに、作業性を最優先した「AmebloMessagePro」を制作しました。このスタイルは「AmebloManagement」の適用下で機能する、
「GYAO動画のフル画面表示」のデザインについて「GYAO動画のフル画面表示」は、動画サイト「GYAO!」の各種画面をアレンジするスタイルです。◎サイト全体の背景色をブルーグレイの目に優しい色に変えます。また、各種ページのスクロールバー配色をユーザーライクにアレンジします。◎デフォルトは動画のコントロールボタンで通常画面/大画面/全画面表示を変更する仕様ですが、これにウインドウ幅による自動切換え機能を追加します。通常サイズのウインドウの動画表示も、見栄えを重視しています。
「コメントウインドウ」のレイアウトを見直す「CommentBeautify」の新機能は、私には画期的です。かなり以前よりコメントウインドウを「AmebloManagement」でアレンジしていましたが、ウインドウの配置はCSSではどうにも出来ず、限界を感じたものです。これがJavaScriptで配置変更できる「サブウインドウ」に相当する事に、私は長く気付かなかったのです。これが可能というのは嬉しい発見です。今回、「CommentBeautify」の新機能の価値を最大限に生かす
ブログの主要フォントを 好みに指定したいならアメーバブログは、ブログページのフォントが「MSPゴシック」です。これは、いつまで経っても変える気がない様です。どうしても好みのフォントを使いたいユーザーは少なくないはずですが。このページは、ブログの「メイリオ」化と、そこから必要になる「アメブロ絵文字の位置補正」について纏めたものです。主要フォントを「メイリオ」以外のものに変えたい場合も、このページのコードを少し書換えて対応できると思います。そういった場合の参考にしていただければ。
「画像一覧」の上部のデザインを修正しました11月末にアメブロヘッダー(ブログページ、画像一覧ページなど)の高さの変更があったのですが、「画像一覧」ページの上部デザインが少し位置ズレしたので、修正しました。上図の赤枠のパーツの位置指定が、ページ上部からの指定だったので、アメブロヘッダーの高さが変わってズレたのです。下図の上側は修正前、下側が修正後です。今回、アメブロヘッダーの高さの影響を受けない様に、コードを改めました。 「AmebloManagement
「HOME」のヘッダー部のデザインが変更されました「HOME」の検索窓のデザイン変更があり、「AmebloManagement」のアレンジデザインを修復しました。今回のデザイン変更により、検索窓以降の表示要素が、ヘッダー部より右に出てしまうデザイン崩れになります。「検索窓」の拡縮デザイン これを機に、「HOME」のアレンジページ幅を少し拡げ、デフォルトの「1120px」と殆ど同じにしました。また、上の「検索窓」以降の崩れは、「検索窓」が自動的に拡縮するデザインに変更し
妥当な方法がありました一旦システムによる「いいね!履歴」への遷移をさせて、「いいね!履歴」のページで「管理トップ」から遷移して来た事が判れば、強制的に「管理トップ」へ遷移するという、いわばリダイレクト式の解決方法が可能と判りました。これは既に考えていたのですが、その時は「history」を使う事しか思い浮かばず、上手く行きませんでした。セキュリテイの関係と思いますが、ブラウザは直前のページのURL等を情報を持っているのですが、JavaScriptからそれを取得できません。それが参照で
どちらかしか選べない「HOME」の「いいね!のお知らせ」をクリックすると、普通のスクリプトコードでは、次の二つのどちらかの結果しか選べません。①「管理トップ」を開く「いいね!のお知らせ」は消えない➁「いいね!履歴」を開く「いいね!のお知らせ」が消える➁は、本来のページ遷移となり、状況を変更するのに失敗しています。①は「管理トップ」を開く目的は達成していますが、「いいね!のお知らせ」を消す事ができていません。「いいね!のお知らせ」をクリックして消し、しかも「管
何故「いいね!履歴」を開く様にしたのか「HOME」の「いいね!お知らせ」のクリックで、従来通り「管理トップ」を開く様にしたかったのですが、これは絶望的な状態です。それにしても、この秋から「いいね!お知らせ」が「いいね!履歴」を開く仕様に改められたのは何故か、少し考えて見ました。運営は意地悪をしているつもりはないのでしょうから。「いいね!履歴」のリストの特徴 下は、無理やり開かされる様になった「いいね!履歴」のリストのサンプルです。このリストを改めて見ると、下の様な
「いいね!」の「お知らせ」のデザイン前ページで「AmebloManagement」の修正対応で、「いいね!」のお知らせのフォバーデザインに関しては、これまでのデザインに戻す事ができました。しかし、この「いいね!のお知らせ」をクリックすると「いいね!履歴」が開く仕様は、変更が難しくて難儀しています。コードを改めながら順に試す様な事をしていて、これまで10種ほどのコードを試して来ましたが、正解に辿り着けません。可能性としては「無理」という結果になるかもと思っています。
「HOME」の「お知らせ」の更新2021年9月に「HOME」の「お知らせ」機能が変更されました。目的不明のお知らせ情報の統合画面が出来ましたが、困ったのは、「いいね」のお知らせをクリックすると「いいね履歴」ページを開く仕様です。以前は「管理トップ」が開き、その後の操作に移り易かったのが、遠回りになりました。これは改悪で、クリックしないといつまでも「いいね」の「お知らせ」が消えないし、皆さんどうしているのでしょう?こういうのはスクリプトでしか対応できないので、「管理トップ」を開く様な
「管理トップ」の「アメーバキャンぺーン」を下方に移動「管理トップ」で、大多数のユーザーにとって重要と思われる表示項目を、なるべく上部に並べるために、「アメーバキャンぺーン」は「1年前に書いた記事」と重ねて表示していました。このトリッキーな表示方式は、重ね合わせる表示項目の高さが常に一定としてデザインしていますが、これがたまに元デザインが変更されたりします。今回もその様な事があったので、重ね合わせのデザインを廃止し、「アメーバキャンぺーン」を下方に移動しました。これで、元デザインの
「メッセージ画面」の熟練者向けスタイルアメーバはセキュリティ上の観点から、「メッセージ」に関連する画面で細かく注意喚起する「注意書き」や「ヘルプ」を表示します。これは必要な事ですが、ネットリテラシーを正しく備え、アメーバブログにも熟練したユーザーにとっては、少々作業の邪魔になります。「AmebaManagement」は広範囲のユーザーを想定して、各種の「注意書き」を表示していますが、熟練者向けに、作業性を最優先した「AmebloMessagePro」を制作しました。このスタイル
「メッセージ送信確認」の画面のブラッシュアップ他ユーザーにメッセージを送る最初は、そのユーザーのプロフィール画面から「メッセージ」のボタンを押して「メッセージ送信」の画面を開きます。アメブロのメッセージ機能は、乱用を避ける配慮が各所にあり、なかなかしっかりしたシステムです。「メッセージ送信確認」の画面は、送信前にメッセージ内容を確認する画面です。これは普通のEメールアプリにはない段階を踏む方式で、私はよく助けられます。誤字や早とちりは誰もあると思うし、相手に間違って受け取られそう
「メッセージ」は関連画面が多い今期のデザイン更新は、「メッセージ」に関連する全ての画面で行われた様です。「メッセージ」は受信画面や返信メッセージの編集画面など、関連する画面が多く、なかなか手強いセクションです。他ユーザーに最初にメッセージを送る画面は、通常の受信・返信画面とは独立していて、これもデザインの修復が必要でした。ヘルプ(通常は画面の右側にあります)のレイアウトは無難にまとまりました。デフォルトデザインは、メッセージのリストの幅が狭いのですが、行幅に余裕を持たせ、メッセージタ
「メッセージ」画面の応急修復予定の通り「メッセージ」画面のデザイン更新が行われました。すぐに修復アレンジに着手したのですが、思った以上に修復が必要な箇所が多く、未だ作業の途中です。しかし、デザイン崩れのままでは落ち着けない機能なので、主要な部分の修復が出来た段階ですが、「AmebloManagement」更新版をアップロードしました。通信に直接かかわるブルーの部分は、これまでのデザインを復活させました。メッセージの編集画面が未だですが、修復の段階ごとに順次アップロードしま
〔追記〕2023年にアメンバーページのドメイン構成が変更になり、通常記事ページと同じドメインの扱いになりました。通常ページのデザインがアメンバーページにも適用される形になり、「AmebloSecretPage」の役目は終わりました。これに伴って、「UserStyles.world」におけるこのスタイルの配布も終了しました。ご利用いただいた皆様、ありがとうございました。◞(..)◟ 置き忘れられた「アメンバーページ」を改善する「アメンバー限定公開」の機能は、利用するユ
「HOME」に追加された「あなたのマンガ新着」「あなたのマンガ新着」という項目が「HOME」に追加された様です。キャンペーン期間だけかと思ったのですが、表示され続けるので配置を変更しました。「AmebloManagement」は「display:flex」を使って右側の項目の表示順をコントロールしているのですが、各項目に「order:x」(xは表示の順番)のプロパティを指定すると、その順に並びます。ただし、後から追加された項目には「order」プロパティの指定が無く、その場合は
「GYAO動画のフル画面表示」のデザインについて「GYAO動画のフル画面表示」は、動画サイト「GYAO!」の各種画面をアレンジするスタイルです。◎サイト全体の背景色をブルーグレイの目に優しい色に変えます。また、各種ページのスクロールバー配色のアレンジ(Firefoxは非対応)など、ユーザーライクなデザインです。また今回、動画のプログレスバーを赤からブルーに変更しました。◎デフォルトは動画のコントロールボタンで通常画面/大画面/全画面表示を変更する仕様ですが、これにウインドウ
「お知らせ通知機能」の更新「いいね」「コメント」「フォロー」等を受けた事を「HOME」を開いた時に、「いいね!されました」等の表示で教えてくれる「通知機能」は、PCユーザーにとっても無くてはならないものです。先日、この通知機能が更新され、PCでは「HOME」と別画面に纏めて表示される様になりました。アメーバスタッフ『【お知らせ】通知機能の改善について』いつもAmebaをご利用いただきましてありがとうございます。プロダクトマネージャーの可児です。Amebaで提供している通知機能の改善
「Stylus」にとって気難しい「iframe」ChromeとEdgeで「AmebloWriter」「AmebloWriterCompact」を利用されているユーザーは、先週からアメブロ編集画面のデザインが下の様になっているかも知れません。これは「Stylus」による「編集枠=iframe」へのCSS修飾が、疎外された結果です。「iframe」内への修飾はデリケートな部分があり、過去にも何度かこの障害を経験しました。トリッキーな改善法 現在の障害を一時的に修復
「SNSパネル」の幅と「投稿ボタン」の幅を微調整しました「コメント」「リブログ」「公開範囲」の設定ボタンが並ぶ「SNSパネル」の幅を僅かですが拡張し、「下書き保存」「投稿する」のボタンをその分狭くしました。この調整は、「AutoStyleAttachSNS⭐」の次バージョンで、スクリプトによるボタン増設を可能にするためのものです。今回のコードの変更は、「AmebloWriter」と「AmebloWriterCompact」の両方で行っています。この更新後は「SN
ヘッダーメニュー更新によるデザイン崩れ「HOME」のヘッダーメニューは、アメブロの運営方針によって不定期に更新されるので、以前にも同様のデザイン崩れを生じています。「ホーム」のヘッダー修正とコメント管理画面の改善/AmebloManagement∽ameblo.jp「ヘッダーメニュー」(グリーン)が更新されて、右に拡張したので、赤枠の要素群が下方に押し出されたデザイン崩れの状態です。今回、「ヘッダーメニュー」のCSSデザインを、崩れ難いコードに改めました。
「編集画面の高さ」をウインドウに追従する仕様に変更今回の更新は、少し遅すぎたかも知れません。2019年1月のアレンジver.16 で「編集枠縦拡張オプション」を投入して、編集枠の高さを「650px」に拡張しましたが、それ以降は変更をして来ませんでした。その2年間の間に、アメブロのデフォルトの高さが改められ、現在は「700px」ですから、「AmebloWriter(Compact)」をOFFにすると若干拡がる状態でした。今回の更新では、「編集枠縦拡張オプション」を全
「画像パレット」の「月別選択セレクタ」の修正マイナーな修正ですが、「画像パレット」の画像リストの月別を選択するセレクタが表示崩れを生じました。これは、セレクタのデフォルト選択が「すべての月」の表示に変更されたためです。突然に幅の広い選択肢が増え、編集パレット幅を小型化した「コンパクトパレット」のデザインでは、下の様なスケルトンの表示になりました。「コンパクトパレット」のオプションを指定しない場合は下の様に問題ありません。今回は、このセレクタ部のデザインをやりくり
「カバー設定ダイアログ」のClass名変更等カバー画像を設定をしないで投稿しようとすると表示されるダイアログに、無用なスクロールバーが表示されます。カバー設定ダイアログにもスクロールバーが表示され、変だと思い調べると、ダイアログのアレンジが各所で無効になっていました。編集画面の高さを狭めると、ダイアログ表示を確保するためにスクロールバーが出ますが、「overflow-y:scroll;」の指定で常に表示されます。「overflow-y:auto;」を指定するのが普通で
とうとう「ペタ」ボタンがなくなりました「AmebloManagement」は、アメーバブログの「HOME画面」を始め、「管理画面」の全般、「ブログページ」、「画像一覧画面」、「コメント作成ウインドウ」、「Ameba検索画面」など、ブログでユーザーが使用する殆どの画面を、ユーザーライクにアレンジします。今回、「HOME」画面の「ペタ」ボタンが廃止され、周囲のデザインが乱れたので対応してアレンジを更新しました。更新後のデザインは下の様になります。(時刻表示は、前ページの「TimeOn
「コメントリスト」のデザイン修正「AmebloManagement」のコメント管理ページのアレンジですが、「コメントリスト」の表示で未だ納得できない部分がありました。下は「受信コメント」に対して「返信する」ボタンを押す前の状態です。ボタンを押すと下側に「返信コメントの編集枠」が表示されますが、下はこれまでのデザインです。赤矢印の部分が、無駄な高さです。ここは、非表示になった「返信する」ボタンが隠れているのですが、これを詰めてリストの高さを節約しました。
リストの「コメント全文表示」についてアメブロの新デザインのアレンジで、最も悩んだのは「コメント全文表示」に変更されたリスト表示方式を、「最初はコンパクト表示」という仕様にしてしまって良いかと言う事です。受信・送信コメント数が少ないユーザーには、最初から「全文表示タイプ」の方が使い勝手が良い様に思えます。色々テストをすると、「コメント編集枠」にカーソルを入れた状態で「受信コメント枠」サイズを変更すると、高さが急に増減する問題に気付きました。ページ全体にフォーカスが無いため、ドラッグ計算
「コメント管理」ページのデザイン変更今回変更されたのは「承認待ち」「公開済み」の画面のみで、新機能の追加ではなく、ページデザインを最近追加された「IDブロック」ページに合せた様です。過去のコメントの「月別の選択」がダイアログ式に変わり、最初は判り難くて迷いました。「AmebloManagement」では、以下の気になった部分を再アレンジしました。コメントの全てを表示するデザインは? 新しいリスト表示は、最初からコメント全文を表示するデザインです。受信コメント数の多いユー