【朗報】あなたのブログがプロの仕上がりに!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にする

  1. ConoHa WINGのコントロールパネルにログインします。
  2. 上部メニューの「WING」をクリックします。
  3. 左メニューの「サイト管理」>「サイト設定」>「基本設定」と進みます。
  4. 「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>

ステップ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の素晴らしい機能を活用し、
読者の心に残る、高品質なサイト制作を楽しみましょう!

\ 直ぐに連絡! /

\ いろいろ聴けます! /

\ 相談内容入力! /

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次