本ページにはプロモーションが含まれています。

ブログ 最新

AFFINGER6(アフィンガー)トップページカスタマイズ方法 |スライドショー設定をブロックエディタで解説

ブログのデザインテーマ、AFFINGER6を導入したけど、トップページやデザインのカスタマイズ方法がよくわからない。

おしゃれで見やすい設定方法教えて!!

こんなお悩みを解決します。

この記事では、初心者向けに簡単におしゃれなトップページやサイトが作れる方法を紹介します。

本記事の内容

  • AFFINGER6のトップページ
  • AFFINGER6でトップページの設定方法
  • AFFINGER6でサイドバーの設定方法
  • AFFINGER6で頻繁に使う装飾デザインの変更
  • 補足:ステマ規制対策

AFFINGER6(アフィンガー)は、デザインだけではなくカスタマイズも豊富で、稼ぐブログに特化したテーマです。ブログで稼ぐには必須アイテムの一つです。

ただ、導入直後は慣れないので難しく感じるかもしれません。

そのような方に画像付きの解説でトップページやサイト設定の方法を紹介します。

ブログサイトをおしゃれ×見やすくすることで、ブログへのアクセス数、回遊率が上がります。

さらに収益化にも繋がりやすくなります。

では、順番に設定方法を解説していきます。

注目

AFFINGER6の導入がまだの方は、こちらから導入してくださいね。

\稼ぐに特化したブログサイトへ/

AFFINGER6を特典付きで導入

期間限定で特典プレゼント付き

いや、まだブログすら作ってないよ。。。って方はこちらから導入できます。

初心者でもたった10分程度で開設できます。






AFFINGER6(アフィンガー6)の特徴

AFFINGER6は、WordPress(ワードプレス)ブログを自分好みにカスタマイズする有料テーマの一つです。

基本情報は以下の通りです。

項目内容
テーマ名AFFINGER6
料金14,800円
販売形態買い切り
購入方法クレジットカード、銀行振込は
複数サイトでの利用
SEO対策
おすすめ度⭐︎⭐︎⭐︎⭐︎⭐︎

数ある有料テーマの中でAFFINGER6をオススメする理由、これについても後に解説しています。

次に、AFFINGER6の特徴についてまとめました。

AFFINGER6の特徴

  • SEO内部対策がしっかりしていて【稼ぐ】に特化している
  • オシャレなデザインが豊富
  • 文字の装飾やボタン、吹き出しなどカスタマイズ性が高い
  • 複数サイトで運用できる
  • 人気のテーマなので困った時もネット情報が豊富

一度の買い切りで、複数のブログに利用可能で使い続けられます。

購入して良かったと思う点はたくさんありますが、検索上位のサイトはAFFINGERを使用した記事が多いです。

有名ブロガーの多くがAFFINGERを利用していることは、初心者には心強いと思います。

AFFINGER6について詳しいレビューは以下の記事に掲載しています。

AFFINGER6(アフィンガー6)導入方法

AFFINGER6を導入していない方は、こちらのやり方で進めていきましょう。

初心者向けに簡単にできる3ステップでまとめてあります。

AFFINGER6の導入方法

  • AFFINGER6を購入
  • AFFINGER6のダウンロード
  • テーマの有効化を設定画面で行う

10分程で行えます。

公式サイトよりも初心者の方にわかりやすく解説しているので、こちらの手順方法をぜひ参考にしてくださいね。

デザイン

AFFINGER6(アフィンガー)トップページカスタマイズ完成形はこちら

AFFINGER6の導入が終われば、トップページをカスタマイズしていきます。

本記事で紹介するカスタマイズ方法はAFFINGER6(アフィンガー)では人気のトップページ完成形となります。

利用頻度が高い装飾のデザインも合わせて紹介します。

本記事で紹介するデザイン設定

  • 見出し(h2、h3など)デザインの設定
  • 吹き出しデザインの設定
  • 関連記事の設定

