AFFINGERは、汎用性の高いWordpressテーマです。

AFFINGERと検索してみるといろんな名前が出てきます。AFFINGER5、AFFINGER6、ACTION、WING、STINGER・・・。

これはシリーズの新旧と、そのペットネームみたいなものになっています。

WING（AFFINGER5/EX/STINGER PRO2）が2021年6月で販売終了となりました。これまでのAFFINGER5は使えないというわけではなく、希望すればベータ版が配布されます。

AFFINGER5からAFFINGER6へのアップデートと使ってみた違いをお伝えしていきます。

ブロガーが欲しい機能満載のWordpressテーマ「AFFINGER6/ACTION」
⇒AFFINGER6（アフィンガー6）の公式ページを確認する。
※今なら、5大購入特典をお付けしています！

関連記事【AFFINGER6のレビュー】実際使ってみた感想と評判。

AFFINGER6（ACTION）って何？　AFFINGER5との違いとは。

名前がちょっとわかりづらいのでここで変更の流れを整理しておきます。

• AFFINGER5　⇒　AFFINGER6
• AFFINGER5 EX ⇒　AFFINGER6 EX
• STINGER PRO2  ⇒　STINGER PRO3

世代が変わるにつれてペットネームも変更されています。

• AFFINGER5　⇒　WING
• AFFINGER6　⇒　ACTION

WINGとか、ACTIONなどいう別名があるのですが、これは上記の3つの総称ということになっていて、また違う分類ではありません。

　速報！
芸大卒のなつが作ったデザインのマニュアルも特典に追加しました。

⇒　詳しくはコチラをご覧ください。

※ヘッダーの画像は、イラストACのイラストレーターさん方の作品です。特典内でURLをお伝えしています。

AFFINGER6（ACTION）「機能変更部分」

Gutenbergに特化した機能を追加しています。これまでAFFINGER5では旧エディターでの推奨だったのですが、Gutenbergも定着しつつあるので強化しています。

よく使うものやショートコードを「マイブロック」機能で呼び出しすることが可能です。

FontAwesome4.7のアイコンコードの文字化け対策として新たなFontAwesomeを設定で使えるようにしています。

Youtubeのサムネイル

アイキャッチ部分をYoutube画像にすることができます。ブラウザやPCの環境ではうまく動くかどうかは若干不安が残りますが、DIverにも同じ機能があります。

出典：AFFINGER公式

Youtube画像にモザイクをかけているのでぼんやりしていますが、うまく配置できれば面白い機能だと思います。

AFFINGER6（ACTION）「デザイン」

実際更新したテーマを触っていると、以下の画像のような変化がありました。元々、レイアウトとカラーパターンはピンクに設定していたのですが、ACTIONを導入すると下の画像のような色になりました。

デザイン・カラーパターンの変更

AFFINGER5の時もあったデザイン＆カラーパターンが少し変わっています。

旧デザイン（カラーパターン）

上記は桃色っぽい感じとグラデーションがくっきりしていましたが、AFFINGER6を導入するともう少し洗練された感じの色合いになりました。

新デザイン（カラーパターン）

あと、テンプレートの大きな変更というわけではありませんが、ブログで人気のあるヘッダーカードの角が取れて柔らかな印象になりました。

AFFINGER5のヘッダーカードでは、テキストを目立たせるために色を落としたり画像をぼんやりさせたりという効果ができましたが、外枠の変化と少し影がつきとても見やすくなりました。

動くアイコン

動くアイコンはAFFINGER5にもあったのですが、AFFINGER6ではすこし高級感が出てきました。

静止画なので、おなじニコちゃんマークなのですが、右の説明書きのように動いています。動くアイコン自体好みがありますが、記事の1部に使って目を引くのもいいかもしれませんね。

AFFINGER6とAFFINGER5との違い　「タブ式カテゴリー一覧の表示」

トップページにタブで分かれた一覧表を作ることができます。色分けをして配置すると見やすいですし、他のブログと差をつけることができます。

出典：AFFINGER6公式

これを作るとブログが一気に華やかになりますよ！

王冠のアイコン変更

AFFINGER5のランキングに配置される王冠のアイコンはすごくシンプルで、それなりに可愛かったのですが、さらに可愛くピカピカしている仕様になりました。

カスタマイザーの名称変更

AFFINGER5のカスタマイズや設定は、3か所でやります。専用管理画面の他にカスタマイザーという場所がありますが、これはどのWordpressテーマにもある設定場所のことです。

▼　外観　⇒　カスタマイズ

上記の操作で変わる画面のこと。名称を覚えておくと公式マニュアル等で検索をかける場合に便利です。

AFFINGER6の変更点　「サムネイルスライドショー」

