2021 Twenty Twenty-One ダークモード カスタマイズ

Twenty Twenty-One ダークモード 大きすぎるボタンを小さくカスタマイズ

2021 Twenty Twenty-One ダークモード カスタマイズ

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)

 

ダークモード PC カスタマイズ トゥエンティトゥエンティワン

ダークモード:カスタマイズ後(PC)

 

スマホ 標準 Twenty Twenty-One ダークモードbefore
スマホ カスタマイズ Twenty Twenty-One ダークモードafter

 

PC表示のときはあまり気にならないかもしれませんね。

ボタンのサイズ変更ついでに、形状・文字も変更しました。日本語に翻訳してもらったものを英語にもどしていますw 明るいときは「LIGHT MODE」暗いときは「DARK MODE」と表示。形状はスマホで邪魔にならないよう丸ボタンに変更。

カスタマイズは簡単です。以下に記載するCSSコードを『追加CSS』にコピペするだけ。

操作手順
外観 → カスタマイズ → 追加CSS

 

Twenty Twenty-One ダークモードのボタンを小さくする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』がオススメ!

ザトールをチェック

THE THOR の使用歴が2年を超えました。 いろいろなテーマを経験し、THE THOR への評価が変わってきたのでレビューを更新します。このレビューが楽しいブログライフの一助となれば幸いです。 [afTag id=14471] […]

THETHORレビュー

 

>