AFFINGER 使い方

AFFINGER6

AFFINGER6トップページ カスタマイズ方法【ブロックエディタ対応】

アフィンガーのトップページ カスタマイズ方法がわからない・・・

アフィンガーはむずかしすぎる・・・

ふなさん

AFFINGER(アフィンガー)を購入したばかりだとシンプルでおしゃれなカスタマイズ方法がわからないかも知れません。

実はめちゃくちゃ簡単にシンプルなトップページがカスタマイズできます。

同じように固定ページもカスタマイズできます。

  • アフィンガートップページのカスタマイズ方法を知りたい人
  • アフィンガー固定ページのカスタマイズ方法を知りたい人

AFFINGER6は公式マニュアルが充実しており、購入済みの人はこの記事ではなく公式マニュアルをご覧ください。

この記事は購入前の参考程度にご覧ください。

AFFINGER6トップページデザイン カスタマイズ方法【ブロックエディタ対応】

ブログ記事をある程度書いたら、トップページを整えましょう。

主にカテゴリーごとのオススメ記事をトップページで構成して、ブログの特徴を読者に印象付ける役割があります。

ふなさん

アフィンガーのトップページカスタマイズ方法を説明します。

私は元WEBデザイナーです。

ここ15年ほどで、ブログ構築も数え切れないほどやってきました。

常に大切にしているのは、見た目のデザインよりもコンテンツ自体が大事だということです。

見た目を個性的にしても読者が読みたいのは基本的に文章です。

文字情報です。

ブログのデザインは本当にシンプルな方が良いのです。

AFFINGER6(アフィンガー6)デザインテンプレートの設定

AFFINGER6のデザインテンプレートをワンクリックで変更

AFFINGER6ならデザインテンプレートの設定がワンクリックで設定できます。

デザインパターンがデフォルトで13パターン

ワンクリックで基本カラーの変更ができます。

6種類のデザインパターンもワンクリックで変更可能です。

WordPressテーマ AFFINGERの配色設定のポイント

ふなさん

元WEBデザイナーでもある私がおすすめする色設定をお教えします。

カラーパターンの選び方のポイントです。

ベースカラー解説
赤色系派手な色をブログのキーカラーにすることはあまりオススメしません。
ブログを読んでいて赤がキツいと読んでいて疲れるからです。
青色系冷静なイメージの青形カラーはいろんなテーマに幅広く対応します。
ビジネス・ノウハウ系、転職系、金融系、旅行ブログなど、情報発信のテーマにピッタリのカラーです。
緑色系緑の爽やかなカラーは健康系の情報発信にオススメの色です。
健康系、ダイエット系、コスメ系ブログなど。
オレンジ色系オレンジ色の温かいカラーは料理系のブログにピッタリです。
レシピや料理がテーマのブログに向いています。
ピンク色系ピンク色は美容系やコスメ系など、女性ターゲットのブログにオススメのカラーです。
グレー色系シックなグレー系は物足りなさを感じるかもしれませんが、どんなテーマのブログにも合わせることができます。

AFFINGER(アフィンガー)のオススメの色設定はリセット

ここがポイント

シンプルなデザインが好きな私は、カラーパターンもデザインパターンもリセットを使用しています。

デザインカラーは特に凝る必要はないです。

色数を多くするほど、落ち着きのない見にくいブログになります。

スッキリと情報が読みやすいデザインカラーの方が、読者にとってブログが読みやすいのです。

特にスマホからの読みやすさが抜群にアップします。

自己満足の色設定をしてしまうと、ブログが読みにくくなり、読者の離脱率が上がってしまうので注意なのです。

AFFINGER6 デザイン カスタマイズ手順

AFFINGERのトップページの設定方法は主に2種類あります。

  1. デフォルトのトップページの挿入コンテンツを設定する
  2. トップページに固定記事を挿入

デフォルトの設定がもっとも簡単な設定方法です。

アイデア次第で表示させたいことも挿入して、当ブログのようなデザインに仕上げることもできます。

この記事ではもっとも簡単な設定方法について説明します。

カスタマイズ手順

  1. トップページに設定するカテゴリを選択
  2. NEWS(お知らせ)の表示設定
  3. 挿入コンテンツを設定

AFFINGERがブロックエディタに対応してから、トップページの作成カスタマイズ方法が超簡単になりました。

