WordPressテーマ『Ashe』ブラックモードに切り替えできる

おすすめ度 ★★★★☆

Asheの便利なポイントは、簡単にダークモード(ブラック/ホワイト背景に切り替え)ができる点です。機能を絞っており、シンプルで使いやすく安心の日本語表記なので、Wordpressを始めたばかりのユーザーから、きちんとしたウェブサイトまで幅広く対応できるテーマだと思います。

ただ欠点も下の方に書いてますので、良かったら参考にしてください。

全幅表示 可能
クレジット編集 可能
ウィジット数 両サイド、フッター
色のカスタマイズ 可能
ヘッダー画像 正常表示
スライダー表示 対応

タイトルのフォント

デフォルトでは等倍フォントmonospaceが指定されているのですが、半角英数が明朝になります。

なぜか半角英数が明朝、カナがゴシックで違和感ありまくり。

見た目が格好悪いので、私は変更しました。

すべての投稿に反映させたいので、追加CSSに加えます。

h1.post-title{ font-family:sans-serif; font-size:2em; }

クレジット編集

Asheにはクレジット編集機能がありますが、左端にテーマ名がデフォルトで表示されます。

テーマ名を表示させたくない場合は、以下のコードを追加CSSに加えます。

div.credit{ display:none; }

ウィジット数

Asheのウィジット数は両サイドとフッターの3か所です。

色のカスタマイズ

黒背景(ブラックモード)が使える点はポイントが高いです。

投稿文の背景も黒色にできるテーマは、わりと少ないからです。

ユーザーモードで、サイトをブラックモードとデフォルト(白)に切り替えることができます。

その際、記事のテキストも背景色に合わせて変わりますが、黒または白を意識せずに作成した背景透過のpng形式の画像などは、透けてしまいますので注意が必要です。

切り替えは、テーマ→カスタマイズ→スキンから選択。

ダークモードスイッチャーにチェックを入れると閲覧者からも切り替えが可能です。

このような機能があるテーマは他になく、無料テーマにしてなかなか秀逸です。

「カスタマイズ」⇒「スキン」から行う。

ヘッダー画像

Acheはヘッダー画像が問題なく表示されます。

スライダー表示

おすすめスライダーという項目があり、スライダーを枚数指定で設定できます。

表示のオン・オフ切り替えができます。

スライダーに表示するカテゴリを選択できます。

個人的には高さがありすぎてあまり好きではありませんが、スライダー表示してインパクトを与える効果はあります。

ドロップキャップ機能

Asheは段落の1文字目が大きくなるドロップキャップのオン・オフができます。

一昔前のワープロのテクニックみたいで、必要のないユーザーにはやっかいな機能です。

少し前までは、チェックをオフにしてもなぜか全ページの行頭に適用されてしまい、どこにそのCSSがあるのかも分からないまま放置していました。

その後アップデートで改善されたようです。

オリジナルの見出しを設定している場合も適用されてしまいスタイルが崩れるので、オフにしておくのが無難です。

なお、ドロップキャップにしたい場合は、CSSで実現できます。

サンプル↓

文章の1文字目のみ大きく表示できるcss 
first-letter を使いましょう。

コードはこちら↓

<style> section p::first-letter { color: #2992e3; font-size: 200%; } </style>
<div><section><p>文字の1文字目のみ大きく表示できるcssfirst-letter を使いましょう。</p> </section></div>

補足

投稿画面に表示される「これも好きかも」ですが、どこで設定したのか覚えがなく、カスタマイズ項目を探し回っていたら、カスタマイズ→関連項目の表示/非表示であることがわかりました。

デベロッパーツールで見てみると、page-wrap > div.page-content > div > div.main-container > div.related-posts でした。

タイトルぐらい編集させろよ、といいたいところですが「これも好きかも」の文字列を編集する項目はありません。いったいどこにあるんでしょう?

個人ブログならいいですが、企業のサイトで「これも好きかも」はないでしょう。

どうしても消したいときの応急的な方法を書いておきます。

今の私のレベルではこれが精いっぱいでした。

<style>
div.related-posts{
display:none;}
</style>

①上記CSSを追加して表示しないようにしたあと、h3の見出しを付け足す。
②関連項目ごと非表示にする。(乱暴)