【徹底的に解説】AFFINGER6の設定・デザインをカスタマイズ方法まとめ

 

 

本記事では、AFFINGER6（アフィンガー6）の設定方法を紹介した記事を実際の事例をもとに紹介していきます。

 

まだWordPressテーマAFFINGERを使い初めて慣れていない方やカスタマイズの困っている方はぜひ参考にしてください！

 

AFFINEGRは利便性が優れており、デザインもかなり自由自在にカスタマイズできる優れたWordPressテーマです。AFFINGER6（アフィンガー6）のカスタマイズ方法を徹底解説していきます！

 

 

＼ 当ブログ使用テーマ ／

AFFINGER6の購入はこちら

 

＼ AFFINGERのカスタマイズまとめ ／

【徹底的に解説】AFFINGER6の設定・デザインをカスタマイズ方法まとめ

続きを見る

 

トップページをカスタマイズ

 

まずはWebサイトの玄関となるトップページのカスタマイズ方法についての紹介です。

 

自身のページに取り入れやすいものがあればご活用ください！

 

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

紹介するカスタマイズの項目は以下の４つになっています。

 

 

【AFFINGER6】トップページのカスタマイズ方法

続きを見る

 

サイトタイトルとロゴ画像のカスタマイズ方法

ヘッダー部分の「サイトロゴ」に関するカスタマイズ方法の解説です

 

 

 

【AFFINGER6】サイトタイトルとロゴ画像のカスタマイズ方法

続きを見る

 

ヘッダー上に流れるインフォメーションバーを作る方法を解説

インフォメーションバーとは、特定の記事に誘導したり、収益記事への注目を集めることのできるサイト上部に表示される情報コンテンツです。

 

これを作成することで、より効率的な収益化につなげることも可能になります。

 

 実際のインフォメーションバーはこんな感じ

【AFFINGER6】ヘッダー上に流れるインフォメーションバーを作る方法を解説

続きを見る

 

 

トップページの記事タイトルの文字のカスタマイズ方法

「AFFINGER」のトップページの記事タイトルの「文字の大きさ」や「行間の高さ」の調整方法について解説になります。

 

「AFFINGER」をご使用している方は共感していただけると思いますが、アフィンガーはとても幅広くカスタマイズがテーマないで行えるワードプレステーマです

 

【AFFINGER】トップページの記事タイトルの文字のカスタマイズ方法

続きを見る

 

トップページにドロップシャドウをカスタマイズ

【AFFINGER6】トップページにドロップシャドウをカスタマイズ

続きを見る

 

スマホヘッダーロゴの高さ調整について（コピペでOK！）

スマホのヘッダーエリアについて解説しています。

 

「サイトタイトル」や「サイトのロゴ」が表示されるエリアであり、どのサイトのトップページにも基本的には表示させる言わばホームページの標識みたいなものです。

 

以下の画面がスマホで表示されたホームページのヘッダーエリアです。

 

 

【AFFINGER】スマホヘッダーロゴの高さ調整について（コピペでOK！）

続きを見る

 

スマホトップページのヘッダー高さ・アイコンの調整方法解説

スマホトップページのヘッダー高さやアイコンの調整方法の解説をしています。

 

【AFFINGER6】スマホトップページのヘッダー高さ・アイコンの調整方法解説

続きを見る

 

ヘッダーメニューにWEBアイコン（Font Awesome）の表示方法を解説

「AFFINGER」ヘッダーメニューにWEBアイコン（Font Awesome）の表示方法を解説

続きを見る

 

 

スマホ・タブレット用ミドルメニューの設定方法【スマホユーザーに向けて】

スマホ・タブレット用のミドルメニューの設定方法についての記事です。

 

これはスマホやタブレット端末の閲覧時限定で表示されるメニューになり、スマホユーザーが多くなっているため、工夫次第ではかなり効果的にPV数なども増やすことにつながります。

 

 実際のスマホ用ミドルメニューはこちら

 

