カスタマイズ

【AFFINGER5】フォントカスタマイズでイメージをガラッと変えてみよう!

更新日:

AFFINGER5,フォントカスタマイズ

こんにちは、SHINでございます♪

 

今回、AFFINGER5のフォントデザインをガラッと変える2つの方法を解説していきます。

 

デフォルトでも十分ですけど、もっとポップにしたい!ガチっと明朝でかっこよくしたい!ってありますよね。

個性的なブログってすごく魅力的ですし、読者にもインパクトを与えて覚えてもらえるポイントでもありますからね!

 

もともとAFFINGER5には、ものすごく簡単にフォントデザインを変更できるカスタマイズメニューが備わっています。

このメニューを活用して変更していきます。

 

では早々やっていきましょう!

こんな方におすすめな記事

  • 個性的でオリジナル感のあるフォントにして、インパクトあるブログサイトにしたい!
  • ブログサイトのテーマイメージに合ったフォントデザインにしたい!

 

AFFINGER5フォント変更その①

まず1つ目のフォントデザイン変更方法は、AFFINGER5テーマのデフォルトで用意されている3種類のフォントデザインから選択できます。

 

step
1
WordPressダッシュボードメニューから「AFFIGER5管理」→「デザイン」を選んでクリック♪

AFFINGER5,デザイン

 

 

step
2
全体と記事タイトル・見出し・ウィジェットの2カテゴリーでデザインを選択できます♪

AFFINGER5,フォントの種類1

ちなみにデザインがこちら。

 

デフォルト

デフォルトフォント

 

旧テーマ版

旧テーマ版

 

Rounded M+ 1c

あいうえお アイウエオ ABCDEFG

記事タイトルや見出しなどを個別に変えたい場合、"全体"を「デフォルト」にし、"記事タイトル・見出し(h2~5)・ウィジェットボタンなど"のカテゴリーで、変更したいフォントにチェックを入れて、その下にある個別カテゴリーにチェックを入れていきます♪

 

フォントデザインを採用するカテゴリーも細かく設定できるのでGOOD!

独創的でオリジナル感は低いですけど、一番妥当で読みやすいフォントかなと思います♪

 

AFFINGER5フォント変更その②

もう一つフォントを変更する方法は、Googleが提供しているWebサービス「Google Font」を導入するというもの。

 

完全無料で利用できるうえ、デザインもそれなりにたくさん用意されていますよ♪

「無料」ってのはうれしいですよね。

 

では早速「Google Font」日本語バージョンへアクセスしましょう。

 

Googlefont

Googlefont1

このようにフォントデザインがたくさんあるページに来たら、たったの3ステップで変更できます♪

 

step
1
気に入ったフォントデザインの右上「+」をクリック

googlefont4

 

step
2
画面下の窓を開いて「STANDARD」「CSS」それぞれに記述されたコードをコピーしておく

googlefont5

メモ

コピーは後でペーストするので「メモ帳」や「ポストイット」などでOK。

 

step
3
AFFINGER5管理に入り「Googleフォント」の赤枠2箇所へペーストする。

googlefont6

メモ

指定した場所だけフォントを変えたい場合は「Googleフォント反映箇所」で、変えたい場所へチェックしましょう。

 

最後に「保存」をクリックして完了!

 

まとめ

今回は、AFFINGER5で簡単にできるフォントカスタマイズを2つご紹介しました♪

ブログサイトや記事に合わせたフォントを選ぶのが一番!ぜひ参考にしてみてくださいね。

AFFINGER5カスタマイズ記事

AFFINGER5
【AFFINGER5】サイドバー最上部の新着記事を非表示にする方法

こんにちは!SHINでございます♪   AFFINGER5でサイトページ構成を2カラム以上、つまりサイドバーのあるデザインで運営するなら必見。 今回は、AFFINGER5の導入初期時にデフォ ...

続きを見る

AFFINGER5
【AFFINGER5】ブログサイトの背景画像をオシャレに変える方法

こんにちは!SHINです♪ 今回は、ブログサイトの背景画像をオシャレに変えてみよう!というテーマでお話していきます♪   ただ注意してほしいのは、背景画像で大きくイメージが変わるということ。 ...

続きを見る

超簡単!サイドバーへTwitterタイムラインを埋め込む方法
【AFFINGER5】超簡単!サイドバーへTwitterタイムラインを埋め込む方法

こんにちは!SHINです♪ 今回Twitterのタイムラインを、サイドバーに表示させる方法をお話していきます♪   何で「サイドバー」なのかと言うと、2カラムサイトであればトップページはもち ...

続きを見る

【AFFINGER5】ファビコンとロゴ画像をかっこいいデザインに設定しよう!

Googleより、2019年5月22日公開で「モバイル端末の検索結果表示にファビコン(アイコン)を表示する」という変更が発表されましたね。 こんにちは。WordPressテーマ研究家SHINです。 & ...

続きを見る

【AFFINGER5】記事下にアドセンス横並び+リンク広告をセット表示する方法
【AFFINGER5】記事下にアドセンス横並びとリンク広告をセット表示する方法

こんにちは。SHINです♪   Googleアドセンス広告の設置方法に、PHPやカスタムCSSにコードを記述する方法がありますけど、正直・・・ めんどくさい! ややこしい! むずかしい! わ ...

続きを見る

【AFFINGER5】カエレバ・ヨメレバを実装!カスタマイズデザイン6選
【2019最新版】カエレバ・ヨメレバをコピペで実装するカスタマイズ5選

こんにちは。WordPessテーマ研究家SHINです。 カエレバ&ヨメレバは、Amazonや楽天市場、Yahoo!ショッピングなど複数サイトの商品アフィリエイトリンクを、ボタンに設置して告知できるツー ...

続きを見る

【AFFINGER5】スマホフッターに固定メニューを設置する方法-min
【AFFINGER5】スマホフッターに固定メニューを設置する方法

こんにちは。WordPressテーマ研究家SHINです。 スマホユーザーへ訴求する重要なポジションとも言えるのがフッターメニューですよね。   スマホフッターメニューと言えば、パソコンで言う ...

続きを見る

【AFFINGER5】コレは使える!クリップメモのアイコンカスタマイズ大特集
【AFFINGER5】コレは使える!クリップメモのアイコンカスタマイズ集

"AFFINGER5生活"も、かれこれ3ヶ月ほど。相変わらずの使いやすさに、ほれぼれ感が全く薄れないSHINです。   今回は、タグパーツの一つ「クリップメモ」のアイコンを、いろんなバリエー ...

続きを見る

alt=【AFFINGER5】テキストやアイコン画像をアニメーション化できる機能紹介
【AFFINGER5】テキストやアイコン画像をアニメーション化できる機能紹介

AFFINGER5に実装されている機能に、テキストやアイコン、画像を簡単にアニメーションにできる機能をご紹介していきます。 こんにちは。WordPressテーマ研究家SHINです。   AF ...

続きを見る

  • この記事を書いた人
  • 最新記事
SHIN

SHIN

WordPressテーマ研究家のSHINです。WPテーマとコーヒーをこよなく愛し、日々マウスをカチカチ!キーボードをパチパチ!しながら研究をしている人。

-カスタマイズ
-

Copyright© WordPress theme NAVI , 2019 All Rights Reserved.