更新情報

検索する

ダークモードに対応していきます


Last Updated: 2020/04/02
Released:

Webサイトのデザインは白を基調とした画面表示が主流ですが、OSやアプリで黒を基調とした表示である「ダークモード」を利用される方が増えてまいりましたので、本Webサイトも「ダークモード」を選択されている方を対象に徐々に「ダークモード」表示に対応していくことにいたしました。

以下に「ダークモード対応ロードマップ」をご説明いたします。

ロードマップ(1)移行期

アイドルイベントレポートのダークモード対応

1. 新規に掲載するアイドルイベントレポート
2. 2020年に掲載したアイドルイベントレポート
3. 2018年~2019年に掲載したアイドルイベントレポート
4. 以下順次過去のイベントレポートについてダークモードに対応いたします。

続いて同時進行で
5. アイドルカテゴリ
6. インフォメーションカテゴリ
7. トップページ

の順に対応していきます。それ以外のカテゴリーについては対応するかまだ決めておりません。

上記のダークモード対応につきましてはダークモード対応OSおよびダークモード対応ブラウザにのみ適用されます。誠に申し訳ありませんが、対応のないOSおよびブラウザにはダークモードでの表示を選択することができません。

上記「移行期」は2020年9月ごろまでを予定しています。

ライト/ダークモード切り替えスイッチを設置

移行期においては、対応作業の中途段階でブラウザにキャッシュ(表示方法を決める設定が一時保存されたファイル)が残っている場合があり、一時的に背景と文字色のコントラストが十分に確保できていないことがありますので、ダークモードに設定されている方には従来の「ライトモード」に切り替えるためのアイコンボタンを設置します。

切り替えボタンはダークモードに設定されている方にのみ表示されます。

場所は記事のタイトルのすぐ下に太陽と月の形をしたボタンが表示されますので、そのボタンをクリック(タップ)して切り替えてください。ライトモードに切り替わります。再びダークモードで表示したい場合にはもう一度同じ場所にあるボタンをクリック(タップ)してください。

ロードマップ(2)ネイティブ対応

(1)の移行期において他のカテゴリーについても徐々にダークモードに対応していきます。

サイト内のほぼすべてのページのダークモード対応が終わりましたら、表示モードはOSやアプリのユーザ設定に任せ、その設定に合わせて自動的に表示を切り替えます。

サイト側からはユーザ操作によるモード切り替えボタンの表示及び、モード切り替え機能の提供を終了いたします。(2021年1月から3月の間を予定)

既知の問題(対応の限界)について

本機能はJavaScriptを通して実現されています。JavaScriptは常にOnの状態でご利用ください。

2019年以前のアイドルイベントレポート記事の写真については、写真の右下に影をつける装飾効果をつけているため、影とともに地の色(白色)が見えてしまう場合があります。スタイルシートにて影が見えないように処理しておりますが、非対応ブラウザ及び一部の合成画像につきましては正常に表示されない場合がございます。あらかじめご了承ください。

ネイティブモード優先で進行中のページ

ページのデザインファイル構成上、その他の理由でネイティブモード優先で進行しているページが存在します。そのようなページで、切り替えボタンをクリック(タップ)しても完全にライトモードに切り替わりません。あらかじめご了承ください。判明している該当ページを以下に記しておきます。

  • Twitter埋め込みツイート部分(ツイートはライトモードには切り替わりません)
  • イベントチェック(ライトモードに切り替えると文字の一部が見えなくなります)

ダークモード対応OS、ブラウザ

Apple社のiOS(iOS13以降)、iPadOSは、「設定」→「画面表示と明るさ」→「外観モード」で設定が可能です。

MacOS(10.14以降)は、「システム環境設定」→「一般」→「外観モード」で設定が可能です。

Android(10以降)は、「設定」→「ディスプレイ」→「テーマ」で設定が可能です。

Windows10でダークモードにするには

Internet ExplorerはWebサイトのダークモード表示に対応しておりません。

Microsoft Edgeの最新版にはダークモード表示に対応していますが、2020年4月までは自動更新が始まらないので、手動でダウンロードとインストールする必要があります。
新しいEdgeのダウンロードページ

Windows10の「スタート」→「設定」→「個人的設定」→「色」で「黒」を選択するか、「色」を「カスタム」にし、「既定のアプリモード」を「黒」に選択したうえで、ChromeやFirefoxで本サイトをご覧の場合にはダークモードでの表示が可能となります。

ダークモード対応チェック

お使いのブラウザのダークモード対応状況について以下の行に表示させていただきます。

本サイトのダークモード対応状況につきましては以下で随時情報公開していきます。
ダークモード対応状況(随時更新中)

●関連記事

本記事を無断で複製・転載することを禁じます。
copyright(c)1997-2020 Scramble-Egg Inc.