トップページのタブ式カテゴリ一覧を設定

難易度 ★

設定箇所

AFFINGER管理 →トップページ →タブ式カテゴリ一覧

この項目に4カテゴリ、タブ式で表示させることができます。

カテゴリIDを設定するだけでOK。

カテゴリIDの確認方法はカテゴリページの「ID」を見ればひと目で確認できます。

記事数が多い場合は「ランダム表示」の設定がおすすめです。

記事数が少なく、カテゴリが少ない場合は設定なしでOKです。

NEWS(お知らせ)の表示設定

難易度 ★

トップページに更新履歴を表示させます。

「お知らせをTOPページの一番上に表示する」にチェックをを入れればOK。

お知らせのタイトル設定もできます。

お知らせに表示させたいカテゴリを選択したり、逆に表示させたくないカテゴリの設定もできます。

挿入コンテンツを設定

難易度 ★★★

AFFINGERはトップページに自由にコンテンツを挿入させることができます。

AFFINGERならクラシックエディタを使って挿入コンテンツを作成できるので便利です。

トップページに使う画像などはあらかじめ自分で用意してください。

当ブログでは画像作成に無料で使えるCanvaを使っています。

シンプルでおしゃれな画像を作ることができます。

当ブログ風コンテンツナビゲーションの作成方法

挿入コンテンツ →タブ →レイアウト →PCとTab →好きな設定を選択

当ブログの場合、レイアウトの3分割を使ってボタン画像を配置しました。

画像サイズを指定することで、スマホ表示でもきれいに3分割でナビゲーション画像を表示させることができます。

2段にする場合は同じ要領で作ります。

応用してサイドバーにも設定することができます。

2分割して画像サイズを変更すれば挿入可能です。

ポイントはCanvaを使って見たくなるようなボタンを作ることかもしれません。

統一感のあるシンプルな画像を作成しましょう。

サイドバーに画像ナビゲーションを配置する方法

サイドバーに画像ナビゲーションを配置する方法は簡単です。

トップページに配置した方法を応用しておこないます。

2分割で画像サイズは150幅のピクセルで設定すればサイドバーに収まります。

HTMLコードをHTMLウィジェットにコピペすれば設置完了です。

自作で作成した固定ページをブログのトップページに設定する

自作した固定ページをトップページに設定する方法です。

  1. 設定方法1 AFFINGER設定で、トップページに固定記事を挿入
  2. 設定方法1 カスタマイザーで「ブログトップページを表示させた状態 →カスタマイズ →ホームページ設定 作成した固定ページを選択して保存

これで設定完了です。

準備した固定ページがブログのトップページになっているはずです。

トップページを確認しましょう。

これでAFFINGERのトップページ設定はとりあえず完了!

お疲れ様でした!

PS:トップページの記事一覧を2列カード式で表示する子テーマを作成

トップページの記事一覧を2列カード式で表示する子テーマを作成しました。

このオリジナルの子テーマをAFFINGER購入特典としてプレゼントしています。

》AFFINGER 当ブログ限定特典の説明

【超重要】AFFINGER6 おすすめ記事の設定

ヘッダーカード、サイドバーのおすすめ記事の設定方法とおすすめ記事の選定の理論を画像付きで具体的に解説しました。

ブログ記事全体のカスタム方法はこちらの記事を参考にしてください。

  • サイト全体の設定
  • フォント設定
  • プロフィール設定

【10特典付】AFFINGER6購入レビュー|損をしない買い方

アフィンガーの特典付き購入方法と当ブログのオリジナル特典について説明しました。

アフィンガー(AFFINGER)はこんな人におすすめ

  • HTML + CSSの知識がなくても記事の装飾をよくしたい
  • 個人でアフィリエイトや情報発信を本格的に始めたい
  • 無料のものを使うより有料のものを使って利益に差をつけたい
  • ブログを高速化させてSEO対策をしたい
  • 検索順位を上げてアクセスと収益を上げたい

アフィンガー(AFFINGER) 当ブログ限定特典

特典のサンプルはこちら

当ブログからアフィンガー(AFFINGER)を購入してくれた人にオリジナルの特典を用意しました

この特典は当ブログが独自に用意した非公式の特典なので他では入手できません。

特典に関するお問い合わせ等はYoake Webまでお願いします。

