お名前.comでもモリサワフォントが無料で使えるようになりました。

こんにちは。

最近googleのSEOの変化からかなりアクセスが減ってしまってかなり気持ちが萎え気味ですが、それでもアクセスを集める方法を模索していました。

私はお名前.comでサーバーを借りているのですが（GMO）そんな中久々にサーバーの管理画面に入りました。

お名前.comで30種類のモリサワフォントが無料で使えるようになっていた

ドメイン（URL）1個限定でモリサワフォントが無料で使える。

もともと昨年からさくらサーバーでは同じように30種類の書体を無料で使う事が出来ていたみたいですが恐らく今回全く同じサービスをお名前.comでも始めたみたいですね。

2017年4月6日から開始したそうです。

これはもちろんWordPressでもHTMLでも両方で使うことができます。

各設定方法はお名前.comのサーバーナビの管理画面で確認することができますが、今回私はWordPressでモリサワフォントを利用できるよう設定したのでそれを記載していきたいと思います。

ちなみにサーバーの管理画面での設定とWordPressの管理画面での設定をそれぞれやることがあります。

割と簡単だと思ったのでそこまで気を貼らなくて大丈夫だと思います。

WordPressでモリサワフォントを設定してみよう

まずはサーバーナビの管理画面の左のカラムにある、「ご利用サービス確認」を押し、「プラン」を押します。

すると真ん中あたりにコントロールパネル情報あるのでログインをします。

すると画面がコントロールパネルに切り替わります。

ここでサービス設定のWebフォントを選びます。

ここではフォントを使いたいドメインを選びます。

これでサーバー側の設定は終了です。

次にWordPress側の設定をしていきます。

と言ってもプラグインをインストールするだけなのでラクチンです。

WordPressの管理画面にログインし、プラグインの新規追加を選びます。

検索窓に「TS Webfonts for お名前.com」と入力するとこのような画面になるので有効化を押します。

これでモリサワフォントが使えるようになりました。

最後に実際に30種類の中からどれを使うかの設定をして終了です。

管理画面の左に「TypeSquare Webfonts」という項目が増えていると思うのでそこを選びます。

すると以下のような画面になります。

ここではデフォルトで「テーマ」が決まっていてそれを選んでもいいですし上級者ようにすべて自分好みのカスタムをすることも可能です。

私はカスタムにしてみました。

この画面ではフォントの形がわからないのでお名前.comの管理画面上にあるフォント一覧を見ながら作業するとわかりやすいと思います。

サンプル一覧

で更新ボタンをおすとこのブログのようにフォントが変わっていると思います。

太字はわかりやすいですが、本文はあまり変化がわからないのは私だけ・・・？ｗ

そして解像度の高いスマホで見るとかなり可愛いフォントになっていますが、解像度の低いPCのディスプレイだとなんか若干汚く見える事も・・・

ま、しばらくこれで様子を見ましょう。

ちなみにモリサワフォントを使う事でこんなメリットもあるそうですよ。

Webフォント使用でのSEO対策

Webフォントを使用したテキストは、完全にテキストとして認識されます。そのため、デザインを崩すことなく、Webサイトの検索性が向上し、SEO対策としての効果も見込まれます。

ほんとですかね・・・・・・

ま、やらないよりはやったほうがいい程度だと思いますがポジティブにとらえておきましょう。

ちなみにHTML版ではサーバーの登録までは一緒でその後HTMLにスクリプトタグを挿入してcssのフォントを変えればできるそうです。

こっちもそこまで難しい印象はありませんね。

みなさんも気になるフォントがある場合ぜひやってみてください！

お名前.comレンタルサーバー

あれ？Facebookのプレグインが表示されなくなった

なぜかわかりませんが私が使いたいモリサワフォントをページ全体にもしくはFacebookのプラグインに適用されるとFacebookのプラグインが正常に機能しなくなりました。

最初はコードを消してしまったのかと焦りましたが原因とモリサワフォントでした。

で、おそらくFacebookのプラグインはクラス名が「.fb-page」になっていると思うのでこのクラス名だけメイリオに戻しました。

すると正常にFacebookのプラグインが表示されました。

一安心。

なんでだろうな・・・・まとりあえず対応できたのでよかったです。

以下ソースよければ参考にしてください。

.fb-page{
font-family: ‘Meiryo’,”ヒラギノ角ゴ Pro W3″,”ＭＳ Ｐゴシック”,”Osaka”, sans-serif;
}