更新情報

検索する

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


Last Updated: 2021/09/17
Released:

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

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

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

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

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

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

の順に対応していきます。

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

上記「移行期」は2020年9月ごろまでを予定しています(2022年1月に完了しました)。

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

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

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

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

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

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

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

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

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

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

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

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

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

  • イベントチェック
  • Twitter埋め込みツイート部分(ツイート部分はライトモードには切り替わりません)
  • 入力フォーム、確認画面、サイト内検索結果、オンラインコラムの別窓で開くセットリストはネイティブモード実装時に対応予定です

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

Apple社のiOS(iOS13以降)、iPadOS

「設定」→「画面表示と明るさ」→「外観モード」で設定が可能です。

MacOS(10.14以降)

「システム環境設定」→「一般」→「外観モード」で設定が可能です。

Android(10以降)

「設定」→「ディスプレイ」→「テーマ」で設定が可能です。

Windows10以降

「スタート」→「設定」→「個人的設定」→「色」で「黒」を選択するか、「色」を「カスタム」にし、「既定のアプリモード」を「黒」に選択すると、ChromeやFirefox、Microsoft Edge(2020年4月以降リリース)でダークモードでの表示が可能となります。

Microsoft Edgeはシステムの設定に関係なくダークモード表示が可能です。Edgeブラウザの「…」から「設定」をクリックし、表示されたメニューから「外観」項目をクリックしてください。表示のカスタマイズの「全体的な外観」から「ダーク」を選択すると、ダークモードでご覧いただけます。
Edgeのダウンロードページ

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

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

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

本サイトのダークモード対応状況につきましては以下で随時情報公開していきます。
ダークモード対応状況(ロードマップ(1) 移行期の対応が完了しました)

●関連記事

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