サムネイルのスライドショーを全ページもしくはフロントページ（非表示も可）に配置することができます。

テキストの色など詳細な設定もできるので、華やかな感じになります。

サムネイルの角をとり、影を付けてテキストを赤色に設定しています。AFFINGERの管理画面で操作でき配置したい記事をカスタムで配置もできますので工夫次第でいろいろ使えそうです。

AFFINGER5からAFFINGER6へ移行するには？

WING（AFFINGER5/EX/STINGER PRO2）が販売終了になってしまったので、もちろん新たにこのシリーズは購入できません。

新しく購入する方は通常通りでいいのですが、過去にAFFINGER5を購入し使用している人はAFFINGER6をダウンロードして上書きすることになります。

だいたいの流れは以下の通り。

1. 公式ページに登録＆申請
2. 公式ページからメールが届く
3. メールからログインしファイルをダウンロード
4. WordPressにインストール・有効化

このページではインフォトップで購入した場合を説明していきます。

AFFINGER5からAFFINGER6（ACTION）への移行手順（インフォトップの場合）

ブログ等からAFFINGER5を購入された方などは販売サイトのインフォトップでのて続きをしているはずです。

（特にAFFINGER5特典などで購入した人はこの章の手続きとなります）

AFFINGERをご購入した後に、インフォトップの注文ID（マイページで確認できます）が出てきますのでそれを控えておきます。

AFFINGER5の公式でメルアドや必要事項を登録し、インフォトップでの購入申請をします。内容に問題なければ公式からメールで案内が届きますのでログインしACTIONのファイルをダウンロードします。

後は、Wordpressテーマとおなじ要領でインストールしてAFFINGER5と置き換えると導入できます。

AFFINGER6への移行手順　「キャッシュ削除とパーマリンク変更」

インストールが終われば、次にやることはキャッシュの削除とパーマリンクの更新です。キャッシュの削除はブラウザによって変わりますのでそれぞれ確認をしてください。

ここではパーマリンクの変更をお伝えします。

パーマリンクの変更

パーマリンクの変更といっても難しいものではなく、所定の場所でクリックをして更新するだけのようです。

▼　設定　⇒　パーマリンクの設定　

画面を開けたら「変更を保存」をクリックします。

↓　当ブログからWordpressテーマAFFINGER6を購入くださった方に特典をプレゼント！

記事を取得できませんでした。記事IDをご確認ください。

初心者だからこそWordpress有料テーマ を使うべき理由

ブログを運営しているとユーザーからの問い合わせや質問も入ってくるようになります。アフィリエイトをしているとASPからの連絡というのも前提として考えておきましょう。

ブログ構成としては、WordPressのグローバルメニューに設置したものを見かけると思いますが、AFFINGER6でも複数設置が可能です。

AFFINGER6のお問い合わせフォームの設定方法をお伝えしていきます。

ブロガーが欲しい機能満載のWordpressテーマ「AFFINGER6/ACTION」
⇒AFFINGER6（アフィンガー6）の公式ページを確認する。
※今なら、5大購入特典をお付けしています！

関連記事【AFFINGER6のレビュー】実際使ってみた感想と評判。

AFFINGER6のお問合わせフォーム

AFFINGER6はTHE THORのようにデフォルトでの簡易お問い合わせフォームのようなものはありませんが、プラグイン「Contact Form 7」を使ってお問い合わせのフォームを作っていきます。

導入自体はとても簡単なのでプラグインをインストールして設定をしていきましょう。

1. Contact Form 7インストール
2. Contact Form 7設定
3. お問い合わせを固定ページに配置
4. お問い合わせの固定ページをメニューに追加
5. お問い合わせ配置

　速報！
芸大卒のなつが作ったデザインのマニュアルも特典に追加しました。

⇒　詳しくはコチラをご覧ください。

※ヘッダーの画像は、イラストACのイラストレーターさん方の作品です。特典内でURLをお伝えしています。

AFFINGER6のお問合わせフォーム設定方法　1.「Contact Form 7インストール」

お問い合わせのフォームを作るためにプラグインContact Form 7をインストールします。このプラグインを入れておけば簡単にお問い合わせフォームが作成できます。

定番のお問い合わせフォームなのでご存じの方も多いと思います。この章では、プラグイン導入が初めての方にもわかりやすくするためにインストールから説明していきます。

導入方法がわかる方は次の章に進んでください。

Contact Form 7を探す

まずは、プラグインを探していきます。

▼　プラグイン　⇒　新規追加

検索窓に「Contact Form 7」と入力すると以下のようなプラグインが出てきます。

「今すぐインストール」を選び「有効化」をクリックするとWordpressに導入されます。

