当ページのリンクには広告が含まれています。

AFFINGER6 カスタマイズ【サイトデザインの設定ポイントをまとめてみた!】

AFFINGER6 カスタマイズ【サイトデザインの設定ポイントをまとめてみた!】

こんにちは "osaboo"です。"@osaboo_Bot"

AFFINGER6のカスタマイズ「サイトデザインの設定ポイント」を初心者さん向けに解説します。

  • AFFINGER6:全般的な設定

オリジナリティーと機能性をアップさせるために必要なカスタマイズ箇所と設定方法をご紹介します。
SEO対策にもつながるので初心者の方には必見です。

こんな方におすすめ!

  • サイトをデザインしたい…どこから手をつけるの?
  • おしゃれなデザインにしたい…でもどうやって?
  • 自分なりにアレンジできる手順でカスタマイズ方法を知りたい!

この記事でわかること!

  • おすすめWordPressテーマAFFINGER6について…
  • カスタマイズ方法:トップページ編
  • カスタマイズ方法:フォント編
  • カスタマイズ方法:サイドバー編

お知らせ!

当サイトより「AFFINGER6・EX・AFFINGERタグ管理マネージャー4」を購入していただいた方には、『購入者限定特典』記事をご覧いただけます。 \ 是非、ご覧下さい /

それではご覧ください!

おすすめWordPressテーマAFFINGER6について…

AFFINGER6 初心者がオススメする購入方法【特典付きを購入しよう!】

おすすめWordPressテーマAFFINGER6について…

初心者でも安心!コスパ最強の洗練されたWordPressテーマ

AFFINGER6 購入 ▶︎ 詳しくはこちら

\\『すごいもくじLITE』が付いてくる!限定特典キャンペーン実施中!//

この章では、AFFINGER6の基本情報や魅力・特徴を「サラッと」ご紹介します。

AFFINGERの基本情報

ACTION / AFFINGER

  • AFFINGER6
     
     
  • 価格:14,800円(税込)
  • 販売元:株式会社オンスピード
  • ライセンス:複数サイト使用可(個人)

ACTION / PACK3(AFFINGER6EX)

  • AFFINGER6EX
    タグ管理マネージャー・ABテスト
     
  • 価格:51,400円39,800円(税込)
  • 販売元:株式会社オンスピード
  • ライセンス:複数サイト使用可(個人)

ちなみに、AFFINGER6からEXにアップデートするシンプルな方法もあります。
2023年9月末までは「ACTION / PACK3(AFFINGER6EX)」が 期間限定のプライスOFFなのでお得かと…

購入手段の方法として、AFFINGER6を導入して物足りなくなったら「EX版」にアップデートする方法もあります。
当サイトでは、この方法を採用しました。当時「PACK3」の販売はなかったので…

使用分野を選ばないAFFINGER6の魅力

  • カスタマイズ性の高さ
  • 個人であれば複数サイトでの使用制限が無い
  • AMP(モバイル高速表示)
  • メジャーはWordPressテーマなので 不明点はほぼググれば解決できる
  • SEOの対策は標準で十分

まだまだありますが…各ブロックの装飾の自由度が高く、表現したいイメージ通りのコンテンツ作成が可能です。
また、ユーザのために 本格的なサイトのテンプレートが提供されていて、初心者でもいきなり本格的なサイトを作ることも可能です。

当サイトで、2年間使ったレビューを以下の記事にてご紹介しています。AFFINGER6の導入を検討している方は、チェックしてみてください。

それでは、カスタマイズの解説をしていきます。

※ 本記事の設定では『AFFINGER管理』のメニューを編集します。

ロリポップレンタルサーバーをお使いの方は、ドメインの『WAFの設定』を一時的に無効 にしてください。◀︎『403 Error』が出た場合!

カスタマイズ方法:トップページ編

はじめに トップページ(ホームページ)のカスタマイズ方法をご紹介します。トップページは、サイトの顔となるページなので機能性とサイトイメージを重視して作っていきましょう。

サイトに訪れたユーザーがストレスなく!サイト内を閲覧・検索できるよう心がけると良いと思います。

デフォルトでは、投稿ページがトップページになっているため、カスタマイズでの表現(デザイン性)が乏しくなリます。
この記事では、固定ページをトップページとして自由にカスタマイズする方法をご紹介していきます。

ちなみに、投稿ページのままデザイン性を向上させる方法もありますが…作成中なので完成したらここに貼っておきます。しばらくお待ちください。

トップページについて…補足

トップページのタイプには、ブログ型サイト型の「2タイプ」あります。

  1. ブログ型:投稿ページ=トップページ ◀︎ デフォルト
  2. サイト型:固定ページ=トップページ

※ この記事は『 2. 』の『サイト型』で

まずは、自分のサイトを確認してみましょう。

デフォルト設定(ブログ型)の場合「ブログ型からサイト型に変更」します。

トップページの設定:ブログ型からサイト型に変更

ブログ型からサイト型に変更する方法は こちらで詳しくご紹介しています。

トップページの設定:AFFINGER管理で拡張設定

『AFFINGER管理』画面で、できるおすすめの拡張機能をご紹介します。