【AFFINGER6】スマホ・タブレット用ミドルメニューの設定方法【スマホユーザーに向けて】

続きを見る

 

ヘッダーカードの作り方とカスタマイズ方法

ブログやホームページのヘッダーエリアで読者の注目を集めてくれる「ヘッダーカード」の設置方法についての解説です。

 

ヘッダーカードを配置することで、誘導したい記事やリンクへのクリック率を向上することが期待できます！

 

 

【AFFINGER6】ヘッダーカードの作り方とカスタマイズ方法

続きを見る

 

記事スライドショー設定を設定方法について

記事スライドショーについてです。新着記事やそのサイトのイメージ画像などを順番に表示させることができます。細かい設定も行うこともでき、ホーム画面にスライドショーがあるだけで一気にそれっぽいデザインにできます。

 

 実際の記事スライドショーはこちら

【AFFINGER6】記事スライドショー設定を設定方法について

続きを見る

 

お知らせ(新着記事)の作り方を紹介【クリック数UPにもつながります】

「新着記事」は、自分のブログを更新して際に、自動的にトップページに更新情報を上げてくれるものになります。

 

それが設置されていると、ブログの更新頻度などが一目でわかるので、読者のユーザーに注目してもらえるチャンスになります。

 

 実際の「新着記事」の項目

 

 

【AFFINGER6】お知らせ(新着記事)の作り方を紹介【クリック数UPにもつながります】

続きを見る

 

タブ式カテゴリーの作成とカスタマイズについて

 

AFFINGER6のタブ式カテゴリー表示の切り替えについての説明です。

 

この機能を使うことで、タブの切り替えにてで各ジャンルやカテゴリーに分けて、投稿記事を表示することができ、AFFNGERユーザーに人気の機能になっています。

 

 トップページのタブ式カテゴリー表示はこちら

 

 投稿記事でもタブ機能は使用可能

 

 

【AFFINGER6】タブ式カテゴリーの作成とカスタマイズについて

続きを見る

 

【AFFINGER6】アイキャッチ画像の設定方法とカスタマイズのご紹介

初心者の向けにアイキャッチ画像の設定方法について紹介。

 

アイキャッチ画像は、その記事がどんな内容なのかを読者のユーザーにイメージしてもらうための画像です。

 

読者のユーザーを惹きつける工夫についても紹介しています！

 

【AFFINGER6】アイキャッチ画像の設定方法とカスタマイズのご紹介

続きを見る

 

プロフィールカードを作成する方法を解説

AFFINGERで作成するプロフィールカードの完成図は以下のようなデザインになります。

 

 

SNSのプロフィールのようなデザインで、簡単にオシャレなものが作成できます。

 

【AFFINGER】プロフィールカードを作成する方法を解説

続きを見る

 

 

人気上位の記事を表示する方法【WordPress Popular Posts】

プラグイン「WordPress Popular Posts」を使って作成した人気記事のコンテンツを作成していきます。

 

 実際に作成した人気記事一覧

 

こんな感じのデザインになります。

 

順位・アイキャッチ画像・タイトル・抜粋が確認でき、ユーザーにとってもわかりやすいコンテンツが自動でランキング順に紹介が可能です。

 

【AFFINGER6】人気上位の記事を表示する方法【WordPress Popular Posts】

続きを見る

 

 

WordPress Popular PostsのCSSコードを編集してカスタマイズ方法はこちら。

 

 実際の記事のランキング表示

 

 

【WordPressプラグイン】WordPress Popular Postsのカスタマイズ方法

続きを見る

 

おすすめ・よく読まれている記事一覧を設定する方法を解説

おすすめ記事を作成し、上手に設定することであなたが読者のユーザーに読んでほしいキラー記事や全体のPV数がUPして、ブログでの収益にもつながります。

 

そうするためには、「おすすめ記事」や「よく読まれている記事」などを設定することが重要になってきます。

 