AFFINGER6のお問合わせフォーム設定方法　2.「Contact Form 7設定」

プラグインがインストールできたら、次に設定をしていきます。コンタクトフォームの作成、自動返信メールの設定、そして完了画面の作成をしていきます。

• コンタクトフォームの作成

コンタクトフォームの作成

コンタクトフォームというと、ブログに載せるフォームのことです。訪問者にどんなことを入力してもらうのかここで設定をしておきます。

たとえば以下の画像なら、「氏名」「メールアドレス」「題名」「メッセージ本文」を記載してもらうフォームとなります。

新規で作る場合には、タイトルをまず入力します。上部ボタン「テキスト」「メールアドレス」・・・とありますが、フォームに追加できる項目が並んでいます。

例「電話番号」を必須で記載してほしい時

たとえば、このフォームの中でユーザーに必ず電話番号を記載してほしい場合には、以下の設定をすれば設置できます。

フォームボタンで「電話番号」をクリックすると以下のようなポップアップ画像がでてきます。

必須項目にチェックを入れ「タグを挿入」するとコードが挿入されます。このままでは枠だけなのでラベルを付けていきます。

コードのみ挿入されますので、<label>～</label>に必要項目を入力していきます。きちんと設定できれば以下のように電話番号の項目が追加されます。

設定が終わると「保存」をクリックします。

AFFINGER6のお問合わせフォーム設定方法　2.「お問い合わせを固定ページに配置」

設定が一通り完了したら、次は設置をしていきます。設定が終わるとコードが表示されるようになります。

▼　お問い合わせ　⇒　コンタクトフォーム

固定ページを編集します。

固定ページのタイトル部分に「お問い合わせ」などわかるようなテキストを入れます。本文のところに設定したContact Form 7のコードを挿入し「公開」してください。

すると固定ページ欄にお問い合わせのページができます。

AFFINGER6のお問合わせフォーム設定方法　4.「お問い合わせの固定ページをメニューに追加」

固定ページでお問い合わせができたら次はメニューに配置します。ここで配置しておけばグローバルメニューやフッターメニューなどいろんなところに設置が可能となります。

▼　外観　⇒　メニュー

メニューの作り方は同じ、左の項目からメニューに加えたいものを選んで右のメニューに追加していきます。

メニューは複数作れますので、いろんな場所に設定をするようにあらかじめ作っておいてもかまいません。

AFFINGER6のお問合わせフォーム設定方法　5.「お問い合わせ配置」

メニューも作成できたら実際配置をしていきます。AFFINGER6では以下の場所にメニュー設置ができます。

• ヘッダー用メニュー
• ヘッダー用メニュー（横列）
• フッター用メニュー
• サイド用メニュー
• ガイドマップメニュー
• ガイドマップメニュー2
• スマートフォン用スライドメニュー
• スマートフォン用ミドルメニュー
• スマートフォンフッター用メニュー

ヘッダー用メニューやフッターメニューは他のWordpressテーマでもありますが、この中で、AFFINGER6ならではのメニューがあります。それは、ガイドマップメニューとサイド用メニュー。

サイド用メニューは、背景をグラデーションにすることも可能です。実際に設置するとどんな感じになるのか見ていきましょう。

サイド用メニュー

サイド用メニューというと文字通りサイドバーに設置するためのメニューとなります。

▼　外観　⇒　メニュー

メニュー設定の部分のサイド用メニューにチェックを入れてメニューの保存をクリックします。

▼　外観　⇒　ウィジェット

ウィジェットの項目「01_STINGERサイドバーメニュー」をサイドトップにドラッグアンドドロップします。

これだけ設定をすると以下のようになります。

ガイドマップメニュー（ガイドマップメニュー2）

AFFINGER6の独特のパーツが「ガイドマップメニュー」だと思います。AFFINGER6の公式でも設定されていて、あれはどう作るのか・・・と思った方も多いかもしれません。

ガイドマップメニュー2とあるので、違うデザインかと思ったのですが、どうも2つ設置できるという意味でメニュー欄にあるようです。

設置についてはメニューで設定しウィジェットで配置するという方法をとります。

▼　外観　⇒　メニュー

メニュー設定のガイドマップメニューにチェックを入れ保存をクリックします。

▼　外観　⇒　ウィジェット

ウィジェットの項目「17_STINGERガイドマップメニュー」「18_STINGERガイドマップメニュー2」をサイドバーに入れます。

すると以下のようなガイドマップメニューが配置されます。色等はその都度変更可能なのでそれぞれ変更して調整してみてください。

↓　当ブログからWordpressテーマAFFINGER6を購入くださった方に特典をプレゼント！

記事を取得できませんでした。記事IDをご確認ください。

