simplicityをおしゃれにするためのフォント変更と幅変更

ブログを立ち上げるときに、どのテンプレートのするか悩んで探した結果たどり着いたのがsimplicity2でした。

よくブログで見かけるデザインだなというのと、すっきりしている、カスタマイズもいろんな情報があってわかりやすいというので採用しました。

ですが、しばらく使っているうちに、なんとなく違和感が。
他のおしゃれなブログのデザインて、SANGO、STORKなど、見た目もおしゃれで読みやすかったんですね。

そうなると自分が使っているsimplicityってどうなのかと悩みました。

悩んだ理由は記事の見た目がおしゃれに感じない、記事幅が横に広く目を左右する距離が長いので読みづらいといったデメリットが。

でも、テンプレートを買う余裕はないので、なんとか無料テンプレートがないか探したのですが、これが帯に短したすきに長しでした。

そうなったらせめて、自分が好みでない箇所だけでも変えたらいいのではと思ってカスタマイズすることに。

simplicityでも有料テーマにちょっと近づくカスタマイズだったら、だいぶ改善できそうだと思いチャレンジしたのですが、これが試行錯誤しました。

そこで、ここだけ直したら、だいぶ改善できるよというのと、作業に苦労したので参考としてまとめておきます。

simplicityのフォントを変更する

よくブログに書かれているフォント、なんだかおしゃれな文字だなと思っていたので、調べてみたらだいたい「游ゴシック」が使われていました。

参考にしたのは以下のサイトです。

調べると、simplicityのフォント変更をしているサイトは多数あり、最初に目についたものから試していたのですが、なぜか変更できず。

いくつか探した中で游ゴシックに変更できたのがこちらのサイトに記載されているコードでした。

なお、このタグに書かれている
/*height:100vh;*/
は、コメントですのでコピペの必要はありません。（なくても動作します）

今まで特に気にしていなかったのですが、おしゃれなデザインのブログのフォント色って黒じゃないんですよね。

simplicityの詳細なフォント色は見ていないのですが、何も設定しないと黒いです。

ですが、黒いよりはグレーのほうが読みやすいため、少し変えてみることに。

このままでもいいかなと思っていたのですが、せっかくであれば、なんとなく雰囲気を出したかったのでフォント色も変更しました。

参考にしたのは以下のサイトです。

font-colorで設定するグレーのカラーコードですが、11111～55555までとなっています。数値が低いと黒く、高いと薄くなります。
最初11111でもよさそうだと思っていたのですが、あまりに黒に近かったため、33333で設定してみました。

simplicityのフォントを游ゴシックにしようとしてfont-familyを追加したのですが、本文、見出し以外にサイトタイトルにも反映されてしまいました。

英文字を游ゴシックにすると、文字回りがすかすかして気持ち悪かったので、元のsimplicityの設定にするために、どこにタグを書いたらいいのかを参考にしたサイトです。

サイトタイトルだけのタグに、あらためてsimplicityの文字設定を追加しました。

本当は、ブログの表示をサイドバーと記事とで、ブラウザの幅が変わっても表示させたかったのですが、そこまで手入れができなかったので、せめて投稿記事の幅だけでも狭くしようと探しました。

参考にしたサイトは以下のサイトです。

実はこちらのサイト、フォント色の変更の参考にしたサイトと同じサイトです。

紹介されている方法はピクセルでの指定なのですが、他のサイトではパーセントで指定する方法を紹介しているところもありました。