以前から、なんだかここのブログの記事の文字の色がうっすいなぁーっとか思ってたわけなんですよ。
ディスプレイによっては、この薄いグレーがかすれたような文字に見えてしまうのです。
うちのディスプレイは、メインで使ってるノートPCに昔dellのデスクトップで使ってたdell純正のTFTモニタを2ndモニタとして接続してます。
ノートPC側のディスプレイ（きっと15inch）がメインで、サブにdellのTFTモニタ（きっと20inch）の構成で。
サブモニタ（dellのTFTモニタ）のほうがどうしてもサイズが大きいので、基本的な操作はほとんどサブ側でやっているのですが、メインモニタとバックライトの光度が違うため、サブモニタ側の文字がどうにも読みにくい。古いモニタを無理やり使ってるから仕方ないのですが。
ここまで聞いて、「老眼だろう？」と思った人は正直に手を挙げなさい！ｗ
まだ小さい字を見るのに、腕を伸ばしてピント調節なんかしてないからね！ｗ
CSSをいじってみよう
話を戻して、
ブログの文字が見にくいのであれば、ブログの文字の色をちょっと濃くしたらいいんじゃないの？っということで、テーマのCSSを変更ですよ。
ただ、使ってるテーマは他人の作ったものなので、VerUPされてしまうと変更した部分がもとに戻ってしまうーのですよ。
今回は、bodyの文字の色を#909090から#505050に変更します。
で、Jetpackプラグインをインストールしている場合、管理ページ内の「外観」の中に「CSS編集（CSSスタイルシートエディター）」ってのが追加されてまして、テーマのCSSを直接変更しなくてもいいようです。
コメントの下（*/の行の下）に以下のように、
/*
カスタム CSS 機能へようこそ。
使い方についてはこちらをご覧ください
(英語ドキュメンテーション)。http://wp.me/PEmnE-Bt
*/
body {
color: #505050;
}の下３行を追加しました。これでブログ記事の文字色をテーマの編集のCSSをいじることなく変更することができました。
これは楽だー。
ついでに、見出しのスタイルも設定してまえー。ってことで、h2タグにfukidasiクラスを設定して
h2.fukidasi {
position: relative;
padding: .5em .75em;
background-color: #e6b422;
border-radius: 6px;
margin-bottom: 30px;
}
h2.fukidasi:after {
position: absolute;
top: 100%;
left: 30px;
content: '';
width: 0;
height: 0;
border: 10px solid transparent;
border-top: 15px solid #e6b422;
}も追加。
色は黄金色で指定ですよ。大金持ちとは言わない。小金持ちになりたいからzzz
今では、見出し関係のCSSサンプルとか参考にできるところが増えてますね。
参照したのはこちら
こういうサンプルを置いてくださるサイト様に感謝でございますよ。
「CSS編集」の注意点
このCSS編集ですが、テーマを変更してしまうとここで設定したCSSが消えてしまうようです。
うっかり外観のテーマを変えてしまった場合が注意かなー
コメント