Blogのフォントを変える

前から思っていたんだけどWinでみるとこのブログのフォントがきちゃない。また、12pixだと、ちと年寄りには、モニターの設定によっては小さすぎる。自分自身がジジイだからね。というわけで、変更しよう。
(1)テーマファイルを変更するので、ファイルの権限を書き換え可能にする。
サーバにログインして/Users/[ユーザ名]/sites/blog/wp-content/themes/[テーマ]に行く
-rwxr-xr-x@ 1 sigh staff 13190 Sep 14 2009 style.css になっているから
-rwxrwxrwx@ 1 sigh staff 13190 Sep 14 2009 style.css に変更する。そうすると、
(2)外観ーテーマの編集の
20160622style.css
のスタイルシートを開くと
20160622css_file_change
ボタンがに出てくる。書き換え可能にする必要があるわけだ。
(3)書き換える。
body { の部分を探し;

font-size: 12px;
font-family: Arial, Helvetica, Sans-Serif;

font-size: 14px;
font-family: メイリオ, Meiryo, Osaka, “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, “MS Pゴシック”, “MS PGothic”, sans-serif;

に書き換える。Win用に MS Pゴシック、Mac用に Osaka,、ヒラギノ角ゴ Pro W3、英語用にArial, Helvetica でいいんだと思うけどね。
Before After で比べてみると
Windows Chrome では
20160622style.csswin1

20160622style.csswin2
に、
Macintosh Chrome では
20160622style.cssMac1

20160622style.cssMac2
になった。
Windowsでの見栄えがよくなった。Macではごちゃごちゃした感になっちゃったけど。今度は行間を変えればいいけど、めんどいな。このままでいいや。
[ 追加 ] 2018.5.19
103行目

textarea {
	color: #2b2b2b;
	font-family: Lato, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

を以下のように変更

textarea {
	color: #2b2b2b;
	font-family: メイリオ, Meiryo, Osaka, “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, “MS Pゴシック”;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
}

(4)Footer の調整
文字を大きくしたらフッターの(編集)が2行にわたっちゃうので home,php を書き換え可能にし、

<div class="postmeta">
				<div class="postmetaleft">
					<p><?php the_time('Y年n月d日'); ?> &middot; カテゴリー <?php the_category(', ') ?></p>
				</div>
				<div class="postmetaright">
					<p><?php comments_popup_link('コメント(0)', 'コメント(1)', 'コメント(%)'); ?>&nbsp;<?php edit_post_link('(編集)', '', ''); ?></p>
				</div>
			</div>

<div class="postmeta">
				<div class="postmetaleft">
					<p><?php the_time('Y年n月d日'); ?> &middot; カテゴリー <?php the_category(', ') ?></p>
					<p><?php comments_popup_link('コメント(0)', 'コメント(1)', 'コメント(%)'); ?>&nbsp;<?php edit_post_link('(編集)', '', ''); ?></p>
				</div>
			</div>

にして、日付とカテゴリーのブロックとコメントと編集が別のブロックになっていたのを </div> <div class=”postmetaright”>を削除して1つのブロックにし2行表示にし、フッターの(編集)文字列が2行にわたって表記しないようにしてみた。
(5)タイトルの文字の色を変える
本文の文字を大きくしたらタイトルがめだたなくなっちゃったので style.css の

#content h1 a {
color: #0B3949;
text-decoration: none;
}

だったのを色を変えて

#content h1 a {
color: #FF0040;
text-decoration: none;
}

にしちゃった。
6)ファイルの権限を戻す
style.cssとhome.phpの権限を777にしたのでこれを元の755に戻す。忘れずに。
そもそも、テーマというのはデザイナーがこれが一番いいという組み合わせで作成しているのだから、どっかを変更すると、あちこち変なところが出てくる。ほかのテーマに変えたほうがいいけど、このテーマでずっと走っているから変更したくないんだよね。デザイナーがテーマを更新すると、この設定はもとにもどっちゃうんだよね。だから余り変えたくないのだけどね。

コメントを残す

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