- AFFINGER6のトップページ カスタマイズ方法がわからない
- AFFINGER6はカスタマイズがむずかしい？
- アフィンガーのトップページのカスタマイズ方法を知りたい
- アフィンガーの固定ページのカスタマイズ方法を知りたい
AFFINGER6のデザインテンプレートのカスタマイズについて詳しく知りたい人、思ったようなデザインにカスタマイズしたい人はこの記事を参考にしてください。
AFFINGER（アフィンガー）を購入したばかりだとシンプルでおしゃれなカスタマイズ方法がわからないかも知れません。
実はめちゃくちゃ簡単にシンプルなトップページがカスタマイズできます。
同じように固定ページもカスタマイズできます。
AFFINGER6は公式マニュアルが充実しています。
購入済みの人は公式マニュアルをご覧ください。
この記事は購入前の参考程度にご覧ください。
AFFINGER6トップページデザイン カスタマイズ方法【ブロックエディタ対応】
ブログ記事をある程度書いたら、トップページを整えましょう。
主にカテゴリーごとのオススメ記事をトップページで構成して、ブログの特徴を読者に印象付ける役割があります。
アフィンガーのトップページカスタマイズ方法を説明します。
私は元WEBデザイナーです。
ここ15年ほどで、ブログ構築も数え切れないほどやってきました。
常に大切にしているのは、見た目のデザインよりもコンテンツ自体が大事だということです。
見た目を個性的にしても読者が読みたいのは基本的に文章です。
文字情報です。
ブログのデザインは本当にシンプルな方が良いのです。
AFFINGER6（アフィンガー6）デザインテンプレートの設定
AFFINGER6のデザインテンプレートをワンクリックで変更
AFFINGER6ならデザインテンプレートの設定がワンクリックで設定できます。
デザインパターンがデフォルトで13パターン
ワンクリックで基本カラーの変更ができます。
6種類のデザインパターンもワンクリックで変更可能です。
WordPressテーマ AFFINGERの配色設定のポイント
元WEBデザイナーでもある私がおすすめする色設定をお教えします。
カラーパターンの選び方のポイントです。
| ベースカラー | 解説 |
|---|---|
| 赤色系 | 派手な色をブログのキーカラーにすることはあまりオススメしません。 ブログを読んでいて赤がキツいと読んでいて疲れるからです。 |
| 青色系 | 冷静なイメージの青形カラーはいろんなテーマに幅広く対応します。 ビジネス・ノウハウ系、転職系、金融系、旅行ブログなど、情報発信のテーマにピッタリのカラーです。 |
| 緑色系 | 緑の爽やかなカラーは健康系の情報発信にオススメの色です。 健康系、ダイエット系、コスメ系ブログなど。 |
| オレンジ色系 | オレンジ色の温かいカラーは料理系のブログにピッタリです。 レシピや料理がテーマのブログに向いています。 |
| ピンク色系 | ピンク色は美容系やコスメ系など、女性ターゲットのブログにオススメのカラーです。 |
| グレー色系 | シックなグレー系は物足りなさを感じるかもしれませんが、どんなテーマのブログにも合わせることができます。 |
AFFINGER（アフィンガー）のオススメの色設定はリセット
ここがポイント
シンプルなデザインが好きな私は、カラーパターンもデザインパターンもリセットを使用しています。
デザインカラーは特に凝る必要はないです。
色数を多くするほど、落ち着きのない見にくいブログになります。
スッキリと情報が読みやすいデザインカラーの方が、読者にとってブログが読みやすいのです。
特にスマホからの読みやすさが抜群にアップします。
自己満足の色設定をしてしまうと、ブログが読みにくくなり、読者の離脱率が上がってしまうので注意なのです。
AFFINGER6 デザイン カスタマイズ手順
AFFINGERのトップページの設定方法は主に２種類あります。
- デフォルトのトップページの挿入コンテンツを設定する
- トップページに固定記事を挿入
デフォルトの設定がもっとも簡単な設定方法です。
アイデア次第で表示させたいことも挿入して、当ブログのようなデザインに仕上げることもできます。
この記事ではもっとも簡単な設定方法について説明します。
カスタマイズ手順
- トップページに設定するカテゴリを選択
- NEWS（お知らせ）の表示設定
- 挿入コンテンツを設定
AFFINGERがブロックエディタに対応してから、トップページの作成カスタマイズ方法が超簡単になりました。
トップページのタブ式カテゴリ一覧を設定
難易度 ★
設定箇所
AFFINGER管理 →トップページ →タブ式カテゴリ一覧
この項目に４カテゴリ、タブ式で表示させることができます。
カテゴリIDを設定するだけでOK。
カテゴリIDの確認方法はカテゴリページの「ID」を見ればひと目で確認できます。
記事数が多い場合は「ランダム表示」の設定がおすすめです。
記事数が少なく、カテゴリが少ない場合は設定なしでOKです。
NEWS（お知らせ）の表示設定
難易度 ★
トップページに更新履歴を表示させます。
「お知らせをTOPページの一番上に表示する」にチェックをを入れればOK。
お知らせのタイトル設定もできます。
お知らせに表示させたいカテゴリを選択したり、逆に表示させたくないカテゴリの設定もできます。
挿入コンテンツを設定
難易度 ★★★
AFFINGERはトップページに自由にコンテンツを挿入させることができます。
AFFINGERならクラシックエディタを使って挿入コンテンツを作成できるので便利です。
トップページに使う画像などはあらかじめ自分で用意してください。
当ブログでは画像作成に無料で使えるCanvaを使っています。
シンプルでおしゃれな画像を作ることができます。
当ブログ風コンテンツナビゲーションの作成方法
挿入コンテンツ →タブ →レイアウト →PCとTab →好きな設定を選択
当ブログの場合、レイアウトの３分割を使ってボタン画像を配置しました。
画像サイズを指定することで、スマホ表示でもきれいに３分割でナビゲーション画像を表示させることができます。
２段にする場合は同じ要領で作ります。
応用してサイドバーにも設定することができます。
２分割して画像サイズを変更すれば挿入可能です。
ポイントはCanvaを使って見たくなるようなボタンを作ることかもしれません。
統一感のあるシンプルな画像を作成しましょう。
サイドバーに画像ナビゲーションを配置する方法
サイドバーに画像ナビゲーションを配置する方法は簡単です。
トップページに配置した方法を応用しておこないます。
２分割で画像サイズは150幅のピクセルで設定すればサイドバーに収まります。
HTMLコードをHTMLウィジェットにコピペすれば設置完了です。
自作で作成した固定ページをブログのトップページに設定する
自作した固定ページをトップページに設定する方法です。
- 設定方法１ AFFINGER設定で、トップページに固定記事を挿入
- 設定方法１ カスタマイザーで「ブログトップページを表示させた状態 →カスタマイズ →ホームページ設定 →作成した固定ページを選択して保存」
これで設定完了です。
準備した固定ページがブログのトップページになっているはずです。
トップページを確認しましょう。
これでAFFINGERのトップページ設定はとりあえず完了！
お疲れ様でした！
PS：トップページの記事一覧を２列カード式で表示する子テーマを作成
トップページの記事一覧を２列カード式で表示する子テーマを作成しました。
このオリジナルの子テーマをAFFINGER購入特典としてプレゼントしています。
【超重要】AFFINGER6 おすすめ記事の設定
ヘッダーカード、サイドバーのおすすめ記事の設定方法とおすすめ記事の選定の理論を画像付きで具体的に解説しました。
ブログ記事全体のカスタム方法はこちらの記事を参考にしてください。
- サイト全体の設定
- フォント設定
- プロフィール設定
【10特典付】AFFINGER6購入レビュー｜損をしない買い方
アフィンガーの特典付き購入方法と当ブログのオリジナル特典について説明しました。
アフィンガー（AFFINGER）はこんな人におすすめ
- HTML + CSSの知識がなくても記事の装飾をよくしたい
- 個人でアフィリエイトや情報発信を本格的に始めたい
- 無料のものを使うより有料のものを使って利益に差をつけたい
- ブログを高速化させてSEO対策をしたい
- 検索順位を上げてアクセスと収益を上げたい
アフィンガー（AFFINGER） 当ブログ限定特典
特典のサンプルはこちら当ブログからアフィンガー（AFFINGER）を購入してくれた人にオリジナルの特典を用意しました。
この特典は当ブログが独自に用意した非公式の特典なので他では入手できません。
特典に関するお問い合わせ等はYoake Webまでお願いします。
オリジナル11特典・内容
- AFFINGER 特典１ 稼げるキーワード
- AFFINGER 特典２ 会員限定有料ブログ簡易版・閲覧権（通常980円）
詳細 ブログを独学でマスターしたい人のための有料ブログ - AFFINGER 特典３ ブログの始め方
- AFFINGER 特典４ セルフプロデュース講座
- AFFINGER 特典５ 自動収益システム構築法
- AFFINGER 特典６ あなたにメリットをもたらす"7つの習慣"速習
- AFFINGER 特典７ 【2020年】AdSense（アドセンス）審査に合格する方法
- AFFINGER 特典８ 再配布OKのレポート
- AFFINGER 特典９ WordPress・AFFINGER 構築チェックシート
- AFFINGER 特典10 ブログ動画講座（30分）
- AFFINGER 特典11 最強のブログ戦略〜ドラッカー理論とマーケティングで個人起業を攻略
趣味でブログをやりたい人なら無料テーマで十分ですが、速く結果を出したい稼ぎたいブロガーは速攻で使うべきブログテーマです。
私もプチ目標である月収50万円をはるかに超えることができました。
AFFINGERの購入リンクはこちら
当ブログ限定11特典付き
AFFINGER PACK3 特典付き
当ブログ限定11特典付き
AFFINGER６ ブロックエディタ対応
- AFFINGER6 レビュー！WordPressテーマ ACTION 購入方法
- WordPressブロックエディタ（Gutenberg）の使い方
- AFFINGER6トップページ カスタマイズ方法【ブロックエディタ対応】
- AFFINGER6の使い方を編集ページを画像で説明｜ブロックエディタ・装飾
AFFINGERの購入方法
- アフィンガー料金 WordPress有料テーマ比較！AFFINGER購入レビュー
- AFFINGER6にアップデート可能・特典付き購入方法
- AFFINGER PACK3【当ブログ限定】特典付き購入リンク
AFFINGERの使い方・設定・購入方法
- AFFINGERとは？購入手順＆カスタマイズ方法 初心者向け【簡単です】
- AFFINGER5の使い方・設定・記事の書き方【初心者向けまとめ】
- AFFINGER5（アフィンガー５）デメリットとは？デメリット解消法
- AFFINGER5の初期設定は簡単！初心者でもできる使い方を解説！
