AFFINGER６の機能の検証！使いこなす活用方法も！

ブログ運営半年で月20万超の元サラリーマンブロガーなつです。

AFFINGER6はAFFINGER5の後継版です。新しくなって機能も増えた部分もありますし、大きくはブロックエディターへの対策も追加されています。ただ、引き継いだ機能も多く5でブログを作成していてもほぼ操作が同じなので難しくありません。

AFFINGER6の機能と上手な活用方法についてお伝えしていきます。

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

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

AFFINGERはたくさんの機能がありますが、使いこなせるようになるとデザインの幅も広がりますよ！

AFFINGER６の便利な機能一覧

まずは、AFFINGER6の主な機能を整理して、全体的なデザイン変更とサムネイルのような小さなデザイン、そしてトップページの変更項目など場所に分けてわかりやすいようにお伝えします。

デザイン面

AFFINGER6のデザインは基本はシンプルですが、デザイン済データという「着せ替え」導入するとすぐにブログ作りができるようになります。

デザインを一括して変更するには基本のシンプル画面の全体の色変更とレイアウト変更をワンクリックで簡単にできるようになっています。

出典：AFFINGER管理画面

• カラーパターン⇒全体の色変更
• デザインパターン⇒全体のレイアウト変更

AFFINGER6の色は派手な色だけではなく少しふんわりとした色にもなります。例えばAFFINGERのSNSボタンにしても中間色にすることも可能です。

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

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

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

AFFINGER６の便利な機能　1.　「色とレイアウトの一括変更」

AFFINGER6の管理画面を使ってカラーパターンとデザインパターンを変更したものをご覧ください。

• 色・・・オレンジ（元気）
• レイアウト・・・キューティー

• 色・・・オレンジ（やさしい）
• レイアウト・・・ブログ（初心者おすすめ）

• 色・・・グリーン（ナチュラル）
• レイアウト・・・フラット（シンプル）

テキスト

• 色・・・グリーン（やさしい）
• レイアウト・・・デフォルト（グラデーション横）

色味でも「やさしい色」と「自然な色」とありますので、そのまま使えます。もちろん色の変更やグラデーションへの変更も可能です。

AFFINGER６の便利な機能　2. 「ヘッダーとヘッダー下の変更」

全体的には満足だけども、ほんの少しだけインパクトが欲しい時にヘッダーとヘッダー下をグラデーションにすることができます。

ちょっとだけ自分で色変更

ヘッダーバーなどをグラデーションにすることも可能です。全く違う色などを入れても面白くなります。

画像の設定はヘッダー上のメニュー部分とヘッダー上部の色をそれぞれグラデーションにしたものです。

ヘッダー画像の色に合う色を持ってくるとスッキリします。AFFINGER6ではこういったデザインも比較的簡単にできます。

ヘッダー上に画像を入れる

ヘッダー上部に画像を入れることでまた雰囲気が変わります。布地のフリー画像を挿入してみるとさらに手の込んだ雰囲気が出ます。

ヘッダーの上に画像をもってくるだけで雰囲気がグッとかわります。

AFFINGER６の便利な機能　3.　「多彩なメニュー」

AFFINGER6では「メニュー」の種類が多いです。サイドバーに設置するもの、ユーザーのガイドとなるもの、スマホのメニューなど細やかな設定が可能です。

PCメニュー

PC画面の上部に位置するのが、PCメニューです。メニュー設定で項目を追加します。色については個別にグラデーションにもできますし、画像を挿入することもできます。

ただし、細長い部分なので小さい柄で、はっきりした色合いのものがわかりやすくて良いです。

ガイドメニュー

ガイドメニューはそのブログの中で読む順序などユーザーにわかりやすくサイドバーなどに表示するためのものです。

以下のガイドメニューはサイドバーに設置してあるもので、それぞれのページに飛ぶようになっています。

サイドバーメニュー

こちらはサイドバーに設置する目立つメニューのことです。基本色のベタ塗りですので目に飛び込んできます。

AFFINGER6の場合には、それぞれのパーツが競合してもゴチャゴチャしないデザインなのでPCメニューで目立たない場合にはコチラも追加しても良いでしょう。