本記事では、ブロックエディタでの解説となります。

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

① 見出しデザインの設定

まず、『見出し』は「+」マーク→「見出し」で表示されます。

デザイン変更は以下の通りです。

「ダッシュボード」→「外観」→「カスタマイズ」→「見出しタグ(hx)とテキスト」

見出しタグ

また、別の方法でも変えられます。

見出しは「+」から①「見出し」をクリック、②「ブロック」を選びます。

③「スタイル」を押すと選べるデザインが表示されます。


②吹き出しデザインの設定

吹き出しデザインの設定は以下のとおりです。

「ダッシュボード」→「AFFINGER管理」→「会話アイコン設定」

吹き出しにできる画像は8個まで設定できます。

記事の編集画面では、「+」マーク→「会話吹き出し」から選ぶことができます。

吹き出しの色や向きも変更可能です。

画像の向きは、記事の編集画面で変更できます。

  • 「編集」→「ブロック」→「スタイル」

吹き出しの色は以下の通りです。

  • 「ダッシュボード」→「外観」→「カスタマイズ」→「オプション」→「会話ふきだし」

③ 関連記事の設定

関連記事を挿入する方法を紹介します。

【記事ID入力方法】

ブログテーマAFFINGER6
【忖度無し】AFFINGER6(アフィンガー)有料テーマ本音レビュー【メリットとデメリット】と導入方法

2024/1/10

ブログを開設したら、必ず耳にするのがブログのデザインテーマについてです。 最初はどれがいいのか迷いますよね。 私も同じように悩み、時間をかけてしまいました。 同じ悩みを持つあなたに無駄な時間は費やさず ...

「+」マーク(もしくは、「/」を入力)→「記事一覧(ID)」を開きIDナンバーを入力して挿入。

記事IDは、「ダッシュボード」→「投稿一覧」の▼を開くとIDが表示されます。

次にブログカードとして表示する方法です。

2パターン紹介します。

ブログカードとは、カード状のリンクのことです。

記事の中で、「合わせて読みたい」と紹介されている記事を見たことがありませんか?

文字だけのリンクよりもインパクトがあり、見やすいです。

方法①:URLを直に貼り付ける

記事の編集画面を開きます。

表示させたいところに、カーソルを合わせます。

「ブロックを選択するには「/」を入力」という文が表示されたらOKです。

その部分にカードにしたい内部リンク記事のURLをペーストします。

URLが自動的にブログカードに変換されます。

ブログカード

方法:埋め込みブロックでURLを貼り付ける

「+」を表示させて、一覧の中から『埋め込み』のブロックを選択します。

編集画面にブロックが反映されます。

空欄にカードにしたい内部リンク記事のURLを入力します。

埋め込みボタンを押します。

ブログカードが表示されます。

「+」マーク→ 「埋め込み」を選択して、ブログ記事のURLを入力して挿入。

埋め込みブロック

ブログカードは内部リンクの記事のみ作成可能です。

外部リンクで作成する場合、別途プラグイン等が必要になります。

以上が、ブログカードを表示させる方法でした。

次は、ブログカードをアレンジする方法をお伝えします。

より見やすくなりますよ。

ブログカードにラベルをつける方法

AFFINGERでは、ブログカードに文字入りのラベル(飾り)を付けることができます。

ここでは、2パターン紹介します。

方法①:カードの後方にラベルを追加する

カードの後方(お尻側)にラベルを追加する方法です。

ブログカードの右上にテープ状のラベルを表示出来ます。

まず、ブログカードの下に『キャプションを追加』という部分があります。

そちらに好きな文字を入力します。(例:合わせて読みたい、参考など)

編集画面では表示されませんが、記事では表示されます。

因みに、ラベルの色も変更可能です。

ラベルの色を変更

方法②:カードの前方にラベルを追加する

カードの前方(頭側)にラベルを追加する方法です。

