スポンサーリンク

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

IT

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

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

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

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

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

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

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

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

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

スポンサーリンク

simplicityのフォントを変更する

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

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

初心者がやるSimplicityカスタマイズ。もうね、疲れました。グローバルメニューとかボックスとか引用とか…。もういやだ。
やあ、Simplicityフリーク諸君。 今日もカスタマイズに精を出しているかい? 僕はもうカスタマイズは当分いいよ。 記事を書く前にもう疲れちゃった。 でもせっかくの頑張ったカスタマイズ。 少しの変化でも備忘録として残しておかないとね。   ども、Simplicityフリークのシゲ(@piece_hairworks)...

 

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

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

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

simplicityでのフォント色の変更

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

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

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

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

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

素人がSimplicity2にコピペで行った17のCSSカスタマイズを残しておくよ
このブログはSimplicityというテーマを利用して運営しています。SimplicityはWordpressの中でもかなり人気のある日本語テーマで、その名の通りシンプルさがベースにありつつも、改変の自由度が高く、多くのブログがこのテーマを

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

フォントを変更したらサイトのタイトルも変更されてしまったため修正

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

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

wordpressのサイトタイトルのフォントを変更したい|teratail
wordpressで現在サイトを作成しています。サイトのヘッダーに表示されるサイトタイトルのフォントを変更したいのですがうまく変更できません。 私が行った方法は以下の通りです。 webで使用したいフォントのttfファイルをサーバー上の以下に配置しました。 wp/wp-content/themes/

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

 

simplicityの投稿記事の幅を狭くする方法

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

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

素人がSimplicity2にコピペで行った17のCSSカスタマイズを残しておくよ
このブログはSimplicityというテーマを利用して運営しています。SimplicityはWordpressの中でもかなり人気のある日本語テーマで、その名の通りシンプルさがベースにありつつも、改変の自由度が高く、多くのブログがこのテーマを

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

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

 

 

コメント