『WordPress管理>ダッシュボード>AFFINGER管理』をクリックします。

おすすめの拡張機能のタブメニューは『トップページ』と『ヘッダー下 / おすすめ』です。

AFFINGER管理:トップページの設定

『トップページ』タブメニューのおすすめ設定|トップページのレイアウト

ブログ型との違いをはっきりさせるためにも『1カラム』がおすすめです。

AFFINGER管理:トップページの設定|トップページタブメニュー詳細

『ヘッダー下 / おすすめ』タブメニューのおすすめ設定|ヘッダーカード

サイトのガイドに是非!使って欲しいカード型のボタンです。おしゃれ!!

最大4個まで登録でき、配置は均等に振り分けられます。
※ 設定したカードのみ表示されます。

各ヘッダーカードごとの設定項目

  • 画像のURL:メディアライブラリーから画像を選択してURLをコピーします。
  • テキスト
  • (サブテキスト:EX専用)
  • リンク先URL
  • 非表示条件

以下の画面のように登録してみてください。(参考)

AFFINGER管理:トップページの設定|ヘッダー下 / おすすめタブメニュー詳細

上記のように登録すると以下のように4個のヘッダーカードが表示されます。

こんな感じに表示されます。

トップページ:ヘッダー下 / おすすめ

上の画像は、ヘッダー画像を画面全体に表示しています。興味のある方はこちらの記事をご覧下さい。

トップページの設定:サムネイルスライドショーを表示する

記事が増えてきたら…ピックアップした記事をサムネイルスライドショーでトップページに表示するのも良い方法です。おしゃれ感UP!!^^/

こんな感じに表示されます。

サムネイルスライドショー

サムネイルスライドショーを表示する方法は こちらで詳しくご紹介しています。

トップページのコンテンツを作成する

固定ページをトップページにした(サイト型)場合は、記事を書く要領でページの編集ができます。
ブロックエディターでブログを始めて…クラシックエディターはどうも?苦手という初心者さんでも容易に作成できると思います。

当サイトでは、ブロックエディターをメインで使い 極力クラシックエディターは使わないでサイト作りをすることをおすすめします。

手順は以下の通りです。

  1. 固定ページを新規追加
  2. コンテンツを作成:クラシックエディターの使用は極力避ける。
    • 「レイアウト・表示記事・リンク・広告」等を配置(通常の記事を書く要領と同じ)

ポイント マイブロックやウィジェットを使う。

マイブロックの基本的な使い方をご紹介しています。マイブロック?気になる方は是非…

カスタマイズ方法:フォント編

続いてサイト全体に関係するフォントの設定方法をご紹介します。フォントは、サイト全体に影響するためとても重要です。

フォントの設定のポイントは「5個」です。「とても重要」

  1. フォントの種類(文字の形状)
  2. フォントのサイズ(文字の大きさ)
  3. 各種余白と行間の設定
    • 自動改行(折り返し)時の行間
    • 改行(手動)時の行間
    • ブロック下の余白(グループブロックを含む)

それでは順番に見ていきましょう。

フォントの種類(文字の形状)

フォントの種類(文字の形状)は、表示イメージが大きく影響するので…確固たる構想が無い限りは極端な変更は避けた方が良いかと…

デフォルトに近い形で微妙に異なる程度の変更がおすすめです。この微妙に異なる違いの中から お好みの「文字の形状」を採用しましょう。

フォントの種類(文字の形状)を変更するには、AFFINGER管理画面での作業になります。

『WordPress管理>ダッシュボード>AFFINGER管理>全体設定>A フォントの種類』をクリックします。

AFFNGER管理画面

AFFINGER管理|サイト全体の設定|A フォントの種類

当サイトでは、以下のように設定しています。(デフォルトより 少し柔らかく・優しい感じ)

AFFINGER管理|サイト全体の設定|A フォントの種類

サイトのイメージを損なわないように「シンプルでやさしい感じ」というイメージで設定しています。

全体

  • Noto Sans(400)にチェック
  • その他(優先):font-family:Noto, "Hiragino Sans", Helvetica, Arial, sans-serif;

記事タイトル・見出し(h2〜3)・ウィジェットボタンなど

  • Noto Sans(700)にチェック
  • その他(優先):font-family:Noto, "Hiragino Sans", Helvetica, Arial, sans-serif;

「よかったら参考にしてください。^^/ 」

フォントのサイズ(文字の大きさ)

フォントのサイズ(文字の大きさ)は、各デバイスでの「読みやすさと対象ユーザー」を考慮して設定すると良いかと…

読みやすさについて

筆者的には…デフォルトの設定では 少し窮屈な感じがします。(感覚なので千差万別ですが…)
人気のサイトさんを見ると、文字ピッチは気になりませんが行間と余白を多めに取っているサイトさんが多く 且つ、読みやすいように思います。

※ 「長文は3行以上になると読まれにくくなる!」購読率が低下します。このことからも 「行間・余白」は 大きく取ったほうが良好と言えるのでは…

対象ユーザーについて

段落(P)タグのサイズを上げて 大きく表示しているサイトさんが 多々あります。