おすすめ記事には自分の記事だけではなく、自信が誘導したいセールス記事への誘導も可能になるので、ぜひ活用してみましょう。

 

 サイドバーのよく読まれている記事はこちら

 

 

新着記事・関連記事エリアをカスタマイズする方法

AFFINGER6で新着記事エリアと関連記事エリアをカスタマイズする方法について紹介していきます。設定方法は２パターンあります。

 

 新着記事エリアをカスタマイズする方法

 

 完成形の新着記事イメージはこちら

 

 完成形の記事記事イメージはこちら

 

【AFFINGER6】新着記事・関連記事エリアのカスタマイズ方法を解説

続きを見る

 

記事項目の「カテゴリー」「 投稿日時・ぱんくず・タグ」配色設定とカスタマイズ方法を解説

「カテゴリー」「投稿日時・ぱんくず・タグ」の配色設定とカスタマイズ方法を紹介していきます。

 

設定項目は、記事ページの以下の項目です。

 

 

【AFFINGER6】記事項目の「カテゴリー」「 投稿日時・ぱんくず・タグ」配色設定とカスタマイズ方法を解説

続きを見る

 

 

AFFINGERの機能を使ったランキングの作成する方法

AFFINGER6では、プラグインを使用せずに簡単にランキングを表示することが可能です。

 

各商品リンクやテキスト、装飾は自由にカスタマイズが可能ですので、ASPサイトのリンクを用意して収益化も目指せます。

 

 実際に作成したランキングがこちら

 

【AFFINGER6】AFFINGERの機能を使ったランキングの作成する方法解説【超簡単！】

続きを見る

 

 

スマホ用フッターメニューの設置方法とカスタマイズについて

スマホでの閲覧時に画面下にメニューを表示させる方法について解説しています。

 

いろんな設定が可能でメニューの数やリンク先などは幅広くカスタマイズすることができます。

 

 実際のスマホ用フッターメニューはこちら

 

【AFFINGER】スマホ用フッターメニューの設置方法とカスタマイズについて

続きを見る

 

フッターを２列３列に設定・カスタマイズする方法

フッターとは、ブログやホームページの最下部に位置するメニューエリアのことを指します。

 

ほとんどのWebサイトには設置されており、シンプルなものから手の込んだカスタマイズがされているものまであります。

 

 実際のフッターメニューはこちら

 

Twitterカードを設定する方法

「Twitterカード」とは、Twitterに自分のブログの記事更新したことを紹介した際に、ブログカードのような " アイキャッチ " と " タイトル " を表示することができるカード型のものです。

 

 実際のtwitterカード

Googleアドセンスの審査合格を目指している方、また僕が審査を通った時のポイントをまとまてみました😄

参考にしてみて下さい！#ブログ初心者 #Googleアドセンス #ブログ初心者と繋がりたい #ワードプレス #ワードプレス #Blog #合格https://t.co/S2xhNge7zt

— ルーティンラボ (@rutinelabo) September 21, 2021

 

【AFFINGER】Twitterカードを設定する方法

続きを見る

 

ダウンロードとアップデートする方法

【AFFINGER6】ダウンロードとアップデートする方法

続きを見る

 

お問合せフォームの作成方法について

お問合せフォームを作成するべき理由と作成方法について解説しております。

 

実際のところ、ブログなどでも読者の方とコンタクトを取れなくても運営は可能ですが、お問い合わせフォームを作成することで多くのメリットが存在します。

 

以下の記事を是非参考にしてみてください

 

【AFFINGER6】お問い合わせフォームを設置する簡単な方法と設置するメリットの解説【すごく簡単！】

続きを見る

 

投稿記事で活用可能

 

投稿ページにて活用できるカスタマイズ方法の紹介です。

 

細かい設定をあらかじめすることで、読者のユーザーの滞在率やクリック率の向上を狙えます。

 

 