オリジナル11特典・内容

  • AFFINGER 特典1 稼げるキーワード
  • AFFINGER 特典2 会員限定有料ブログ簡易版・閲覧権(通常980円)
    詳細 ブログを独学でマスターしたい人のための有料ブログ
  • AFFINGER 特典3 ブログの始め方
  • AFFINGER 特典4 セルフプロデュース講座
  • AFFINGER 特典5 自動収益システム構築法
  • AFFINGER 特典6 あなたにメリットをもたらす"7つの習慣"速習
  • AFFINGER 特典7 【2020年】AdSense(アドセンス)審査に合格する方法
  • AFFINGER 特典8 再配布OKのレポート
  • AFFINGER 特典9 WordPress・AFFINGER 構築チェックシート
  • AFFINGER 特典10 ブログ動画講座(30分)
  • AFFINGER 特典11 最強のブログ戦略〜ドラッカー理論とマーケティングで個人起業を攻略

ふなさん

趣味でブログをやりたい人なら無料テーマで十分ですが、速く結果を出したい稼ぎたいブロガーは速攻で使うべきブログテーマです。

私もプチ目標である月収50万円をはるかに超えることができました。

AFFINGERの購入リンクはこちら

AFFINGER 11特典付き購入

当ブログ限定11特典付き

AFFINGER PACK3 特典付き

AFFINGER PACK3(11特典付)

当ブログ限定11特典付き

AFFINGER6 ブロックエディタ対応

AFFINGERの購入方法

  1. アフィンガー料金 WordPress有料テーマ比較!AFFINGER購入レビュー
  2. AFFINGER6にアップデート可能・特典付き購入方法
  3. AFFINGER PACK3【当ブログ限定】特典付き購入リンク

AFFINGERの使い方・設定・購入方法

  1. AFFINGERとは?購入手順&カスタマイズ方法 初心者向け【簡単です】
  2. AFFINGER5の使い方・設定・記事の書き方【初心者向けまとめ】
  3. AFFINGER5(アフィンガー5)デメリットとは?デメリット解消法
  4. AFFINGER5の初期設定は簡単!初心者でもできる使い方を解説!

AFFINGER カスタマイズ ガイド

  1. AFFINGERでスマホ用フッター固定メニューを表示
  2. 【超重要】AFFINGER5 記事一覧の使い方|おすすめ記事・人気記事の設定
  3. AFFINGER5会話吹き出しの使い方・口コミ評価お客様の声の作り方
  4. AFFINGER5(アフィンガー5)目次プラグイン 公式以外のおすすめ

おしらせ

ネットはやっぱり面白い: 20年ほどネットで稼いでいる変な人の思考 (YOAKE Web) Kindleを出版しました。 『ネットはやっぱり面白い』 令和、新型コロナ、外出自粛・・・ どんどん時代が変わる中、1999年から20年ほどネットで稼ぎ続けている変な人が書いた本。 とにかく現代では最低限生きていくために必要なことのひとつとして、求められていることは「自宅に居ながらにして収入を得る」ということではないだろうか? Amazonで購入

販売コンテンツ


友だち追加

今日はランキング何位?

当ブログ人気【第1位】AFFINGER6

affinger6 ACTION

アフィリエイトに強いWordPressテーマ「AFFINGER6」

ついにブロックエディタに対応。

【第2位】AFFINGER PACK3

AFFINGER EXと強力な分析ツールがセットになった「AFFINGER PACK3」

【第3位】SANGO

ブロックエディタに完全対応。

ブログ初心者向けの簡単設定でおしゃれなデザインに。

表示速度も軽い有料テーマ。

1万円以内で使い回しOKの有料テーマ。

  • この記事を書いた人

よあけウェブ

【著者プロフィール】ふなさん
▶︎ WEBマスター歴20年以上/元WEBデザイナー(出版社のHPなど)
▶︎ WordPress構築歴は10年以上
▶︎ 資格:ネットショップ実務士レベル1/基礎心理カウンセラー
▶︎ WordPress構築最適化・テーマの活用方法・アフィリエイトブログの作り方など発信
▶︎ ブログ収入は1000万円以上を達成しています。
▶︎ 掲載しているノウハウ・結果には個人差があり、成果を保証するものではありません

▶︎ 趣味:ブログ・音楽・筋トレなど

-AFFINGER6
-