前の記事でブログのフォントを変えて見やすくすることを試みたみたわけだ。
気がついたのは、これまでNitrous というテーマを使っていたわけだが、これはなんだか古すぎるテーマであることだ。新しいのにしてみる。
テーマは一杯あるんだけど、なるべくシンプルなのがいいというわけで、Wordpress の２年前のデフォルトのTwenty Fourteen というのを使うことにした。両サイドにウィジェットを配置することができる。３コラムのページは幅がきついのは昔の小さなモニターだったころの印象だ。今は、皆デカイモニターがあるからいいだろ。どっちにしろスマホ対応は作る気ないしね。
このテーマも本文のフォントに日本語用のフォントがないから、前の記事と同じく；
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
} body, button, input, select, textarea { color: #2b2b2b; font-family: Lato, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; } |
となっているのを
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
} body, button, input, select, textarea { color: #2b2b2b; font-family: メイリオ, Meiryo, Osaka, “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, “ＭＳ Ｐゴシック”, “MS PGothic”, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; } |
とした。フォントの大きさもちと小さくした。変更はこれだけにしよう。変更したことをどんどん忘れちゃって、誰かの実験じゃないけど、再現性に欠けちゃうからな。ま、実験ノートならぬ変更記録はとってあるけどね。
このTwenty Fourteen というテーマはblockquate 内の文字がちと大きくなっていてグレイでわかりにく。そこでstyle.css の一番最後に
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/* *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の書き換えた部分をさらに
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/* *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を見つけ出し）
|
1 2 3 4 5 6 7 8 9 10 |
::selection { background: #24890d; color: #fff; text-shadow: none; } ::-moz-selection { background: #24890d; color: #fff; text-shadow: none; |
を
|
1 2 3 4 5 6 7 8 9 10 |
::selection { background: #24890d; color: #999; text-shadow: none; } ::-moz-selection { background: #24890d; color: #fff; text-shadow: none; |
と selsection の部分の color #fff を color #999 に書き換えた。これで日本語変換時にも文字が黒く見える。
ブログを楽しく拝見させていただいております。
余計なお世話だと思いますが
cssコードは
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;
}
よりも
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;
}
をおすすめします。
後述のcssは、cssの不要な記述を削除・修正したものです。
■ 12行目のmargin-bottom: 0px;を削除。
■ 14行目のpadding:10px 10px 0px 10px;;の「;」を1つに修正。
おそらく、修正後も画面表示は変わらないので、修正しなくても問題ないとは思いますが。
そもそも、cssのコピー元
「twentyfourteenの blockquote引用 スタイルをカスタマイズする！」で表示しているコードが間違っているので、しょうがないのです。
＞くまごろう さん
修正ありがとうございます。早速変更し、確認しました。
CSは、コピペで動けばいいやというわけで、ろくにチェックしませんでした。はじめから書くのはしんどいので。
論文筆頭著者のコピペを批判する資格がないな。こりゃ。