このラベルは文字と背景色固定で4パターンあります。

編集画面で、ブログカードを選択した状態にしておきます。

ブロック編集画面に『高度な設定』という箇所があるので、そちらをクリックします。

『追加CSSクラス』という項目に下記の4パターンのいずれかのクラス名を入力します。

CSSクラス

以上がブログカードのよく使う操作となります。

AFFINGERでおしゃれなトップページカスタマイズ方法

次に、トップページのデザイン設定の方法を解説していきます。

以下の順番に説明します。

  • ブログのサイト名を変更する
  • ファビコン(サイトアイコン画)を変更する
  • ヘッダー・フッターメニューを変更する
  • サイドバー関連を変更する(自己紹介、よく読まれる記事)
  • スライドショーの設定方法
  • 番外編:ステマ規制対策

①:ブログのサイト名を変更する


まずは、ブログのサイト名をつけましょう。

変更方法は、2パターンあります。

  • サイトの基本情報から変更
  • ロゴ画像で変更する

方法①:サイトの基本情報から変更

サイト名だけを変更する方法です。

ダッシュボード→外観→カスタマイズ→サイトの基本情報→サイトのタイトル

サイト基本情報から変更

変更したら「公開」をクリックしましょう。

サイト名を設定すると、ヘッダーとフッター両方とも変更になります。

サブタイトルであるキャッチフレーズはお好きな内容でOKです。

方法②:ロゴ画像で変更

Canvaなどで作成したロゴ画像や写真データを貼り付ける方法です。

ダッシュボード→外観→カスタマイズ→ロゴ画像/サイトのタイトル→ロゴ画像

画像を挿入したら、「公開」をクリックしましょう。

ロゴの高さは、「ロゴの最大の高さ(px)」で変更できます。

スマホのロゴ画像は「スマホロゴ画像」で変更します。

②:ファビコン(サイトアイコン)を変更する

ファビコンとは、ブログ訪れた時に表示されるアイコンのことです。

設定しておくと個性が出て認知されやすいのでクリックされやすくなります。

ダッシュボード→外観→カスタマイズ→サイトの基本情報→サイトのアイコン

①の場所と同じですね。

サイトアイコンに画像を挿入して「公開」をクリックします。

画像サイズは512×512ピクセル以上が推奨されています。

③:ヘッダー・フッターメニューを変更する

次に、ヘッダーメニューとフッターメニューを作成します。

あらかじめ固定ページやカテゴリーでメニューに表示させる項目を作成しておく必要があります。

この「事前準備」から解説していきます。

すでに準備ができている方は、ヘッダメニューの作成方法まで飛ばしてください。

項目を作る方法は2パターンあります。

  • 投稿のカテゴリーから作る
  • 固定ページから作る

方法①:投稿のカテゴリーから作る

ダッシュボード→投稿→カテゴリー→新規カテゴリーを追加

  • 名前:ヘッダーメニューにつける名前
  • スラッグ:半角の小文字、英数字とハイフンのみ使用可能
  • 親カテゴリー:なし (基本的になしでOK)

記入後、「新規カテゴリーを追加」をクリックしましょう。

方法②:固定ページから作る

ダッシュボード→固定ページ→新規追加

  • タイトルを追加:メニュー名を記入する
  • ブロックを選択:詳細を書く
  • 開く
  • URL:パーマリンクの変更→必ず英語表記

記入後、「公開」をクリックしましょう。

固定ページでは、titleタグ、メタディスクリプションやアイキャッチ画像は不要です。

①:ヘッダーメニューの作り方

事前準備が出来たら、ヘッダーメニューやフッターメニューを作成していきます。

まずは、ヘッダーメニューについて解説します。

ダッシュボード→外観→メニュー→新しいメニューを作成

メニュー構造の画面では以下の通りに設定します。

  • メニュー名:ヘッダーメニュー
  • ヘッダーメニューを含む項目にレ点を4ヶ所つける
  • メニューを作成をクリック