ボックスメニュー

ボックスメニューとはボックスナビともいい、アイコン付きのリンクを配置するメニューのことです。

テキストだけではなかなか見てもらえないメニューもこうやってサイドバーに設置するとわかりやすいですし、可愛いので思わずクリックしそうですね。

出典：AFFINGER

少しだけHTMLを触りますが、ひとつひとつマニュアル通りにやっていけばこういったものも配置できます。

AFFINGER６の便利な機能　4.　「スマホ用のメニュー」

AFFINGER6ではスマホの画面にピッタリのメニューも設定ができるようになっています。スマホ画面の真ん中に配置するミドルメニューと下に配置する

スマホ　スライドメニュー

スマホ画面へスライドして出てくるメニューのことです。検索窓なども設置できますので、それぞれ必要に応じてカスタマイズしていくことができます。

スマホ　ミドルメニュー

スマホの画面の真ん中に位置するメニューです。スマホの画像にピッタリサイズなので、見やすいです。

このメニューの色指定も個別にできますのでブログのスマホ画面を見て少し変更したい場合も便利です。

出典：AFFINGERマニュアル

AFFINGE６の便利な機能　4.　「ヘッダーカード」

最近のテーマでは、人気のあるヘッダーカード。ページの上部に4つまでの画像リンクを配置する方法です。

無料では、Cocoonにもありますし有料ではSTORK19でも配置できるようになりました。画像のチョイスで目をひきますので是非設定をしてみてください。

スマホ画面ではどう映るのかも見ておきましょう。

テキストもわかりやすく表示されました。この画像は、少しぼんやりすることも可能なのでそれぞれ検証しながら設置していきます。

AFFINGER６の便利な機能　5.　「SNSボタンを微妙に色変更する」

AFFINGE6を使っていて面白いなと思ったのは、デザインの微妙な色変化が付けれることです。原色は目を引きますが、他の色やレイアウトに合わない時があります。

そんな時に微妙な色変化を自動的に付けてくれるとそのまま使えます。

SNSボタンカラーを「優しくする」

見た目には大きく変化しませんが、ほんのりふわっとした感じになります。微妙な色づかいなんですが、心理的にほっとする色合いになります。

上の画像と下の画像の微妙な色合いの違いはわかりますかね？色味は上が強め、下がマイルドな感じになります。

SNSボタンの形を変更する

SNSボタンをコンパクトにすることも可能です。小さいアイコンのような正方形や丸という形にもなります。

SNSボタンが大きすぎると感じる場合などには変更してみてください。

SNSボタンを自分の好きな色にする

SNSボタンの色を全体的に変更することも可能です。ご自身のブログのイメージに合わせて色変更していきましょう。

AFFINGER６の便利な機能　6.　「サムネイルの装飾」

サイドバーに人気記事や記事一覧を配置することは多いですが、AFFINGER6の場合にはサムネイルの形を丸にしたり、ポラロイド写真風にしたり、そのポラロイド写真にセロテープを貼ったような加工もできます。

丸いサムネイル

サイドバーなどに配置するサムネイルは正方形か長方形が多いですが、AFFINGERでは、丸くしたり、角丸で角をとったりできます。

出典：AFFINGERデザイン済データ「PINKY」より

ポラロイド写真風のサムネイル

ポラロイド写真風の上部にセロテープが薄く貼りついているようなデザインです。

出典：AFFINGERデザイン済データ「HappyDiary 2020」より

角丸のサムネイル

AFFINGER6から、サムネイルの画像の角を丸くできるようになりました。これによって、角ばってた感じが取れて柔らかなイメージとなります。

AFFINGER６の便利な機能　まとめ

AFFINGER6を実際に使ってみて面白いと思った機能をお伝えしてきました。まだ多くの機能もありますしもっと設定もできるのですがやりだすと相当な時間もかかります。

AFFINGER6は着せ替えデザインの数は多くないものの、色とレイアウト変更で一括変更できますし、見出しデザインを工夫したりサムネイルスライドショーを配置したりと自分色のブログを作るツールとして大活躍してくれそうです。

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

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

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