WordPressの文字デザインを変更する

WordPressの文字デザインを変更する

WordPressの文字デザインを変更する

WordPressの文字デザインを変更する

こんにちは!
ペットライフクリエイター獣医師MicVet です。
小動物臨床6年,ペットフードメーカなどで約1500件の動物病院を担当,動物病院スタッフ向けに毎日がちょっと楽しくなる情報発信中です。

このブログではWordPressの文字デザインを変更する方法についてご紹介します。

スポンサーリンク

WordPressを使うならロリポップ!
簡単インストール完備で楽々スタート!

  

あなたのブログイメージをイメージ通りに伝える文字デザインの設定

ブログを書いている本人が見ている文字
ブログ記事に使用されている文字が異なる場合があります。

例えばこんな感じ↓

ブログを書いている本人が見ている文字と
ブログ記事に使用されている文字が異なる場合があります。

サーバーに記録されている文字と実際に表示されている文字は文字情報を受け取る端末(デバイス)によって変化することがあるのです。

ブログ記事を見る端末(デバイス)によって文字のデザインが違うとブログのイメージも違ってみえる事があります。

伝えたいメッセージをあなたのイメージ通りに表現するためにもWordPressに文字デザインを設定する事をおすすめします。

  

こんな風に整えます

  

webフォントとは?

  

webフォントとは?

あなたのブログ記事を

パソコンで見ても,スマートフォンで見ても,どんな端末で見ても同じ文字デザインで読むことができるようにするにはwebフォントを使う方法があります。

webフォントとはインターネット上で共通して使える文字デザインのことでWordPressに設定を組み込むことであなたのブログ記事に使われている文字のデザインを統一することができます。

スポンサーリンク

WordPressを使うならロリポップ!
簡単インストール完備で楽々スタート!

  

GoogleFontからデザインを選ぶ

  

GoogleFontからデザインを選ぶ

まずはこちらのリンクからブログのイメージに合わせたお好きな文字を選びます。

    

こちらがGoogleFontの画面です。
英語のページですがお気に入りの文字デザインを見つける方法はシンプルです。

     

    

GoogleFontから日本語デザインを選ぶ

  

GoogleFontのページで左上にあるlanguageから日本語Japaneseを選びます。

GoogleFontから日本語デザインを選ぶ

GoogleFontのページで左上にあるlanguageから日本語Japaneseを選びます。

GoogleFontのページで左上にあるlanguageから日本語Japaneseを選びます。

GoogleFontのページで左上にあるlanguageから日本語Japaneseを選びます。

日本語に対応した文字デザイン一覧が表示されます。
この中からお好きな文字デザインを選びます。

GoogleFontのページで左上にあるlanguageから日本語Japaneseを選びます。

GoogleFontのページで左上にあるlanguageから日本語Japaneseを選びます。

   

選んだ文字デザインをWordPressに設定する

  

GoogleFont上で好きなデザインを選んだらWordPressに設定をします。

設定方法は大きく2通りあります。

・WordPressの管理画面に直接書き込む
・プラグインを使って設定する

   

WordPressの管理画面に直接書き込む

   

結論から言うとうまくできなかったのであまりおすすめしません。

プログラミングの知識がまったくない私にとってこれはかなりハードルが高かったです。

GoogleFontの中からお好きな文字デザインを決めたら文字デザインの左上にある赤い+のマークをクリックします。

GoogleFontの中からお好きな文字デザインを決めたら文字デザインの左上にある赤い+のマークをクリックします。

すると画面右下に新しいウィンドウが出現します。

すると画面右下に新しいウィンドウが出現します。

新しいウィンドウを開くと

新しいウィンドウを開くと

WordPressでwebフォントを設定するために必要なコードなどをコピーすることができるようになります。

   

<head></head>用のコード

<head></head>用のコード

この部分をコピーしてWordPressにコードを書き込みます。

  

WordPressのCSSに書き込む場合

WordPressのCSSに書き込む場合

Font-familyの部分にwebフォントの名前を書き入れます。

  

プラグインを使って設定する

  

プログラミングの知識がないのでこのプラグインを利用した方法が便利でした。

今回使ってみたプラグインはEasy Google Fontsです。

  

Easy Google Fonts をインストールする

  

WordPressの画面からプラグインをクリックします。

WordPressの画面からプラグインをクリックします。

  

新規プラグイン追加をクリックします。

新規プラグイン追加をクリックします。

   

キーワードを入力する空欄に Easy Google Fonts と入力します。

キーワードを入力する空欄に Easy Google Fonts と入力します。

   

Easy Google Fonts が表示されたらインストール,有効化します。

有効化したら Easy Google Fonts のインストール終了です。

スポンサーリンク

WordPressを使うならロリポップ!
簡単インストール完備で楽々スタート!

   

文字デザインの設定

Easy Google Fonts のインストールが終了したらいよいよあなたのブログに使用する文字のデザインを設定します。

設定方法はWordPressの外観からカスタマイズをクリックします。

設定方法はWordPressの外観からカスタマイズをクリックします。

無事にインストールと有効化ができていたらTypograplyという項目が現れます。

無事にインストールと有効化ができていたらTypograplyという項目が現れます。

 

Typograply をさらにクリック!

 Typograply をさらにクリック!

  

先程Googleフォントで選んだお好みの文字デザインを選び公開をクリックしたら完成です!!

こんな感じに変化します。(え?そんなに変わってない!?笑)
お疲れさまでした。

明日も素敵な1日をお過ごしください。

ブログ運営カテゴリの最新記事