WordPressの標準テーマ『 Twenty Twenty-One (トゥエンティトゥエンティワン)』の ダークモード 切り替えボタンを小さくするカスタマイズを行いました。
カスタマイズは追加CSSにコードをコピペするだけ。誰でも簡単にできます。なお、カスタマイズは自己責任にてお願いします。
Customized to make the dark mode switch button of the standard WordPress theme “Twenty Twenty-One” smaller.
To customize, just copy and paste the code into the additional CSS. Anyone can easily do it. In addition, please customize at your own risk.
公式サイトTwenty Twenty-One (トゥエンティトゥエンティワン)
Twenty Twenty-One ダークモードの問題点
WordPressの標準テーマ『Twenty Twenty-One』の最大の特徴と言っても良い『ダークモード』。標準でこの機能がついているのはとても素晴らしいですね。
ダークモード専用のプラグインもあるけど動作に満足できるものはありませんでした。しかし『Twenty Twenty-One』はダークモードを標準装備。動作も問題なし。これだけでこのテーマを利用する価値があると思います。
そんなわけでWordPress標準テーマ『Twenty Twenty-One』のダークモードボタンを小さくするカスタマイズを行いました。
Twenty Twenty-One ダークモード のボタンサイズをカスタマイズ
出来上がりが以下の画像のようになります。
ダークモード：カスタマイズ前(PC)
ダークモード：カスタマイズ後(PC)
beforeafter
PC表示のときはあまり気にならないかもしれませんね。
ボタンのサイズ変更ついでに、形状・文字も変更しました。日本語に翻訳してもらったものを英語にもどしていますw 明るいときは「LIGHT MODE」暗いときは「DARK MODE」と表示。形状はスマホで邪魔にならないよう丸ボタンに変更。
カスタマイズは簡単です。以下に記載するCSSコードを『追加CSS』にコピペするだけ。
外観 → カスタマイズ → 追加CSS
Twenty Twenty-One CSS code to make dark mode buttons smaller
/* ダークモードボタンを小さくする */
/* 丸ボタン化 HTMLテキスト非表示 */
#dark-mode-toggler.fixed-bottom {
border-radius: 50%;
font-size:0;
}
/* ボタンアスペクト比 */
button#dark-mode-toggler::before {
content: "";
display: block;
padding-top: 100%;
}
/* ダークモード時の表示 */
#dark-mode-toggler[aria-pressed="true"] > span::before {
content:'DARK\AMODE'!important;
white-space:pre;
font-size:12px;
padding:10px;
}
/* ライトモード時の表示 */
#dark-mode-toggler > span::before {
display: block;
content:'LIGHT\AMODE'!important;
display: block;
white-space:pre;
font-size:12px;
padding:10px;
}
/* ON/OFF before の余白削除 */
#dark-mode-toggler > span {
margin-left: 0px!important;
}
/* ここまで ダークモードボタンを小さくする */
以上で完成です。
関連記事子テーマの作り方(Twenty Twenty-One)
関連記事Twenty Twenty-One 「Powered by WordPress」を変更する
あとがき
WordPressの標準テーマ『Twenty Twenty-One』はテキストをメインとしたサイト作りに適したテーマです。シンプルで操作は簡単。ただし機能は【超】がつくほど少ないです。プラグインを導入し自分好みに仕上げましょう！
機能が豊富なテーマなら当サイトで使用している『THE THOR』がオススメ！
当サイト「からあげ棒、ありったけ」で使用している有料のWordPressテーマ THE THOR (ザ･トール)の紹介です。 発売直後に購入して以来ずっと愛用している THE THOR ですが、先日「SWELL」というWordPres[…]