初心者だからこそWordpress有料テーマ を使うべき理由

AFFINGER6はデザイン性にすぐれたWordpressテーマです。ヘッダーには、静止画や動画も設定でき画像に重ねてボタンやテキストを配置することも可能です。

AFFINGER6のヘッダーカードの設置についてもお伝えしていきます。

　ブロガーが欲しい機能が満載のワードプレステーマ「AFFINGER6/ACTION」
⇒AFFINGER6（アフィンガー6）の公式ページを確認する。
※今なら、5大購入特典をお付けしています！

関連記事【AFFINGER6のレビュー】実際使ってみた感想と評判。

※　AFFINGER6（ACTION）は　AFFINGER5（WING）の後継版です。
⇒　違いについてはコチラの記事でどうぞ。

AFFINGER6の基本的なヘッダー画像の設置方法

まずは、AFFINGER6のヘッダー画像の基本的な設定方法をお伝えしていきます。一般的に静止画を設置しその上にタイトルなどのテキストを重ねていきます。

やり方の手順は2つあります。

1. カスタマイザーで画像を設定
2. AFFINGERの管理画面でテキストを重ねる

カスタマイザーで画像を設定

ダッシュボードの左側の黒のラインのところに「外観」がありますので、そちらから入ります。

▼　外観　⇒　カスタマイズ　⇒　ヘッダー画像

画像の設定をします。ヘッダーの高さを指定し、画像をどういう風に見せたいかこの部分で調整していきます。

　速報！
芸大卒のなつが作ったデザインのマニュアルも特典に追加しました。

⇒　詳しくはコチラをご覧ください。

※ヘッダーの画像は、イラストACのイラストレーターさん方の作品です。特典内でURLをお伝えしています。

AFFINGER6の管理画面でテキストを重ねる

次に、テキスト部分を重ねていきます。テキストが必要ない場合にはここは飛ばしてください。

▼　AFFINGER5管理画面　⇒　ヘッダー

ヘッダーコンテンツ設定の部分にテキストを入力します。

▼　タグ　⇒　テキストパーツ　⇒　カスタムフォント　⇒　白影

中央寄せや全体的に画像を暗くするなど調整をして「save」をクリックします。

すると以下のように画像の上にテキストが浮かび上がってきます。

↓　AFFINGER6の「着せ替え」を使って独自デザインの作り方です。

関連記事AFFINGER６サンプルデザインをブログで作ってみた！

ヘッダー画像の最適サイズとは

AFFINGER6のヘッダー設定部分では以下のようなサイズが推奨されています。他のサイズでも作れますが、念のためにお伝えしておきます。（絶対このサイズというわけではないのでご安心を）

AFFINGER6のヘッダーカードの設置方法

AFFINGER6には、ヘッダーの下にヘッダーカードという場所を設置できます。特にユーザーの目を引く部分なので設置方法を覚えておくと便利です。

ヘッダーカードは、Cocoonにも同じ機能としてありますしSTORKもSTORK19でグレードアップした時に機能追加されていますので、おそらく今の人気パーツなんだと思います。

デフォルトではでていませんので、ぜひ追加してください。

▼　AFFINGER管理画面　⇒　おすすめ記事一覧

4つ設置できますので、それぞれ画像をアップロードし、テキストと誘導したいURLを設定していきます。

（最後にテキストが見やすいように画像を少し暗くする設定もありますので、ご自身で見ながら調整してみてください）

4つ設定できたら「save」をクリックします。

ヘッダーカードはメインのヘッダーとは別に小さい画像で配置されますが、グローバルナビ以外に記事誘導ができるため人気の機能です。

AFFINGER以外にも、STORKやJINなどでも取り入れられています。

AFFINGER6のヘッダー画像の表示＆非表示（透過画像を使う方法）

他の人と同じ画像よりも少し個性的にしたい場合には、PNG画像などを使ってヘッダーを作る方法があります。

透過の画像（PNG）をダウンロードしておいてください。

▼　外観　⇒　カスタマイズ　⇒　ヘッダー画像

ヘッダー画像エリアの高さを指定し、背景色を設定します。透過型の画像（PNGなど）を設定してみてください。（高さはエディターを見ながら調整してください）

この設定だけで以下のようなヘッダー画像が出来上がります。

横並びが若干ウザいな～という方は、画像を繰り返ししないにチェックを入れておけばワンポイントで画像が挿入されます。

以下のようなヘッダーになりワンポイント画像になります。

AFFINGER6のヘッダー画像にテキストとボタン設置

ヘッダー画像にタイトルやメッセージの他、URLの誘導ボタンの設置方法をお伝えします。画像の設定をしてAFFINGER5の管理画面で設定します。

