Blogのフォントを変えるーその2

前の記事でブログのフォントを変えて見やすくすることを試みたみたわけだ。
気がついたのは、これまで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 に書き換えた。これで日本語変換時にも文字が黒く見える。

「Blogのフォントを変えるーその2」への2件のフィードバック

  1. ブログを楽しく拝見させていただいております。
    余計なお世話だと思いますが
    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引用 スタイルをカスタマイズする!」で表示しているコードが間違っているので、しょうがないのです。

  2. >くまごろう さん
    修正ありがとうございます。早速変更し、確認しました。
    CSは、コピペで動けばいいやというわけで、ろくにチェックしませんでした。はじめから書くのはしんどいので。
    論文筆頭著者のコピペを批判する資格がないな。こりゃ。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です