2017/08/20
さっそくマテリアルを使って頂いた@hiroumi3799さんのご指摘を受けて、いくつかの機能を追加したマテリアル1.2を公開しました。
sponsored link
追加した機能
もともとメインカラー背景には白いテキスト、メインカラーのテキストには白い背景を使っていたので、メインカラーには濃い(暗い)色を使ってもらえれば、テキストも見やすくなるように設計していました。
が、当然薄めの色をメインカラーに使いたい人もいらっしゃいますよね。その場合、薄めの色の背景の上に白のテキストが乗ってしまい、読めるか!っていう状態になってしまいます。
それではダメだということで、配色機能に一工夫加えました。
メインカラー背景に乗せるテキストの色
ヘッダー部分の背景色がメインカラーです。その上に乗っているテキストは、ブログタイトルとキャッチフレーズです。メインカラーを薄い色にした場合、ブログタイトルとキャッチフレーズが見えにくくなってしまいます。
このままではメインカラーに薄い色を選べないので、テーマカスタマイザーのサイトタイトルとキャッチフレーズの設定で、タイトル及びキャッチフレーズの文字色を選べる機能を追加しました。
試してみて、メインカラー背景に映えるテキストカラーを選ぶようにして下さい。
そして、moreボタンも同様にメインカラーの背景に白いテキストが乗っていたので、このmoreの文字色も、ブログタイトル及びキャッチフレーズの文字色と同じ色になるようにしました。
見出し文字に影をつける
トップページやサイドバーの見出しテキストの色は、メインカラーが使われています。そしてそれらは白っぽい背景の上に乗っています。なので、メインカラーが薄い場合、非常に見えにくくなります。
そこで、テーマカスタマイザーから簡単にテキストに影をつけられるようにしました。
ここにチェックを入れれば、全ての見出し文字(記事ページのh2にも)テキストシャドウが入ります。
これなら、字が見えなくなることはないと思います。
アンカーテキストを分かりやすく
サイドバーのアンカーテキスト(リンクしているテキスト)の色が黒くて分かりづらかったのを青っぽい色にしておきました。
改善案に感謝
@hiroumi3799さんのおかげで、ちょっと使い勝手がよくなったかなと思います。改善案に感謝です。
もしマテリアルを使って頂いて、気になることや困ったことがあればご遠慮なく言っていただけると嬉しいです。
コメント
マテリアル、大変気に入り使わせて頂いています。有難うございます。
こちらのサイトもよく見させていただいています。
大変初歩的な質問で申し訳ないのですが、
投稿の記事の中の見出し(h2やh3)をcssで個別に設定してもメインカラーで指定した色から変わらないのですが、何かやり方があるのでしょうか?
他の設定はきちんと反映されるのですが、色だけが変わりません。
もし、何かやり方があれば教えていただけませんでしょうか?
お手数ですが宜しくお願い致します。
by みき 2015年7月24日 3:17 PM
それは、テーマカスタマイザーが噛んでるからなんです。
「!important」を付ければ大丈夫です。
h2{
background-color: #aaa !important;
}
また記事にします。非常にいい質問でした(^^)
by Nobuo@管理人 2015年7月24日 3:40 PM
迅速なご回答、誠に有難うございます。
早速やってみたところ、きちんと色が変わりました。
本当に助かりました。有難うございました。
また訪問させていただきます。
by みき 2015年7月25日 12:29 PM
いつもお世話になっております。
質問なのですが、背景色を白、メインカラーも白にした場合サイドバーの文字が見えなくなってしまいます。
ヘッダーの画像背景を白で作り、メインカラーを他の色にすると今度はヘッダー画像の上下にメインカラーが挟む形で表示されてしまいます。
あまりコードに詳しくないもので、色々と調べてはみましたが、言葉が難しく解決に至りませんでした。
申し訳ないのですがご教授頂けましたら助かります。
by 宮本 2016年7月26日 10:03 AM