ランキングに参加中です♪
応援クリックをいただけると とても嬉しいです♪
↓↓↓
人気ブログランキングへ

ブログ作成

AFFINGER5のデザイン部分(サイト全体の設定)のカスタマイズ方法

2020年8月29日

こんにちは、専業ブロガーの孔雀です。

この記事では、AFFINGER5のデザイン部分(サイト全体の設定)のカスタマイズ方法について解説してみたいと思います。

この記事は、主に以下のような人をターゲットに書いています。

この記事を読むべき人

  • AFFINGER5のデザイン部分をカスタマイズしたい人
  • AFFINGER5のブログ全体のレイアウトをカスタマイズしたい人
  • AFFINGER5のフォントのサイズと種類をカスタマイズしたい人

AFFINGER5の管理画面「デザイン」から簡単にカスタマイズする方法の解説です。

これはAFFINGER5のデザインの基本となる部分のカスタマイズなので、AFFINGER5のインストール後には必ず設定しておきましょう!

この記事を読むことで、AFFINGER5のデザイン部分の基本的なカスタマイズ方法がわかるようになります。

スポンサーリンク

AFFINGER5のデザイン部分(サイト全体の設定)のカスタマイズ方法

AFFINGER5のデザイン部分でいえば、下記で紹介する順番でカスタマイズしていけば誰でも簡単に設定できるかと思います。

このあたりの設定をまだいじっていないという方も、これを機会に一通りカスタマイズしておくことをおすすめします。

AFFINGER5のデザイン部分(サイト全体の設定)のカスタマイズは、「AFFINGER5管理」⇒「デザイン」からすべて行えます。

AFFINGER5のデザイン部分(サイト全体の設定)のカスタマイズ方法

基本的なカラー(カラーパターンとデザインパターン)設定

上から順々にカスタマイズしていきましょう。

まずは、カラーパターンデザインパターンです。

AFFINGER5のデザイン部分(サイト全体の設定)のカスタマイズ方法

カラーパターンとは、ブロブのヘッダー、見出し、サイドバーのメニュー部分の色を変えるカスタマイズです。

そして、デザインパターンとは、見出しバナー、サイドバーのメニューバナーのデザインを変えるカスタマイズです。

それぞれ好きなものにチェックを入れて、「SAVE」をクリックすると反映させます。

AFFINGER5のデザイン部分(サイト全体の設定)のカスタマイズ方法

ちなみに、当ブログでは「オレンジ(元気)」「フラット(シンプル)」を選択しています。

実際にブログに表示させながら一番合うものを選んでいけばいいと思います。

カテゴリーリンク(サイドバー)設定

次に、サイドバーに表示するカテゴリーリンクに簡易デザインを適応するカスタマイズです。

AFFINGER5のデザイン部分(サイト全体の設定)のカスタマイズ方法

サイドバーのカテゴリーリンクに簡易デザイン適応」にチェックを入れることで、以下のようなデザインに切り替わります。

カラーを設定すると、カテゴリーリンクの下線部分の色が変わります。

AFFINGER5のデザイン部分(サイト全体の設定)のカスタマイズ方法

サイト全体のレイアウト設定

次に、ブログ全体のレイアウトをカスタマイズする方法です。

AFFINGER5のデザイン部分(サイト全体の設定)のカスタマイズ方法

ここでは、以下のようなレイアウトに関するカスタマイズが可能です。

  • PC表示時の横幅の設定
  • サイドバーの配置(右か?左か?)
  • 1カラムと2カラムの設定
  • ブログ全体をLP化する設定
  • コンテンツ上部の余白の設定
  • サムネイル画像設定

    次に、記事一覧表示させた時のサムネイル(アイキャッチ)画像の表示設定です。

    AFFINGER5のデザイン部分(サイト全体の設定)のカスタマイズ方法

    例えば、サムネイル(アイキャッチ)画像の表示を「正方形にする」から「丸くする」にすると、以下のように変化します。

    AFFINGER5のデザイン部分(サイト全体の設定)のカスタマイズ方法

    その他、サムネイル(アイキャッチ)画像を右側に表示させたり、ポラロイド風にしたりできます。

    抜粋設定

    次に、抜粋記事の表示・非表示と、抜粋記事内に表示される文字数の設定です。

    AFFINGER5のデザイン部分(サイト全体の設定)のカスタマイズ方法

    例えば、抜粋記事で表示される説明文の文字数を200文字に設定すると、以下のように抜粋記事内に表示される文字数が200文字になります。

    AFFINGER5のデザイン部分(サイト全体の設定)のカスタマイズ方法

    その他、PCとスマホでの抜粋記事の表示・非表示の設定が可能です。

    フォントのサイズ設定

    次に、ブログ内のテキスト文字のフォントサイズのカスタマイズです。

    要するに、ブログ内に表示されるテキスト文字の大きさを変更する設定になります。

    AFFINGER5のデザイン部分(サイト全体の設定)のカスタマイズ方法

    スマホ」「タブレット」「PC」の3つで表示された時のテキスト文字のフォントサイズを細かく設定することができます。

    半透明になっている数字がデフォルトで設定されているピクセス数(px)になので、そこを基準に微調整していけばいいかと思います。

    フォントの種類設定

    次に、ブログ内のテキスト文字のフォントの種類を変更するカスタマイズです。

    AFFINGER5のデザイン部分(サイト全体の設定)のカスタマイズ方法

    設定できるフォントの種類は下記の通りです。

  • デフォルト
  • M PLUS Rounded 1c
  • Noto Sans
  • 游ゴシック
  • 游明朝
  • これらのフォントを使って、ブログ内の各パーツ(サイト名、記事タイトル、見出しなど)のみで適応させるように設定することができます。

    Google Fonts(Googleフォント)」から取得したURLを使って、ブログ内のテキスト文字をGoogleフォントに適応させることもできます。

    スポンサーリンク



    まとめ:AFFINGER5の使い方:デザイン部分(サイト全体の設定)のカスタマイズ方法

    今回は、AFFINGER5のデザイン部分(サイト全体の設定)のカスタマイズ方法について解説してみました。

    AFFINGER5のデザインの基本となる部分のカスタマイズは、「AFFINGER5管理」⇒「デザイン」のページですべて行えます。

    AFFINGER5のインストールが済んだら、「カラーパターンとデザインパターン」くらいはまず必ず設定しておきましょう。

    AFFINGER5の、その他のカスタマイズ方法については下記の記事をご覧ください。

    関連記事

    最後までお読みいただき、ありがとうございました♪ 応援クリックをいただけると励みになります♪
    人気ブログランキングへ
    • この記事を書いた人

    孔雀

    2004年にアフィリ業界に参入。 2017年から脱サラし、専業アフィリエイターに転職。 ほぼ独学でSEO、マーケティングを学び、2018年6月にアフィリエイトのみで月収50万円を達成。 誰にも縛られない自由な生活を求めて日々精進中。 最終目標は、何もせずに収入が入ってくる不労所得を作り出すこと。

    -ブログ作成
    -

    Copyright© 孔雀イズム , 2020 All Rights Reserved.