目次の作り方 3つのパターンを徹底解説

 

 アフィンガーで目次を作り方３パターン

 

まずは、３つのパターについてそれぞれの特徴を解説していきます。

 

【AFFINGER】目次の作り方 3つのパターンを徹底解説

続きを見る

 

 

「すごいもくじ」のダウロード方法を解説

AFFINGERjユーザーの方に向けて「今すぐ使ってほしい機能」を紹介します。

 

それが「すごいもくじLITE」というプラグインです。

 

簡単に説明すると、自動でかなり本格的な目次を作ってくれるAFFINGERユーザー専用のプラグインです。

 

【AFFINGER】「すごいもくじ」のダウロード方法を解説

続きを見る

 

内部・外部リンクのブログカードを設置する方法について

AFFINGER6を利用し、内部リンクをブログカードに表示する方法をご紹介します。

 

AFFIINGERの機能を使用することで、簡単に作成できます！

 

また、デフォルトでAFFINGER6には標準で外部リンクのブログカード作成する機能は備わっていません。

 

そのため、WordPressのプラグインをインストールすることで作成可能となります。

 

【AFFINGER6】内部リンク・外部リンクをブログカードで作る方法

続きを見る

 

 

ボックスメニューの作り方とカスタマイズ方法を紹介

AFFINGERのボックスメニューとは、以下のようなアイコンをメニューに表示することのできるものです。

• 

  メニューA

  サブテキスト

• 

  メニューB

  サブテキスト

• 

  メニューC

  サブテキスト

• 

  メニューD

  サブテキスト

 

アイコン付きで表示することで、ユーザーにとてもわかりやすいデザインになり、さまざまな効果をはっきしてくれます。

 

 ボックスメニューの効果

 

【AFFINGER6】ボックスメニューの作り方とカスタマイズ方法を紹介

続きを見る

 

会話吹き出しの設置方法背景色のカスタマイズ方法

AFFINGERの会話吹き出し機能の使い方について紹介。

 

完成形はこんな感じになります。

 

 

 AFFINGERの吹き出し機能の便利なところ

【AFFINGER6】会話吹き出しの設置方法背景色のカスタマイズ方法

続きを見る

 

投稿記事・ブログカードのカード内に文を表示させる抜粋設定について

ブログカードの「抜粋設定」の設定方法について解説です。

 

「抜粋機能」のON /OFFを切り替えたサンプルイメージは以下通りになっていますので、詳細は以下の記事リンクより参照して見て下さい！

 

投稿記事のON /OFF

 

 

新着記事 or 関連記事のON /OFF

 

このように、投稿記事の「抜粋機能」を切り替えることで、かなりサイトの見え方やデザインが変わってくると思います。

 

【AFFINGER6】投稿記事・ブログカードのカード内に文を表示させる抜粋設定について

続きを見る

 

アフィンガーでブログカードを作る方法【超簡単に作成可能】

AFFINGERのブログカードはかなり便利です。

 

 今回作成するブログカードの完成イメージ

【AFFINGER6】クリック率UP！ブログカードを作る方法【超簡単に作成可能】

続きを見る

 

 

AFFINGER6とプラグインを使用してソースコードを表示させる方法について

WordPressなどでブログ運営している方の中には、デザインの変更を加えるCSSコードの編集やプログラミのソースコードを触る機会はあるかと思います。

 

本ブログ同様ですが、AFFINGERの機能を活用している方はソースコードの表示を簡単に行えますので、ぜひ参考にしてみて下さい。

 

【AFFINGER6とプラグイン】WordPressでソースコードを表示させる方法を紹介

続きを見る

 

 

また、プラグインの活用にて、ブログやサイト上にソースコードの挿入を行いたいという場合には、以下の記事を参考にしてみて下さい。

 

WordPressでソースコードを埋め込むプラグイン「Enlighter – Customizable Syntax Highlighter」

続きを見る

 

WordPressにソースコードを埋め込みたい時にオススメのプラグイン「CodeMirror Blocks」を解説

