『ディスディスブログ』のテーマを変更しました。新しく使うことにしたテーマは「Written」です。
以前は「Simple Gray」を使っていて、このブログの他のはてなブログは未だ「Simple Gray」を使わせてもらっていますが、年も変わったことですし少し気分を変えてみようと本ブログのみテーマを変えることにしました。
はてなブログのテーマストアを見ると、「Written」は人気の3位になっているみたいです。
「Written」は、はてなブログを始めた当初からインストールしていたテーマの一つで、当時も「Simple Gray」とどちらをブログに採用するかで悩んでいた記憶があります。
「Written」を採用しなかった理由は、ブログタイトル部分や見出し部分のフォントがボールド過ぎることでした。それ以外は全く問題ありません、むしろ超好みです。「Simple Gray」とどちらが優れている・劣っているということではなかったはずです。
「Written」のフォントウェイトだけが原因であるのなら、CSSでフォントを指定すればいいんじゃないかと、はてなブログを始めてか9ヶ月程経ってようやく気が付きました。私はどうも用意されたテンプレートはあまり弄りたくない人間でして、これまでも極力手を付けないでいましたが……ブログに私のオリジナリティをほんの少しでも出してみようと気が変わりました。
はてなブログのフォント変更
はてなブログのテーマにフォント変更を施そうと思い、ネットで調べたところ『IT系女子ログ』さんの記事を見つけました。そこにフォントの変更方法がありました。しかも、そちらでは「游ゴシック」なるフォントを指定していて、そのフォントがなかなか良さそうだったので、一緒にそちらを採用してみることに。
body {
font-family: "Helvetica Neue" , Helvetica , Arial , Verdana , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}
#blog-title h1{
font-family: "Helvetica Neue" , Helvetica , Arial , Verdana , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}
h1.entry-title a {
font-family: "Helvetica Neue" , Helvetica , Arial , Verdana , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
} こちらのコードを、「ダッシュボード」→「デザイン」→「カスタマイズ」→「デザインCSS」の順に選択していき、「デザインCSS」内に上記コードをペーストし、「変更を保存する」ボタンを押すだけ完了です。
『IT系女子ログ』さんで紹介されていたコードをそのままコピペするだけでは、ブログタイトルまでは変更されませんでした。私のやり方が悪かったのかもしれません。私の場合は「#blog-title h1」にも同じようにフォントを指定してあげたところ反映されました。
Font−familyのベストな書き方 2015年版 | それからデザイン スタッフブログ
フォント指定に関しては『それからデザイン スタッフブログ』さんの「Font−familyのベストな書き方 2015年版」の記事も参考にさせていただき、自分なりに変更しています。上記のフォント指定は暫定です。このまま少し様子を見て、游ゴシック体の視認性などを自分なりに確かめた後に、継続するなり変更・削除するなりを決定するつもりでいます。
その他
『wepli.2』さんの「はてなブログでカスタマイズした８つのデザイン！全てのブログ初心者に捧ぐCSSとHTMLの備忘録」の記事も大いに参考にさせていただきました。特にwidthを変更するカスタマイズはまんま使わせていただいています。
他にも、ヘッダに画像を入れてもいますが、ロードに時間がかかるようなら別の画像に変更するか削除するかします。
おわりに
いやぁ。初めてはてなブログを私なりに大規模に変更を施したので、少し疲れました……。wepli.2さんの記事を読む限り変更できそうなところはまだ山程ありますから、今後変更をするかもしれません。しないかもしれません。
追記
游ゴシックのフォント指定は2016年1月19日現在外しています。現在の指定は上記コードから游ゴシックを外しているだけです。外した理由は、WindowsのOSで游ゴシック体を見ると読みづらいという意見を目にしたからです。私はMacを使っているためわからないのですが、読みづらいなら止めておこうかと思い、外しました。
dysdis.hatenablog.com