▼　外観　⇒　カスタマイズ　⇒　ヘッダー画像

ヘッダー画像エリアでヘッダーの高さを調整し、画像を追加してください。

▼　AFFINGER管理画面　⇒　ヘッダー画像

ヘッダーコンテンツ設定のエディターにテキストを入力します。反転させ、タグからカスタムフォント、デフォルトを選択します。

同じエディターにボタンを挿入していきます。

タグ　⇒　カスタムボタン（お好きなボタンを指定します）

HTMLが挿入されたら「url=”#”」という部分の＃を誘導したいURLと差し替えます。ここまで設定したら「save」をクリック。

すると以下のようにヘッダー画像の上にタイトルとボタンが挿入されます。

AFFINGER6のヘッダー画像をスライダーにする

複数のヘッダー画像を設定しておき、画像をスライドショーにする方法をお伝えします。こちらも、カスタマイザーで画像を設定し、AFFINGERの管理画面でスライドショーにします。

▼　外観　⇒　カスタマイズ　⇒　ヘッダー画像

「新規画像を追加」でスライドショーに入れたい画像を追加していきます。

▼　AFFINGER管理画面　⇒　ヘッダー画像

この設定をすると、一番簡単にヘッダー画像をスライドショーにできます。

AFFINGER6のヘッダー画像上にロゴを設置する

AFFINGER6のヘッダー画像の上にロゴを設置することもできます。タイトルだけよりもちょっとグレードの高いヘッダーになりますので、設置してみてください。

ロゴ画像のダウンロード

まず、今回使うロゴはICOOON MONOというサイトでアイコンをダウンロードして使っていきます。

出典：ICOOON MONO

ICOOON MONOで好きなアイコンを検索します。

真ん中のcolorの部分で色の指定をします。今回は、ヘッダーの色をグラデーション2色にしていますので、スッキリ見えるように白にしています。

（画像は見えづらいですが左側にあります）

色の指定ができたら「PNG」でダウンロードしてください。

ロゴの設置

カスタマイザーでロゴ画像をインストールをします。ヘッダーとフッターをそれぞれ別に設定していきます。

▼　外観　⇒　カスタマイズ　⇒　ロゴ画像　

ロゴ画像という部分でヘッダーとフッター部分のロゴの追加ができます。この部分で設定をするとタイトルが消えてしまうのとヘッダーとフッター別々に設定しないといけません。

もし、ヘッダーとフッターのロゴが同じ画像を使いタイトルを残したい場合には以下のやり方で設定します。

ちなみに、このロゴの大きさは64px×64pxです。

アイコンロゴ画像の設定

カスタマイザーの同じ場所で設定をします。前章のロゴ画像設定の下にスクロールすると「アイコンロゴ画像」を設定する場所が現れます。

• タイトルとロゴを併記したい場合
• ヘッダーとフッターを同時に設定したい
• ロゴの大きさを調整したい

アイコンロゴの部分に256px×256pxのアイコンを導入すると上のようになります。タイトルが折り返してしまっているので少し調整してみましょう。

ロゴ画像を入れる部分の下に「アイコンロゴの最大サイズ」という部分がありますので、100（px）と入れてみました。

↓　当ブログからWordpressテーマAFFINGER6を購入くださった方に特典をプレゼント！

記事を取得できませんでした。記事IDをご確認ください。

初心者だからこそWordpress有料テーマ を使うべき理由

AFFINGER6にはきめ細かなパーツが用意されています。過去記事を表示させるブログカードの機能にもいくつかのラベルを設定できます。

その他、たとえば囲い枠など重要な部分の枠の上にたすき掛けにするラベルのみの装飾も可能です。

AFFINGER6のブログカードとラベルのカスタマイズについてお伝えしていきます。

ブロガーが欲しい機能満載のWordpressテーマ「AFFINGER6/ACTION」
⇒AFFINGER6（アフィンガー6）の公式ページを確認する。
※今なら、5大購入特典をお付けしています！

関連記事【AFFINGER6のレビュー】実際使ってみた感想と評判。

AFFINGER6のブログカードとラベルとは？

まずは、どんなものをブログカードと呼ぶのか、ラベルはどんな時に使うのかなど確認しておきましょう。

ブログカードとは？

まず、ブログカードですが、有料テーマの中には同じような機能がついているものがありますのでご存じの方も多いかもしれません。

過去の更新した記事を投稿ページの中に挿入できる装飾枠のことです。

上記の枠は基本形となります。

ラベルとは？

ラベルとは、枠などを作った時に目立たせるように左側につけるたすきマークのようなものです。AFFINGER6には、ツールバーにありますので使い勝手が良いです。

ちょっとした枠でもラベルがあるものとないものとではかなり違います。