メニュー名を入れて、入れたいカテゴリーにチェックを入れて、「メニューに追加」クリックします。

最後に「メニューを保存」をクリックしておきましょう。

メニューの文字色や背景色は変更可能です。

自分のサイトに合わせて変更してみましょう。

ダッシュボード→外観→カスタマイズ→基本エリア

②:フッダーメニューの作り方

次にフッターメニューを設定していきます。

ダッシュボード→外観→メニュー→新しいメニューを作成

  • メニュー名:フッターメニュー
  • フッターメニューを含む項目にレ点を2ヶ所つける
  • メニューを作成をクリック

固定ページからメニューを追加します。

  • フッターメニューを選択
  • 固定ページ→すべてを表示→メニューに追加
  • 好きな位置にドラッグ
  • メニューを保存

④:ヘッダーカードの作り方

次にヘッダーカードの作り方について解説します。

最大4つ設定できます。

ダッシュボード→AFFINGER管理→ヘッダー下/おすすめ→ヘッダーカード

ヘッダーカードは、『サイト全体に表示する』にチェックを入れると、個別ページを閲覧するときにも表示されます。チェックをなくすとトップページ閲覧時しか表示されません。

設定したい画像をそれぞれアップロードしてテキストを入力します。

リンク先のURLを貼って保存するだけです。

『デザイン』では、カードの背景をぼかしたり暗くしたり設定できます。

設定したら、「Save」を忘れずにクリックしてください。

ヘッダーカードエリアの背景色を変更

ダッシュボード→外観→カスタマイズ→基本エリア設定→ヘッダーカードエリア→色の選択

設定したら、「公開」をクリックしましょう。

⑤:サイドバーの設定方法(プロフィール・よく読まれる記事・広告)

サイドバーの設定方法を紹介します。

  • プロフィールカードの作り方
  • 検索フォームの設置方法
  • よく読まれている記事の表示方法
  • カテゴリー別一覧の表示方法
  • スライドショーの設定方法

プロフィールカードの設定

ダッシュボード→ユーザー→プロフィール情報

上記の画面では、名前、アイコン、プロフィール文、SNSのURLの設定ができます。

最後まで入力をしたら、「プロフィールを更新」をクリックします。

自己紹介文をバランスよく表示させるには…?

改行をしたい場所の前に<br>を入力します。

全て入力したら、「プロフィールを更新」をクリックします。

サイドバーに設置する方法

ダッシュボード→外観→ウィジェット→11_STINGERプロフィールカード

ウィジェットを追加で、サイドバートップにドラッグ、貼り付けます。

こちらの設定は保存をクリックしなくても自動更新されます。

デザインを変更する方法

ダッシュボード→外観→カスタマイズ→オプション(その他)→プロフィールカード

変更したら、「公開」をクリックします。

②検索フォームの設定設定

検索フォームを設置する方法

ダッシュボード→外観→ウィジェット→サイドバートップ→ウィジェットに追加

配色を変更する方法

ダッシュボード→外観→カスタマイズ→オプション(その他)→検索フォーム

変更したら、「公開」をクリックしましょう。

③よく読まれている記事の表示方法

設定すると、クリックされやすい上にブログ内の回遊率が上がるのでおすすめです。

よく読まれている記事の設定方法

ダッシュボード→AFFINGER管理→ヘッダー下/おすすめ→おすすめ記事一覧

  • おすすめ記事一覧に表示する文字:よく読まれている記事
  • 任意の人気記事を指定:記事ID入力
  • サイドのスクロールに表示する:レ点をつける

全てが設定できたら、「Save」をクリックします。

記事IDは投稿一覧から確認できます。

ダッシュボード→投稿→投稿一覧→ID

配色を変更する方法

ダッシュボード→外観→カスタマイズ→オプション(その他)→おすすめ記事