続きを見る

 

有名ブロガー風にチェックマークを表示する方法

有名ブロガーである、ManablogやTsuzukiblogなどは、投稿記事の注目箇所にチェックマークが使われており、読者のユーザーにとても読みやすいコンテンツになっています。

 

有名ブロガーさんにマネて、チェックマークの使用方法と色や大きさのカスタマイズを紹介しています。

【AFFINGER6】有名ブロガー風にチェックマークを表示する方法

続きを見る

 

使えると便利なYoutube動画リンクを軽くできる【テクニック】

AFFINGER6でYouTubeリンクを軽くできる方法の紹介です。

 

方法はとてもシンプルで、AFFINGERタグの使う方法になります。

 

【AFFINGER6】使えると便利なYoutube動画リンクを軽くできる【テクニック】

続きを見る

 

クリック率アップに繋がる、カスタムMCボタンをおしゃれにする方法

カスタムMCボタンとは何か？WordPressテーマ「AFFINGER」を使用中の状態にて、下のようなボタンを作っていきます。

 

 

 

 

わかりやすいボタンを設置することで、クリック率や成約率の向上することができます！

 

【AFFINGER6】クリック率アップに繋がる、カスタムMCボタンをおしゃれにする方法

続きを見る

 

ブログ内でツイートを横並び表示する方法

ブログでツイートを横並びで表示するとこんな感じなります。無駄な余白がなく、見た目もスッキリしている感じですね。

 

 以下ツイートの横並び例

 

【AFFINGER】ブログ内でツイートを横並び表示する方法

続きを見る

 

SNSボタンと「この記事タイトルとURLをコピー」のコピーボタンの設置する方法【SNS活用に便利】

SNS共有ボタンと「この記事タイトルとURLをコピー」のボタンについての説明です。

 

どのブログでも、ページの最上部か最下部のあたりにSNSマークや「この記事タイトルとURLをコピー」の設置がされているかと思います。

 

このボタンを設置することで、SNSへの共有しやすくなるので、記事の拡散率も向上が図れます。

 

 実際の場面はこちら

 

AFFINIGER6の管理画面にて、簡単に設定できるので参考にして下さい。

 

【AFFINGER6】「この記事タイトルとURLをコピー」のコピーボタンを設置する方法【SNS活用に便利】

続きを見る

 

Gogleアドセンスの設置方法について

 

GoogleアドセンスのJETのインフィード広告の設定方法を紹介

JETは簡単におしゃれなカード型のサイトを作成することができます。

 

インフィード広告の利用も行って、収益化も目指してみましょう！

 

 

【AFFINGER】JETのインフィード広告の設定方法とズレる対策

続きを見る

 

AFFINFERにて、広告の横並び表示方法について解説

アドセンスを横並びに配置することで、異なる広告を掲載することが可能になります。

 

異なる広告表示を行うことで、ユーザーの方に興味を引くような広告を表示する回数が増える効果が期待できのでおすすめですよ！

 

 実際の横並びのアドセンス広告

 

 

【Googleアドセンス】AFFINFERにて、広告の横並び表示方法について解説

続きを見る

 

AFFINGER利用した広告の設置方法と最適な設置位置を解説

AFFINGER利用したGoogleアドセンスの広告の設置方法と最適な設置場所についての解説をしております。

 

Googleアドセンスの審査に通って、どのような設定を行えばいいかわからない人は参考にして見て下さい。

 

【Goolgeアドセンス】AFFINGER利用した広告の設置方法と最適な設置位置を解説

続きを見る

 

AFFINGER」をアフィリエイトする方法とASPサイトの紹介

カスタマイズの他にも、AFFINGER6をアフィリエイトととして、紹介し収益を目指すことも可能です。

 

収益化を目指すと言う人は、参考にして見て下さい。

 

「AFFINGER」をアフィリエイトする方法とASPサイトの紹介

続きを見る