　速報！
芸大卒のなつが作ったデザインのマニュアルも特典に追加しました。

⇒　詳しくはコチラをご覧ください。

※ヘッダーの画像は、イラストACのイラストレーターさん方の作品です。特典内でURLをお伝えしています。

カスタマイズの流れ

ブログカードとラベルがどんなものなのかわかったところで、エディターへの出し方、コードの意味など説明していきます。

1. エディターへの挿入方法
2. ブログカードのコード内容の意味
3. ブログカードのIDコード
4. ブログカードの装飾
5. ブログカードのラベル背景色
6. 装飾や色を作る

AFFINGER6のブログカードのカスタマイズ　1「エディターへの挿入方法」

まずは、投稿ページや固定ページの文章を入力する部分に挿入する方法です。コードを挿入してから、どの記事を配置するのかラベルを付けるのかなど調整していきます。

「カード」というボタンをクリックするとブログカードのコードが入ります。このコードにどの記事にするのか、タイトルをどうするのかなど情報を入れていきます。

AFFINGER6のブログカードのカスタマイズ　2　「コード内容の意味」

エディターにブログカードのコードが入ったら、どの記事にするのかなど詳細を設定していきます。

それぞれの意味

• id・・・記事のIDコード
• label・・・ラベルの文字
• name・・・リンクをする先のタイトルを変更する場合
• color・・・文字の色
• bgcolor・・・背景の色

変更した例

変更した部分

• id=2002
• label=歩み
• name=これまでの歩み
• bgcolor=#008b8b
• color=#fafad2

※　反映させるには「””」の中に必要な文字を入れていきます。

AFFINGER6のブログカードのカスタマイズ　3　「IDコード」

ブログカードを入れる場合のIDコードの調べ方をここでは説明します。どのテーマでもほぼ同じ方法でIDコードを確認できますので、覚えておくととても簡単です。

投稿ページ一覧を開いてください。

投稿一覧の右側にIDコードが出てきますので控えておいてください。

AFFINGER6のブログカードのカスタマイズ　4　「装飾」

ラベルを付けたり、そのタイトルの色を変更したりすることができます。HTMLのコードにテキストを入れるだけなので簡単ですが、コードを触らないといけないので難しく感じるかもしれません。

ブログカードにラベルを付ける

labelの後の「””」部分にテキストを入れるとラベルが現れます。タスキがけの場合には、あまり長い文章は入れられません。

「label=”歩み”」と入力しています。この部分はご自身で入れたいタイトルを入れると良いでしょう。

ブログカードのラベルのテキスト色を設定する

ブログカードのラベルのテキスト色を変更できます。特に必要ない場合にはここは触らないでOKです。ラベル背景色と合わせたい場合に入力してください。

「color=”#fafad2″」と入力しています。テキストの色にしたいコードを入れていきます。

AFFINGER6のブログカードのカスタマイズ　5「ラベル背景色」

ブログカードのラベルの背景色の変更も同じ要領でできます。すごく簡単なのでテキスト色を合わせて入力していきましょう。

派手な色の方が目立つので良いと思います。

「bgcolor=”#008b8b”」と入力しています。ラべル背景色も色コードを同じように入れてください。

↓配色についての記事は以下にありますので参考にしてみてください。

関連記事Web配色ツールはこれ！悩んだらこれで解決できる厳選10選！

AFFINGER6のブログカードのカスタマイズ　6　「装飾や色を作る」

ここでは、基本の形をカスタマイズする方法をお伝えします。AFFINGERのブログカードのラベルには「リボンデザイン」もあります。

カスタマイザーでは、ブログカードの枠線の色、太さ（3pxのみ）など変更できるようになっています。

• ブログカードの枠の色
• ブログカードの枠の太さ
• ラベル背景色
• ラベルデザイン2種（たすき掛け・リボン）

ブログカードのカスタマイズ方法

▼　外観　⇒　カスタマイズ　⇒　[+]オプションカラー　⇒　ブログカード/ラベル

ここで、枠の色やラベル背景色を設定します。

ラベルデザインは2種類でデフォルトのたすき掛けとリボンデザインが選べます。

この部分を調整するとちょっとイメージの違ったブログカードが出来上がります。

この設定をしておけば、ショートコードを挿入するとこのデザインが出てきます。

ラベルのカスタマイズの流れ

ブログガードにも備わっているラベルを単独で他の枠につけることができます。枠を作ってからラベルを重ねるイメージです。

1. エディターへの挿入方法
2. ラベルのコード内容の意味
3. ラベルのカスタマイズ

AFFINGER6のラベルのカスタマイズ　1　「エディターへの挿入方法」

