SANGOのwebフォントをモリサワにする方法

WordPressテーマをSANGOにすると、どこからみてもSANGO感があるというかサルワカさんになってしまいますよね。

便利でかっこいいテーマはぜひ使って研究したいけど、SANGOですって即バレするのもなんだかなぁと思ったのでフォントをかえてみることにしました。

SANGOは何のフォントを使用しているのか

WordPressテーマ「SANGO」のこの独特のフォント感は、Google Fontsの「Quicksand」からきています。

SANGOでは、サイト内の一部の英文に「Google Fonts」のWebフォントを使用しています。使用しているのはQuicksandというフォント。丸みがあってかわいいのですよね。 初期設定では、英語だけWebフォント ...

これを、サーバーで使わせてくれるモリサワのWebフォントにかえてみれば雰囲気がかわるのでは?!と思ってレッツチャレンジ。

私はエックスサーバーなので、こちらのプラグインを使用してみます。

エックスサーバーのWebフォント機能なら「モリサワ」の書体が無料で利用可能!誰でも手軽に運用中のWebサイトの見映えを美しくすることが可能です。

CSSをいじらずにプラグインで設定

こちらのサイトを参考にしました。

こんにちは、TOMOMIです。 今朝、SANGOユーザーと思われる方から「モリサワのWebフォントが使えなくなって困っている」というコメントをいただきました。 たぶん、私がワードプレステーマをSANGOに変更した時と同じ ...

フォントテーマを比較する

エックスサーバーのプラグインにはデフォルトでフォントテーマが用意されており、

  • ベーシック
  • スタイリッシュ
  • ニュース
  • ビジネス
  • ファッション
  • エレガント
  • ポップ
  • コミカル
  • 和風
  • はんなり
  • ナチュラル
  • レトロ
  • ホラー

から選択できて簡単に設定できます。

ちょっと読みにくい字体もあるので、実機で確認しつつがいいですね。

あと、太字だとPCで間が潰れて綺麗じゃない書体もあるので要注意です。

今回はスタイリッシュを選択しました…が、スタイリッシュのせいで思わぬ弊害があちこちに出てきました!笑

ブログカードのタイトルが太字にならない…

現在、はてなブログ風のブログカードを使用しています。

WordPressのプラグイン「Pz-LinkCard」をカスタマイズして使用しています。

 WebデザイナーFAN 
WordPressでブログカードを表示させるプラグイン「Pz-LinkCard」 | WebデザイナーFAN
WordPressで、はてなブログでよく見かける「ブログカード」を表示させることができるプラグイン「Pz-LinkCard」をご紹介します。 ブログカードとは? はてなブログを見ていると、記事内で自分の記事や他のサイトの・・・

これのサイトタイトルが太字にならないなオカシイなぁ…とデベロッパーツールで調べたところ、

スタイリッシュに含まれる書体にfont-weight:boldが効いてませんでした。

「TypeSquare Webfonts Plugin」の見出しタグやリードタグに.lkc-titleを入れるだけでは足りないようなので、強調タグのところにも.lkc-titleをつっこみます。

これで強調されるようになりました!!!

スマホ版でモリサワフォントが反映されないときは…

bodyを書いてもスマホ版に反映されないな~おかしいな~と思ったら…

犯人はWP Fastest Cacheでした。

WP Fastest Cacheのモバイル設定を見直す

 

ええ。「モバイルユーザーに対してキャッシュを表示しない」へのチェックを忘れていました。

「モバイルユーザーに対してキャッシュを表示しない」にチェックを入れないと、どんなに端末側でキャッシュしてもサーバー側のキャッシュで表示されるのです!!くっそ!!

おかしいな~って何度もキャッシュしてしまったよ(笑)

あ、PCでどうしてきちんと表示されていたのかというと、「ログインユーザーに対してキャッシュを表示しない」にチェックが入っていたからです。

設定はこちらのサイトを参考にすると良いと思います。

どーもセブでエンジニアリングをしている僕です。 今日はWP Fastest Cacheというプラグインひとつ入れたらサイトスピードが爆速化した話です 設定画面もありますので、ご覧ください 結果からいうとPageSpeed Insights にて モバイルサイトは54→78ポイント=24ポイン...

おわりに

SANGOの見出しなどスタイル機能は本当に充実しているし、ショートコードも本当にスゴイの一言です。

opencageのハミングバードストークも、どこかで使われているのを見るたび、「あっ…わかります」って感じでした。

この素敵な性能と機能を活かしつつ、いかに見た目の方でSANGO感を減らして自分のホームページらしさを出していくかが重要になりそうですね!!