WP更新記録:CSS変更

2016-09-18

以前から、なんだかここのブログの記事の文字の色がうっすいなぁーっとか思ってたわけなんですよ。
ディスプレイによっては、この薄いグレーがかすれたような文字に見えてしまうのです。

うちのディスプレイは、メインで使ってるノートPCに昔dellのデスクトップで使ってたdell純正のTFTモニタを2ndモニタとして接続してます。
ノートPC側のディスプレイ(きっと15inch)がメインで、サブにdellのTFTモニタ(きっと20inch)の構成で。
サブモニタ(dellのTFTモニタ)のほうがどうしてもサイズが大きいので、基本的な操作はほとんどサブ側でやっているのですが、メインモニタとバックライトの光度が違うため、サブモニタ側の文字がどうにも読みにくい。古いモニタを無理やり使ってるから仕方ないのですが。

ここまで聞いて、「老眼だろう?」と思った人は正直に手を挙げなさい!w
まだ小さい字を見るのに、腕を伸ばしてピント調節なんかしてないからね!w

CSSをいじってみよう

話を戻して、
ブログの文字が見にくいのであれば、ブログの文字の色をちょっと濃くしたらいいんじゃないの?っということで、テーマのCSSを変更ですよ。
ただ、使ってるテーマは他人の作ったものなので、VerUPされてしまうと変更した部分がもとに戻ってしまうーのですよ。

今回は、bodyの文字の色を#909090から#505050に変更します。

で、Jetpackプラグインをインストールしている場合、管理ページ内の「外観」の中に「CSS編集(CSSスタイルシートエディター)」ってのが追加されてまして、テーマのCSSを直接変更しなくてもいいようです。
コメントの下(*/の行の下)に以下のように、

の下3行を追加しました。これでブログ記事の文字色をテーマの編集のCSSをいじることなく変更することができました。

これは楽だー。

ついでに、見出しのスタイルも設定してまえー。ってことで、h2タグにfukidasiクラスを設定して

も追加。
色は黄金色で指定ですよ。大金持ちとは言わない。小金持ちになりたいからzzz

今では、見出し関係のCSSサンプルとか参考にできるところが増えてますね。
参照したのはこちら

シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50
by NxWorld

こういうサンプルを置いてくださるサイト様に感謝でございますよ。

「CSS編集」の注意点

このCSS編集ですが、テーマを変更してしまうとここで設定したCSSが消えてしまうようです。
うっかり外観のテーマを変えてしまった場合が注意かなー




Like!アイコン