※ 例えば…対象ユーザーが「高齢・幅広い」文字は大きめが良い。老眼(笑)◀︎ こんな感じでイメージすれば良いのでは!?

それでは、設定の詳細を見ていきましょう。前章と同じくAFFINGER管理画面での作業になります。

『WordPress管理>ダッシュボード>AFFINGER管理>全体設定>A フォントのサイズ』をクリックします。

AFFNGER管理画面

AFFINGER管理|サイト全体の設定|A フォントサイズ

「A フォントのサイズ」の参考です。(ざっと「いい感じ」になるかと思います)

AFFINGER管理|サイト全体の設定|A フォントサイズ 詳細

各種余白と行間の設定自動改行(折り返し)時の行間・改行(手動)時の行間・ブロック下の余白(グループブロックを含む)

余白と行間の設定方法は こちらで詳しくご紹介しています。

カスタマイズ方法:サイドバー編

最後に サイドバーの設定をご紹介します。
サイドバーは「ウィジェット」を作成し設置します。WordPress管理のウィジェットでの作業になります。

サイドバーはこんな感じです。

サイドバーの場所とイメージ

設置されているウィジェットは以下の通りです。

左画面では「3個」のウィジェットが設置されています。

利用できるウィジェット

検索

11_AFFINGERプロフィールカード

00_AFFINGERカスタムHTML

サイドバー拡大(詳細)イメージ

『WordPress管理>ダッシュボード>外観>ウィジェット』をクリックします。

『サイドバートップ』または『サイドバーウィジェット』に『利用できるウィジェット』から『項目』を選択して設置します。

WordPress管理:ウィジェット

サイドバートップへの設置

利用できるウィジェットの項目から『検索』をクリックします。

ドロップダウンメニューが開き 以下のように表示されます。

利用できるウィジェット:検索

設置先の『サイドバートップ』を選択して『ウィジェットを追加』をクリックします。

同様に利用できるウィジェットの項目から『11_AFFINGERプロフィールカード』をクリックします。

ドロップダウンメニューが開き 以下のように表示されます。

利用できるウィジェット:11_AFFINGERプロフィールカード

設置先の『サイドバートップ』を選択して『ウィジェットを追加』をクリックします。


右側のサイドバートップに以下のように表示されればOKです。

ウィジェット:サイドバートップ

検索にタイトルが設定できます。(任意)

プロフィールカードにタイトルが設定できます。(任意)

サイドバーウィジェットへの設置

利用できるウィジェットの項目から『00_AFFINGERカスタムHTML』をクリックします。

ドロップダウンメニューが開き 以下のように表示されます。

利用できるウィジェット:00_AFFINGERカスタムHTML

設置先の『サイドバーウィジェット』を選択して『ウィジェットを追加』をクリックします。


右側のサイドバーウィジェットに以下のように表示されればOKです。

ウィジェット:サイドバーウィジェット

HTMLにタイトルが設定できます。(任意)

HTMLの内容について…

この記事では、ボックスタイプのメニューを設置しているので…

内容欄にボックスメニューのコードをペーストします。

ボックスメニューに作り方については『AFFINGER6 カスタマイズ ▶︎ ボックスメニューの作り方!』をご覧下さい。

サイドバーの設定で困ったらこちらをご覧下さい。初心者さん向けに超詳しく解説しています。

おすすめ記事一覧をサイドのスクロールに表示する

『AFFINGER管理』画面で できる「おすすめ記事一覧」の表示方法をご紹介します。
おすすめ記事一覧はサイドのスクロールに表示されます。

サイドスクロールとは、サイドバーウィジェットスクロール広告用の間に表示され、中間スクロール時に固定表示される領域です。

『WordPress管理>ダッシュボード>AFFINGER管理>ヘッダー / おすすめ>おすすめ記事一覧』をクリックします。

AFFNGER管理画面

AFFINGER管理|ヘッダー下 / おすすめ|おすすめ記事一覧

以下の画面が表示されるところまでスクロールします。

以下の3箇所を入力します。

  • おすすめ記事一覧に表示する文字:見出し
  • 投稿又は固定記事ID:IDを半角カンマで区切る( 入力されたIDの数だけ表示されます)
  • サイドのスクロールに表示する(抜粋非表示):チェック『ON』

必要箇所を入力後『Save』を忘れずにクリックします。

AFFINGER管理|ヘッダー下 / おすすめ|おすすめ記事一覧 詳細

以下のようにサイドバーに表示されます。

おすすめ記事一覧 イメージ

初心者でも安心!コスパ最強の洗練されたWordPressテーマ

AFFINGER6 購入 ▶︎ 詳しくはこちら

\\『すごいもくじLITE』が付いてくる!限定特典キャンペーン実施中!//

まとめ!AFFINGER6 カスタマイズ【サイトデザインの設定ポイントをまとめてみた!】

AFFINGER6のカスタマイズでサイトデザインの設定ポイントをまとめてご紹介しました。
「トップページ・フォント・サイドバー」に分けてご紹介したので各セクションごとに デザインのカスタマイズにお役立て下さい。

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。\^^/

-カスタマイズ_AFFINGER
-