エディターへの挿入方法が少し迷うかもしれませんが、どのボタンから入るかがわかれば簡単です。

▼　タグ　⇒　テキストパーツ　⇒　ラベル

ラベルの部分をクリックすると以下のコードがでてきます。囲い枠にラベルを付けてもいいですし画像にもラベルをつけられます。

AFFINGER6のラベルのカスタマイズ　2　「ラベルのコード内容の意味」

ラベルでは、3つの意味を知っておけば問題なく使えます。

• label・・・テキストを入力
• bgcolor・・・ラベルの背景の色
• color・・・ラベルのテキストの色

AFFINGER6のラベルのカスタマイズ　3　「カスタマイズ」

ここでは、画像にラベルを付けてみましょう。画像の場合（ブラウザによっては違うかもしれませんが）少しだけ調整が必要です。

画像を挿入してみて同じようになったら以下の方法で挿入してみてください。

画像を挿入

まずは、メディアを追加をクリックし自分の好きな画像を入れます。サムネイルで表示されるので、大きさの調整をします。

スペースの確保

画像を編集

次に、画像にカーソルを当てると調整バーがでてきます。「編集」をクリックします。

編集する部分が出てきたら、配置を中央にしてサイズを中もしくは大かフルサイズにします。

全て設定が終わればプレビューを見てください。以下のようにラベルがついていればOKです。（コードのlabelに好きな文字を入れて変更します）

さらに、細長い画像を使えばきれいに収まります。

このようにAFFINGER6では、やり方を知っているととても使い勝手の良いパーツがありますので、ひとつひとつ検証しながら使うとセンスの良いブログができます。

↓　当ブログからWordpressテーマAFFINGER6を購入くださった方に特典をプレゼント！

記事を取得できませんでした。記事IDをご確認ください。

初心者だからこそWordpress有料テーマ を使うべき理由

ブログで収益を得るためには、自分の商品を売るかもしくはアフィリエイトやアドセンス広告をページ内に配置してユーザーに見てもらうという方法となります。

AFFINGER6（アフィンガー）での広告設置方法をお伝えしていきます。

Wordpressのデフォルトテーマなどでは、プラグインを導入して広告を自動で表示させたりしますがAFFINGERの場合には専用の場所があります。

ブロガーが欲しい機能満載のWordpressテーマ「AFFINGER6/ACTION」
⇒AFFINGER6（アフィンガー6）の公式ページを確認する。
※今なら、5大購入特典をお付けしています！

関連記事【AFFINGER6のレビュー】実際使ってみた感想と評判。

AFFINGER6（アフィンガー）のアドセンス広告の設置方法

アドセンス広告の効率的な貼り方として知られているのが、「記事上」「記事中」「記事下」「記事下のダブルレクタングル広告」です。

ダブルレクタングル広告とは、記事の一番最後に横に2つ並べた広告のことを言います。アドセンス広告を配置しているブログでよく見かける構成です。

今は少し減りましたが、昔はアドセンスの広告設置では一般的だった配置方法です。

そして、AFFINGER6（アフィンガー）では自動で見出しの上や記事下への設置、記事下のレクタングルにすることができます。

その他、インフィード広告なども設置できますが設定するには少しコツがあります。次の章からは、広告の設置方法を具体的にお伝えしていきます。

　速報！
芸大卒のなつが作ったデザインのマニュアルも特典に追加しました。

⇒　詳しくはコチラをご覧ください。

※ヘッダーの画像は、イラストACのイラストレーターさん方の作品です。特典内でURLをお伝えしています。

AFFINGER6のアドセンス広告設置方法　1.　「広告設置（基本）」

まずは、基本の広告を設置していきます。この部分を設定することによって記事下に広告が自動的に配置されます。この設定をしておきレクタングルにもしますのでここは必ず設置してください。

▼　外観　⇒　ウィジェット

「STENGERカスタムHTML」をドラッグ＆ドロップでGoogleアドセンス336px（A)とGoogleアドセンス336px（B)に持っていきます。

（AFFINGER6の推奨の順番はA→Bの順）

タイトルの部分に文字を入れると表示は見出し付きになります。ですのでここには広告の名前を入れタイトルを出力しないにチェックをいれておきましょう。

アドセンスの場合には、「スポンサーリンク」のタイトルを付けますが、その挿入もこの画面で簡単にできます。

設定した図

この2つを入力すると以上のように縦に2つ広告が並びます。広告の並びなどで、収入が変わることもありますので、ご自身のブログで試しながら一番効の良い貼り方をしてください。

AFFINGER6のアドセンス広告設置方法　2.　「ダブルレクタングル」

