前の記事でブログのフォントを変えて見やすくすることを試みたみたわけだ。
気がついたのは、これまでNitrous というテーマを使っていたわけだが、これはなんだか古すぎるテーマであることだ。新しいのにしてみる。
テーマは一杯あるんだけど、なるべくシンプルなのがいいというわけで、Wordpress の2年前のデフォルトのTwenty Fourteen というのを使うことにした。両サイドにウィジェットを配置することができる。3コラムのページは幅がきついのは昔の小さなモニターだったころの印象だ。今は、皆デカイモニターがあるからいいだろ。どっちにしろスマホ対応は作る気ないしね。
このテーマも本文のフォントに日本語用のフォントがないから、前の記事と同じく;
} body, button, input, select, textarea { color: #2b2b2b; font-family: Lato, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; }
となっているのを
} body, button, input, select, textarea { color: #2b2b2b; font-family: メイリオ, Meiryo, Osaka, “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, “MS Pゴシック”, “MS PGothic”, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; }
とした。フォントの大きさもちと小さくした。変更はこれだけにしよう。変更したことをどんどん忘れちゃって、誰かの実験じゃないけど、再現性に欠けちゃうからな。ま、実験ノートならぬ変更記録はとってあるけどね。
このTwenty Fourteen というテーマはblockquate 内の文字がちと大きくなっていてグレイでわかりにく。そこでstyle.css の一番最後に
/* *blockquoteformat * ----------------------------------------------------------------------------- */ blockquote { color: #2b2b2b; font-size: 100%; font-style: italic; font-weight: 300; line-height: 1.5; margin-bottom: 0px; position:relative; padding:10px 10px 0px 10px;; border:1px dotted #333; background:#f5f5f5; margin-bottom:20px; }
を挿入した。枠線でかこんだわけだ。「twentyfourteenの blockquote引用 スタイルをカスタマイズする!」のコピーだ(コメント欄参照のこと)。
[ 追記 ]2016.6.28
コメントで くまごろう さん が訂正すべきと教えてくれたのでstyle.cssの書き換えた部分をさらに
/* *blockquoteformat * ----------------------------------------------------------------------------- */ blockquote { color: #2b2b2b; font-size: 100%; font-style: italic; font-weight: 300; line-height: 1.5; position:relative; padding:10px 10px 0px 10px; border:1px dotted #333; background:#f5f5f5; margin-bottom:20px; }
と書き換えた。
さらにChromeだと、コメント欄への日本語入力の場合、変換すると候補文字か見えない(白いから)ということが発生するのでstyle.css の 2.0 Repeatable Patterns の直前にある(検索でselectionを見つけ出し)
::selection { background: #24890d; color: #fff; text-shadow: none; } ::-moz-selection { background: #24890d; color: #fff; text-shadow: none;
を
::selection { background: #24890d; color: #999; text-shadow: none; } ::-moz-selection { background: #24890d; color: #fff; text-shadow: none;
と selsection の部分の color #fff を color #999 に書き換えた。これで日本語変換時にも文字が黒く見える。