変更したら、「公開」をクリックします。

④カテゴリー別一覧の表示方法

カテゴリーを設置しておくと、読者が読みたい記事を探しやすくなります。

アーカイブも同様に設置しています。

ダッシュボード→外観→ウィジェット→カテゴリー→フッター右用ウィジェット(2列目)

フッターではなく、スクロール広用に設置しているブログを多々あります。

好きな場所に設置しましょう。

変更したら、「公開」クリックします。

⑥:スライドショーの設定方法

スライドショーとは以下の形式です。

no image

ブログ 最新

AFFINGER6(アフィンガー)トップページカスタマイズ方法 |スライドショー設定をブロックエディタで解説

WordPress(ワードプレス)ブログの人気テーマAFFINGER6(アフィンガー6)カスタマイズ設定方法はこちら。初心者でも簡単にトップページをおしゃれデザインに変更できます。最後にステマ規制対策も解説しています。ブログで稼ぐなら導入は必須です。

ReadMore

クラファンソシャレン

お得情報 投資 最新

不動産クラウドファンディングとソーシャルレンディングの違いとは | 初心者にわかりやすく解説

不動産クラウドファンディングとソーシャルレンディングの違いは投資対象の違いです。融資型(貸付型)クラウドファンディングに属します。メリットデメリットとともに、どちらに投資すべきか
解説していきます。

ReadMore

COZUCHI当選コツ

お得情報 投資 最新

COZUCHI(コヅチ)当たらない?メリットとデメリットを徹底解説と当選するコツ

今大人気の不動産投資クラウドファンディング【COZUCHI(コヅチ)】 について解説します。 COZUCHIは不動産クラウドファンディングの中でも特に人気があり、応募率が1000%以上のものが多くあります。 この記事では、大人気なCOZUCHIにどのようにしたら当選できるのか、当選しやすいコツとスマホでサクッと登録できる応募方法を解説します。 メリットデメリットも併せていますので、なぜCOZUCHIが人気なのかも理解できますよ。 最後までぜひ読んでくださいね。 今すぐにCOZUCHIに無料登録するなら以下 ...

ReadMore

コインチェック1500円もらう

お得情報 仮想通貨 最新

コインチェック【BTC1500円相当もらう】仮想通貨の口座登録方法 紹介キャンペーン開催中

書類や郵送なども一切不要です。 初めてだと不安ですよね。 このキャンペーンは1円もかからず、口座登録だけで1500円相当分のビットコインがもらえます。 画像付きで解説しているので、スムーズに登録できます。 家族・友達紹介キャンペーン内容 ビットコイン1500円相当をもらう方法 コインチェックは、国内最大の仮想通貨取引所です。 コインチェックは、仮想通貨初心者でも簡単にはじめることができます。 コインチェックの口座開設方法 コインチェックの登録手順は大きく分けて3つのステップです。 ステップ1 : アカウン ...

ReadMore

表示方法はいくつかあります。

本記事では、ブロックエディタで簡単に表示させるやり方を解説します。

まず、固定ページを作ります。

ダッシュボード→固定ページ→新規追加

  • タイトルを追加:トップページ等お好みでOK
  • パーマリンクの設定:英語表記に直す
  • 「公開(更新)」をクリック

固定ページのトップページの編集を行います。

ダッシュボード→固定ページ→固定ページ一覧→トップページ

  • トップページを開き、「+」をクリックして、ブロックを追加する
  • 見出しh3をクリック
  • 「公開(更新)」をクリック

「フロントページ」と表記が追加されました。

この表示があることでトップページに反映されることがわかります。

次に

ここからがスライドショーのカスタマイズとなります。

先にもお伝えしましたが、本記事はブロックエディターでのブログカードの設定手順となります。

『STINGER:カテゴリ一覧』を選択してブログカードを設定する方法

no image
【雛形(ひな形)あり】WordPressブログのプライバシーポリシー・免責事項の書き方(コピペOK)