基本の設置方法の縦表示より横のダブルレクタングルにしたい場合の操作をお伝えします。ダブルレクタングルにしたい時には2つの作業が必要となります。

• AFFINGER管理画面でPC閲覧時のサイトの幅1114px以上にする
• AFFINGER管理画面の個別記事にチェックを入れる

▼　AFFINGER管理画面　⇒　デザイン

サイト全体のレイアウト一括設定のサイト幅の部分を1114と入力して「save」をクリックします。

▼　AFFINGER管理画面　⇒　投稿・固定記事

次に、PC閲覧時に記事下のアドセンス広告を横並びにするにチェックを入れ「save」をクリックします。

すると基本で設定した広告が横並びになります。

AFFINGER6のアドセンス広告設置方法　3.「ショートコードで設置」

記事下には設置されましたが、その他手動で入力したい時にはショートコードで挿入が可能です。

▼　タグ　⇒　その他パーツ　⇒　アドセンス

この部分をクリックすると記事内に[ adsense ]というコードが入ってきます。「スポンサーリンク」のタイトルも併せて入ってきますが、上記のダブルレクタングルの部分に手書きで「スポンサーリンク」と入力が必要になります。

AFFINGER6のアドセンス広告設置方法　4.　「見出しの上に自動設置」

ショートコードは手軽に自分の思ったところに広告を挿入できるところは良いのですが、手作業となりますので少し手間がかかります。

そこで、何番目の見出しの前と決めておけば見出しを記事に書いただけで勝手に広告が配置されます。

▼　AFFINGER管理画面　⇒　Google連携/広告

ｈ2の見出しの前に設置されます。

アドセンスの広告に必要な「スポンサーリンク」をここで入力しておけば楽です。貼り付けができれば記事に自動的に以下のように広告が貼りつきます。

AFFINGER6のアドセンス広告設置方法　5.　「インフィード広告設置」

まず、インフィード広告という言葉を聞いたことがあってもあまりピンとこない方もおられるかもしれません。

そこで、簡単にインフィード広告について説明をしておきます。

インフィード広告のコードの取得の仕方

まずは、Googleのアドセンスからのインフィード広告を取得する方法を説明します。やり方が随分変わっているので難しく感じますが、コードを取り出すだけなら難しくありません。

1. グーグルアドセンスにログイン
2. 広告
3. サマリー
4. 広告ユニットごとタブをクリック
5. 新しい広告ユニットの作成
6. 手動で広告スタイルを作成する

STEP.　1～3

▼　ログイン　⇒　広告　⇒　サマリー

STEP.　4

「広告ユニットごと」というタブをクリックします。

STEP.　5

新しい広告ユニットの作成の部分の「インフィード広告」をクリックしてください。

STEP.　6

「自動で広告スタイルを作成する」をクリックし、URLなどを入力後設定をしていきます。

インフィード広告をAFFINGER6のブログに設置

インフィード広告のコードを取得できたら、ブログに設定していきます。

▼　外観　⇒　ウィジェット　

STENGERカスタムHTMLをドラッグ＆ドロップか▼を展開し「広告Googleインフィード広告」に持っていきます。

先ほど取得したインフィード広告を枠に貼り付け、タイトルを出力しないにチェックを入れ保存をクリックします。

AFFINGER管理画面での設定

次にAFFINGER6での設定をします。

▼　AFFINGER管理画面　⇒　Google連携/広告

どの部分にどれだけ広告を入れるのかここで設定をします。すると以下のようにインフィード広告が入ります。

さりげなく、広告を入れることでユーザーにもクリックしてもらいやすくなりますので、ぜひ設置してみてください。

AFFINGER6のアドセンス広告設置方法　　まとめ　「5つの方法」

AFFINGER6の広告設置の方法は複数あります。アドセンスで稼ごうとする場合には、記事の中に3つ程度の広告が必要ですが、それぞれのレイアウトや見せ方もあります。

基本的には、記事の「上」「中」「下」が良いとされていて実際私もそのやり方で貼っていました。

ただ、過去に流行った記事下のレクタングルもバランスよく見えますし、画像との折り合いもありますのでAFFINGER6の広告設5つの方法を試しながらブログを作成していってください。

AFFINGERの広告設定では、管理画面に設置し、ウィジェットで場所の調整をします。2か所での設定のため初心者の方は難しいかもしれませんが、1度設定してしまえばあとは場所調整だけなので慣れればそれほど難しくはありません。

アドセンスをしていると、広告設置が面倒なことも多いので、コードを早い段階で設置しておきましょう。

↓　当ブログからWordpressテーマAFFINGER6を購入くださった方に特典をプレゼント！

記事を取得できませんでした。記事IDをご確認ください。

初心者だからこそWordpress有料テーマ を使うべき理由