ページヘッダー上のテキストを読みやすくするために影をつける

アイキャッチ画像の表示設定を「ページヘッダーの上にタイトルを表示」にしている場合は、ページヘッダー上にタイトル(や投稿日付など)が表示されます。画像によってはこのテキストが読みにくくなる場合がありますが、CSS を追加してテキストに影をつけることで読みやすくすることができます。

通常
影あり

カスタマイズ方法

CSS

次の CSS をカスタマイザーの追加 CSS に貼り付けてください。

.c-page-header__content {
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

この記事を書いた人

キタジマ タカシ

長崎県長崎市在住。地元のWeb制作会社でWebデザイナー/エンジニアとして従事した後、2015年にフリーランス [ モンキーレンチ ] として独立。WordPress のテーマやプラグイン、ライブラリ、CSS フレームワーク等、多数のプロダクトをオープンソースで開発・公開しています。

Snow Monkey オンラインコミュニティ

Snow Monkey をより良いテーマにするために、今後の機能開発等について情報共有したりディスカッションをしたりする場所です。より多くのユーザーの交流があったほうがより良いプロダクトに育っていくと思いますので、ぜひご参加ください!