【朗報】あなたのブログがプロの仕上がりに!ConoHa WINGの無料モリサワフォントで差をつけよう
「もっとブログのデザイン性を上げたい…」「でも、専門的な知識はないし…」
そんな風に感じているあなたに、朗報です。
もし、あなたがレンタルサーバー「ConoHa WING」を利用しているなら、
たった数クリックで、プロのデザイナーが使うような美しいフォントを
無料であなたのサイトに導入できることをご存知でしたか?

実は、ConoHa WINGユーザーは、
フォントのトップメーカーであるモリサワから提供される
高品質なWebフォント33書体を、
なんと無料で利用することができるのです。
これにより、これまで画像でしか表現できなかったような、
美しく、想いの伝わるテキスト表現が、
あなたのブログでも手軽に実現可能になります。
今回は、この素晴らしい特典を最大限に活用し、
あなたのWebサイトをワンランク上のクオリティに引き上げる方法を、プ
ロのブロガーである私が、分かりやすく解説します。
なぜ今、Webフォントなのか?知っておきたいメリット・デメリット
「そもそもWebフォントって何?」「使うとどんないいことがあるの?」
そんな疑問をお持ちの方のために、まずはWebフォントの基本からご説明しましょう。
Webフォントとは、閲覧する人のパソコンやスマートフォンに
インストールされているフォント(デバイスフォント)に依存せず、
インターネット上のフォントデータを読み込んで表示させる技術のことです。
これにより、どの端末で誰が見ても、
あなたが意図した通りの美しいフォントで
文章を表示させることができます。
Webフォントの主なメリット
メリット | 詳細 |
デザイン性の向上 | サイトのブランドイメージや世界観に合わせたフォントを選ぶことで、読者に与える印象を大きく変え、他サイトとの差別化を図ることができます。 |
SEOに強い | テキストを画像にする必要がないため、検索エンジンが文章を正しく認識し、SEO(検索エンジン最適化)の観点からも有利に働きます。 |
更新・修正が簡単 | テキスト情報なので、文章の修正や変更が容易です。画像を作り直す手間がなく、メンテナンス性に優れています。 |
アクセシビリティ向上 | 自動翻訳や音声読み上げ機能にも対応しやすく、より多くの人が情報にアクセスしやすくなります。 |
知っておきたいデメリット
もちろん、メリットばかりではありません。
デメリットも理解した上で、賢く活用しましょう。
- 表示速度への影響
- フォントデータを読み込むため、ページの表示速度がわずかに遅くなる可能性があります。
しかし、ConoHa WINGの高速なサーバー環境と、適切な使い方をすれば、
その影響は最小限に抑えられます。
使用するフォントの種類を2〜3種類に絞るのがポイントです。
- フォントデータを読み込むため、ページの表示速度がわずかに遅くなる可能性があります。
- 導入に少しだけ手間がかかる
- 設定には、コントロールパネルの操作や、
場合によってはHTMLの編集が必要になります。しかし、
この記事を読めば誰でも簡単に設定できるように、
手順を詳しく解説しますのでご安心ください。
- 設定には、コントロールパネルの操作や、
ConoHa WINGで使える!おすすめモリサワフォント
33書体も使えるとなると、どれを選んで良いか迷ってしまいますよね。
そこで、ブログの印象を格上げする、
特におすすめの書体をいくつかご紹介します。
- A1明朝(えーわんみんちょう)
- 上品で、どこか温かみのある明朝体。丁寧な文章や、落ち着いた雰囲気のブログにぴったりです。本文に使うと、ぐっと読みやすく、洗練された印象になります。
- リュウミン
- キリッとした端正な表情が特徴の、プロも愛用する定番の明朝体。信頼性や権威性を伝えたい記事におすすめです。見出しに使うと、記事全体が引き締まります。
- ゴシックMB101(ごしっくえむびーいちまるいち)
- 力強さと安定感を兼ね備えたゴシック体。視認性が高く、キャッチーな見出しや、読者の注意を引きたい箇所に最適です。
これらのフォントを、記事のタイトル、見出し、本文で使い分けるだけで、驚くほどブログ全体のデザイン性が向上します。ぜひ、あなたのブログに最適な組み合わせを見つけてみてください。
【簡単3ステップ】ConoHa WINGでモリサワフォントを設定する方法
それでは、実際にConoHa WINGでモリサワフォントを利用する手順を見ていきましょう。
ステップ1:ConoHa WING コントロールパネルでWebフォントをONにする
- ConoHa WINGのコントロールパネルにログインします。
- 上部メニューの「WING」をクリックします。
- 左メニューの「サイト管理」>「サイト設定」>「基本設定」と進みます。
- 「Webフォント」という項目を見つけ、「利用設定」を「ON」に切り替えます。
- 注意: モリサワWebフォントは、サブドメインを含めて3ドメインまで利用可能です。
ステップ2:サイトにスクリプトを設置する
利用設定をONにすると、あなたのサイトでWebフォントを読み込むための専用コード(スクリプトタグ)が発行されます。これを、サイトのHTMLに埋め込みます。
- WordPressをご利用の場合:
- ConoHa WINGの「かんたんインストール」でWordPressをセットアップした場合、多くは専用のプラグインが自動でインストールされており、簡単な設定でフォントを利用できます。
- プラグインがない場合は、テーマのヘッダーを編集できる機能(多くのテーマに備わっています)や、専用のプラグイン(例:「Insert Headers and Footers」など)を使って、
<head>
内に指定のスクリプトタグを貼り付けます。
- HTMLでサイトを作成している場合:
- 全てのHTMLファイルの
<head>
タグ内に、コントロールパネルに表示されているスクリプトタグをコピー&ペーストします。 - 例:
<script type="text/javascript" src="//code.typesquare.com/static/xxxxxxxx/tsxxxx.js" charset="utf-8"></script>
- 全てのHTMLファイルの
ステップ3:CSSでフォントを指定する
最後に、サイトのどの部分に、どのフォントを使いたいかをCSSで指定します。
例えば、ブログ記事の見出し(h2タグ)に「リュウミン」を、本文(pタグ)に「A1明朝」を使いたい場合は、以下のようにCSSファイルに記述します。
CSS
h2 {
font-family: "Ryumin Pro", serif;
}
p {
font-family: "A1 Mincho", serif;
}
フォント名は、ConoHa WINGのサポートページにある利用可能なフォントリストで確認できます。日本語名やスペースを含むフォント名は、" "
(ダブルクォーテーション)で囲むのを忘れないようにしましょう。
【東大阪商工会議所 受講生限定】特別サポートのお知らせ
この記事を読んで、「ぜひ試してみたいけど、
自分一人でできるか少し不安…」と感じた方も
いらっしゃるかもしれません。
そこで、東大阪商工会議所の第6回までのWeb活用塾の受講生で、
ConoHa WINGをご利用の方を対象に、このモリサワフォントの設定を
1時間無料でサポートさせていただく特別キャンペーンを実施します!
- 「コントロールパネルの操作がわからない」
- 「CSSの書き方がわからない」
- 「自分のブログに合ったフォントを選んでほしい」
など、どんなお悩みでも構いません。
この機会に、プロのサポートを受けながら、
あなたのブログを劇的に変身させてみませんか?
ご希望の方は、お気軽にご連絡ください。
美しいフォントは、あなたの言葉にさらなる力を与えてくれます。
ConoHa WINGの素晴らしい機能を活用し、
読者の心に残る、高品質なサイト制作を楽しみましょう!