2024/2/24

WordPressブログでプライバシーポリシーと免責事項の雛形(ひな形)を解説しています。コピペOKで、ブログへの掲載手順も詳しく画像付きで案内しています。初心者でも5分程度でできる簡単なテンプレート内容となっています。

サチコ設定
【最新版】Googleサーチコンソールの設定方法と使い方|初心者向け導入・活用方法

2024/2/13

GoogleアナリティクスGA4の設定後、Googleサーチコンソールの導入・設定方法を解説しています。ブログサイトでのサチコの活用方法、使い方、疑問点を解説。サイト改善に役立つ無料ツールなのでWordPress(ワードプレス)ブログ開設したら登録すべきツールです。

アナリティクス活用
【2024年度版】Googleアナリティクス4(GA4)の初心者向け活用方法

2024/2/13

GoogleAnalytics(Googleアナリティクス4)(GA4)の設定方法と使い方。見るべき指標とは?活用の方法や見方を解説。収益化に向けて見る場所も解説中。Googleサーチコンソールの設定方法も解説しています。UA終了によりGA4導入が必要です。指標の見方も解説記事があります。ブログ初心者でも簡単に導入できるように詳しい手順となっていますので、この記事を見ながら登録してくださいね。

アナリティクス設定
【2024年度版】Googleアナリティクス4(GA4)の設定方法|GA4とUAの違いは?

2024/2/13

GoogleAnalytics(Googleアナリティクス4)(GA4)の設定方法と使い方。Googleサーチコンソールの設定方法も解説しています。UA終了によりGA4導入が必要です。指標の見方も解説記事があります。ブログ初心者でも簡単に導入できるように詳しい手順となっていますので、この記事を見ながら登録してくださいね。

no image
AFFINGER6(アフィンガー)トップページカスタマイズ方法 |スライドショー設定をブロックエディタで解説

2024/1/24

WordPress(ワードプレス)ブログの人気テーマAFFINGER6(アフィンガー6)カスタマイズ設定方法はこちら。初心者でも簡単にトップページをおしゃれデザインに変更できます。最後にステマ規制対策も解説しています。ブログで稼ぐなら導入は必須です。

ダッシュボード→ブロックタブ→STINGER:カテゴリ一覧

編集の対象ページにブロックが表示されます。(以下の画面)

「領域」をクリックしてブロックを選択します。

表示したい「カテゴリID」と「ページ」を入力します。

「スライドショー」をONにします。

「子カテゴリを含む」は表示させたいカテゴリにより変更してください。

スライドショーでは複数の記事を追加します。

「カテゴリID」を「,(カンマ)」で区切り入力します。

例)カテゴリIDを3つ入力する場合 :1,2,3 と入力

以上が、ブロックエディターでブログカードのスライドショーを表示させる方法でした。

番外編:ステマ規制対策

ステマとは、ステルスマーケティングのことで、消費者に広告や宣伝と気が付かれないように宣伝する行為のことを指します。

2023年10月1日より日本では導入されました。

ステマ規制対策として、「広告」とわかる表示をさせる必要があります。

設定手順を以下にまとめました。

AFFINGER6では簡単に設定ができます。

ダッシュボード→AFFINGER管理→Google連携に関する設定→Google自動広告の設定→その他→「広告」を一括で明記する

最後に「Save」をクリックします。

まとめ

本記事では、AFFINGER6を使いトップページを見やすくカスタマイズする方法とステマ規制対策を紹介しました。

慣れないと難しく感じるかもしれませんが、手順通りにすれば慣れない初心者でも簡単に設定できます。

繰り返す使うことで慣れてきます。ぜひお好みのカスタマイズを試してみてください。

あわせて読みたい

以下は、ブログで稼ぐには必須のアフィリエイトサイトです。

無料で登録できます。

合わせて読みたい

ぜひクリックお願いします