ブログのデザインテーマ、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など）デザインの設定
- 吹き出しデザインの設定
- 関連記事の設定
本記事では、ブロックエディタでの解説となります。
では、順番に見ていきましょう。
① 見出しデザインの設定
まず、『見出し』は「＋」マーク→「見出し」で表示されます。
デザイン変更は以下の通りです。
「ダッシュボード」→「外観」→「カスタマイズ」→「見出しタグ（ｈｘ）とテキスト」
また、別の方法でも変えられます。
見出しは「＋」から①「見出し」をクリック、②「ブロック」を選びます。
③「スタイル」を押すと選べるデザインが表示されます。
②吹き出しデザインの設定
吹き出しデザインの設定は以下のとおりです。
「ダッシュボード」→「AFFINGER管理」→「会話アイコン設定」
吹き出しにできる画像は8個まで設定できます。
記事の編集画面では、「＋」マーク→「会話吹き出し」から選ぶことができます。
吹き出しの色や向きも変更可能です。
画像の向きは、記事の編集画面で変更できます。
- 「編集」→「ブロック」→「スタイル」
吹き出しの色は以下の通りです。
- 「ダッシュボード」→「外観」→「カスタマイズ」→「オプション」→「会話ふきだし」
③ 関連記事の設定
関連記事を挿入する方法を紹介します。
【記事ID入力方法】
↓
-
-
【忖度無し】AFFINGER6（アフィンガー）有料テーマ本音レビュー【メリットとデメリット】と導入方法
2024/1/10
ブログを開設したら、必ず耳にするのがブログのデザインテーマについてです。 最初はどれがいいのか迷いますよね。 私も同じように悩み、時間をかけてしまいました。 同じ悩みを持つあなたに無駄な時間は費やさず ...
「＋」マーク（もしくは、「/」を入力）→「記事一覧（ID）」を開きIDナンバーを入力して挿入。
記事IDは、「ダッシュボード」→「投稿一覧」の▼を開くとIDが表示されます。
次にブログカードとして表示する方法です。
2パターン紹介します。
ブログカードとは、カード状のリンクのことです。
記事の中で、「合わせて読みたい」と紹介されている記事を見たことがありませんか？
文字だけのリンクよりもインパクトがあり、見やすいです。
方法①：URLを直に貼り付ける
記事の編集画面を開きます。
表示させたいところに、カーソルを合わせます。
「ブロックを選択するには「/」を入力」という文が表示されたらOKです。
その部分にカードにしたい内部リンク記事のURLをペーストします。
URLが自動的にブログカードに変換されます。
方法②：埋め込みブロックでURLを貼り付ける
「+」を表示させて、一覧の中から『埋め込み』のブロックを選択します。
編集画面にブロックが反映されます。
空欄にカードにしたい内部リンク記事のURLを入力します。
埋め込みボタンを押します。
ブログカードが表示されます。
「＋」マーク→ 「埋め込み」を選択して、ブログ記事のURLを入力して挿入。
ブログカードは内部リンクの記事のみ作成可能です。
外部リンクで作成する場合、別途プラグイン等が必要になります。
以上が、ブログカードを表示させる方法でした。
次は、ブログカードをアレンジする方法をお伝えします。
より見やすくなりますよ。
ブログカードにラベルをつける方法
AFFINGERでは、ブログカードに文字入りのラベル（飾り）を付けることができます。
ここでは、2パターン紹介します。
方法①：カードの後方にラベルを追加する
カードの後方（お尻側）にラベルを追加する方法です。
ブログカードの右上にテープ状のラベルを表示出来ます。
まず、ブログカードの下に『キャプションを追加』という部分があります。
そちらに好きな文字を入力します。（例：合わせて読みたい、参考など）
編集画面では表示されませんが、記事では表示されます。
因みに、ラベルの色も変更可能です。
方法②：カードの前方にラベルを追加する
カードの前方（頭側）にラベルを追加する方法です。
このラベルは文字と背景色固定で4パターンあります。
編集画面で、ブログカードを選択した状態にしておきます。
ブロック編集画面に『高度な設定』という箇所があるので、そちらをクリックします。
『追加CSSクラス』という項目に下記の4パターンのいずれかのクラス名を入力します。
以上がブログカードのよく使う操作となります。
AFFINGERでおしゃれなトップページカスタマイズ方法
次に、トップページのデザイン設定の方法を解説していきます。
以下の順番に説明します。
- ブログのサイト名を変更する
- ファビコン（サイトアイコン画）を変更する
- ヘッダー・フッターメニューを変更する
- サイドバー関連を変更する（自己紹介、よく読まれる記事）
- スライドショーの設定方法
- 番外編：ステマ規制対策
①：ブログのサイト名を変更する
まずは、ブログのサイト名をつけましょう。
変更方法は、2パターンあります。
- サイトの基本情報から変更
- ロゴ画像で変更する
方法①：サイトの基本情報から変更
サイト名だけを変更する方法です。
変更したら「公開」をクリックしましょう。
サイト名を設定すると、ヘッダーとフッター両方とも変更になります。
サブタイトルであるキャッチフレーズはお好きな内容でOKです。
方法②：ロゴ画像で変更
Canvaなどで作成したロゴ画像や写真データを貼り付ける方法です。
画像を挿入したら、「公開」をクリックしましょう。
ロゴの高さは、「ロゴの最大の高さ（px）」で変更できます。
スマホのロゴ画像は「スマホロゴ画像」で変更します。
②：ファビコン（サイトアイコン）を変更する
ファビコンとは、ブログ訪れた時に表示されるアイコンのことです。
設定しておくと個性が出て認知されやすいのでクリックされやすくなります。
①の場所と同じですね。
サイトアイコンに画像を挿入して「公開」をクリックします。
画像サイズは512×512ピクセル以上が推奨されています。
③：ヘッダー・フッターメニューを変更する
次に、ヘッダーメニューとフッターメニューを作成します。
あらかじめ固定ページやカテゴリーでメニューに表示させる項目を作成しておく必要があります。
この「事前準備」から解説していきます。
すでに準備ができている方は、ヘッダメニューの作成方法まで飛ばしてください。
項目を作る方法は2パターンあります。
- 投稿のカテゴリーから作る
- 固定ページから作る
方法①：投稿のカテゴリーから作る
- 名前：ヘッダーメニューにつける名前
- スラッグ：半角の小文字、英数字とハイフンのみ使用可能
- 親カテゴリー：なし （基本的になしでOK）
記入後、「新規カテゴリーを追加」をクリックしましょう。
方法②：固定ページから作る
- タイトルを追加：メニュー名を記入する
- ブロックを選択：詳細を書く
- 開く
- URL：パーマリンクの変更→必ず英語表記
記入後、「公開」をクリックしましょう。
固定ページでは、titleタグ、メタディスクリプションやアイキャッチ画像は不要です。
①：ヘッダーメニューの作り方
事前準備が出来たら、ヘッダーメニューやフッターメニューを作成していきます。
まずは、ヘッダーメニューについて解説します。
メニュー構造の画面では以下の通りに設定します。
- メニュー名：ヘッダーメニュー
- ヘッダーメニューを含む項目にレ点を4ヶ所つける
- メニューを作成をクリック
メニュー名を入れて、入れたいカテゴリーにチェックを入れて、「メニューに追加」クリックします。
最後に「メニューを保存」をクリックしておきましょう。
メニューの文字色や背景色は変更可能です。
自分のサイトに合わせて変更してみましょう。
②：フッダーメニューの作り方
次にフッターメニューを設定していきます。
- メニュー名：フッターメニュー
- フッターメニューを含む項目にレ点を2ヶ所つける
- メニューを作成をクリック
固定ページからメニューを追加します。
- フッターメニューを選択
- 固定ページ→すべてを表示→メニューに追加
- 好きな位置にドラッグ
- メニューを保存
④：ヘッダーカードの作り方
次にヘッダーカードの作り方について解説します。
最大4つ設定できます。
ヘッダーカードは、『サイト全体に表示する』にチェックを入れると、個別ページを閲覧するときにも表示されます。チェックをなくすとトップページ閲覧時しか表示されません。
設定したい画像をそれぞれアップロードしてテキストを入力します。
リンク先のURLを貼って保存するだけです。
『デザイン』では、カードの背景をぼかしたり暗くしたり設定できます。
設定したら、「Save」を忘れずにクリックしてください。
ヘッダーカードエリアの背景色を変更
設定したら、「公開」をクリックしましょう。
⑤：サイドバーの設定方法（プロフィール・よく読まれる記事・広告）
サイドバーの設定方法を紹介します。
- プロフィールカードの作り方
- 検索フォームの設置方法
- よく読まれている記事の表示方法
- カテゴリー別一覧の表示方法
- スライドショーの設定方法
①プロフィールカードの設定
上記の画面では、名前、アイコン、プロフィール文、SNSのURLの設定ができます。
最後まで入力をしたら、「プロフィールを更新」をクリックします。
自己紹介文をバランスよく表示させるには…？
改行をしたい場所の前に<br>を入力します。
全て入力したら、「プロフィールを更新」をクリックします。
サイドバーに設置する方法
ウィジェットを追加で、サイドバートップにドラッグ、貼り付けます。
こちらの設定は保存をクリックしなくても自動更新されます。
デザインを変更する方法
変更したら、「公開」をクリックします。
②検索フォームの設定設定
検索フォームを設置する方法
配色を変更する方法
変更したら、「公開」をクリックしましょう。
③よく読まれている記事の表示方法
設定すると、クリックされやすい上にブログ内の回遊率が上がるのでおすすめです。
よく読まれている記事の設定方法
- おすすめ記事一覧に表示する文字：よく読まれている記事
- 任意の人気記事を指定：記事ID入力
- サイドのスクロールに表示する:レ点をつける
全てが設定できたら、「Save」をクリックします。
記事IDは投稿一覧から確認できます。
ダッシュボード→投稿→投稿一覧→ID
配色を変更する方法
変更したら、「公開」をクリックします。
④カテゴリー別一覧の表示方法
カテゴリーを設置しておくと、読者が読みたい記事を探しやすくなります。
アーカイブも同様に設置しています。
フッターではなく、スクロール広用に設置しているブログを多々あります。
好きな場所に設置しましょう。
変更したら、「公開」クリックします。
⑥：スライドショーの設定方法
スライドショーとは以下の形式です。
表示方法はいくつかあります。
本記事では、ブロックエディタで簡単に表示させるやり方を解説します。
まず、固定ページを作ります。
- タイトルを追加：トップページ等お好みでOK
- パーマリンクの設定：英語表記に直す
- 「公開（更新）」をクリック
固定ページのトップページの編集を行います。
- トップページを開き、「＋」をクリックして、ブロックを追加する
- 見出しh3をクリック
- 「公開（更新）」をクリック
「フロントページ」と表記が追加されました。
この表示があることでトップページに反映されることがわかります。
次に
ここからがスライドショーのカスタマイズとなります。
先にもお伝えしましたが、本記事はブロックエディターでのブログカードの設定手順となります。
『STINGER：カテゴリ一覧』を選択してブログカードを設定する方法
-
-
【2024最新】インスタグラムで収入を得る方法5選｜後発組でも稼ぐには？仕組みやコツを徹底解説
2024/4/14
インスタグラム（Instagram）で収益を得る、稼ぐまでの流れを解説します。アフィリエイト案件やギフティング等の方法がありますが、フォロワー数によっても収入を得る方法が変わってきます。
初心者でもインスタでお金を稼ぐ、出来るやり方を詳しく説明しています。
-
-
【美容コスメ品が実質無料！？】お得に買える化粧品のコツはセルフバック（自己アフィリエイト）｜おすすめ品も紹介
2024/4/6
話題や人気のコスメ（化粧品）をお得に購入する方法を紹介。ドラッグストアや楽天市場など買う方法はいくつかありますが、美容アイテムが割安、還元で手に入れられる手段の一つが、ASPサイトのセルフバックを利用することです。無料登録でスマホ一つで始められるので、気になる人は要チェックです。
-
-
【即稼げる！？】マネートラックは怪しいのか。口コミや評判まとめと稼ぎ方を徹底解説
2024/4/5
マネートラックは怪しい、本当に稼げるのか、徹底解説。初心者でも収益化しやすい、高額案件、独占案件など他ASPサイトと差別化できる案件が豊富です。ブログなしで即アフィリエイトが可能なので登録必須の成果報酬広告の一つです。無料登録は、スマホで1分、簡単に始められます。
-
-
【2024最新】怪しい？セルフバックのやり方｜初心者向け徹底解説（注意点あり）
2024/3/31
自己アフィリエイトのおすすめASPサイトを紹介。A8.netのセルフバックでブログ費用を回収する方法を解説。初心者でも簡単に稼げる手順、注意点をわかりやすく説明しています。
-
-
【2024年度版】WordPress（ワードプレス）ブログを開設したら最初にやること｜初期設定
2024/4/23
WordPress（ワードプレス）ブログ開設後にやるべき初期設定を初心者向けにわかりやすく徹底解説。WordPress（ワードプレス）ブログをインストール後、記事を書く前に最初にやること、しておくべきことの設定方法をまとめました。後からに回すと手間な作業もあるので要チェックです。完全マニュアルとしてブクマ推奨です。
編集の対象ページにブロックが表示されます。（以下の画面）
「領域」をクリックしてブロックを選択します。
表示したい「カテゴリID」と「ページ」を入力します。
「スライドショー」をONにします。
「子カテゴリを含む」は表示させたいカテゴリにより変更してください。
スライドショーでは複数の記事を追加します。
「カテゴリID」を「,（カンマ）」で区切り入力します。
例）カテゴリIDを３つ入力する場合 ：1,2,3 と入力
以上が、ブロックエディターでブログカードのスライドショーを表示させる方法でした。
番外編：ステマ規制対策
ステマとは、ステルスマーケティングのことで、消費者に広告や宣伝と気が付かれないように宣伝する行為のことを指します。
2023年10月1日より日本では導入されました。
ステマ規制対策として、「広告」とわかる表示をさせる必要があります。
設定手順を以下にまとめました。
AFFINGER6では簡単に設定ができます。
最後に「Save」をクリックします。
まとめ
本記事では、AFFINGER6を使いトップページを見やすくカスタマイズする方法とステマ規制対策を紹介しました。
慣れないと難しく感じるかもしれませんが、手順通りにすれば慣れない初心者でも簡単に設定できます。
繰り返す使うことで慣れてきます。ぜひお好みのカスタマイズを試してみてください。
以下は、ブログで稼ぐには必須のアフィリエイトサイトです。
無料で登録できます。
にほんブログ村