AFFINGER5 WPテーマレビュー

【AFFINGER5】アップデート最新版!おすすめ機能やデザイン13選

alt=AFFINGER5,アップデート

2019年12月、WordPressテーマ「AFFINGER5」が強力なアップデートで更なる進化を遂げています。

こんにちは。WordPressテーマ研究家SHINです。

 

今回アップデートされたテーマAFFINGER5の中でも、魅力的なデザインや便利な追加機能を一挙にご紹介していきます。

これだけの機能やデザインを追加しながら、AFFINGER5販売価格は「変えていない」ところが本当に良心的です。正直ビックリしました…。

もともとAFFINGER5は、かゆいところまで手の届く細部にわたる機能や設定が非常に多く、僕の知る限り自由度の高い有料テーマの中でもダントツ。しかもアップデート回数も多いので、AFFINGER5ユーザーは嬉しい限り。

 

褒めちぎりはさておき・・・(笑)

今回のアップデートでパワーアップした使い方と実例をご紹介していきます。

すでにAFFINGER5ユーザーの方や、AFFINGER5の高機能やデザイン力を知りたい方はぜひ参考になさってください。

この記事の要約

  • AFFINGER5ユーザーは便利で素晴らしい機能とデザインを使いこなしていこう!
  • WordPressテーマAFFINGER5で「できること」をショートカットで理解できる。

 

1.サイトタイトル前にアイコンロゴ画像を設置

トップページやヘッダーに表示されるサイトタイトル名の前に、アイコンロゴ画像を設置できる機能のご紹介です。

alt=AFFINGER5 タイトルロゴ画像出典:AFFINGER5 公式サイト

 

WordPressダッシュボードから「外観」>「カスタマイズ」へ進み、「ロゴ画像」の設定内最下部にある「アイコンロゴ画像」で、表示するロゴ画像(メディア)を選択してサイズを設定していきます。

alt=AFFINGER5 タイトルロゴ1

設定ポイント

  • アイコンロゴ画像はあらかじめ「メディア」内へアップロードしておきましょう。
  • サイトタイトルのテキストサイズと画像の釣り合わせは「プレビュー」で確認しましょう。
  • アイコンロゴの最大サイズ(px)は、PC上で表示する最大サイズを設定できます。
  • アイコンロゴ画像はタイトル名と一体化させるために「透過」を用意しましょう。

タイトル名にアクセントになるロゴ画像があるだけで、ウェブサイトに雰囲気が出るし、イメージもガラッと変わりますよね。

フリー素材のアイコンロゴ画像を探す場合は、このページがおすすめ!

 

2.ボックスメニューでコンテンツ別に表示できる設定

記事本文はもちろんサイドバーにも設置できる「ボックスメニュー」が簡単に設置できます。

fontawesomeアイコン仕様

カテゴリーメニュー例

こちらは「カテゴリー」をメニューにしたサンプル。アイコンやテキストも挿入できるので、カテゴリー表示を可愛らしく表現したい場合におすすめな機能ですね。

 

オリジナルアイコン仕様

各SNSメニュー例

こちらは「SNSアカウント」をメニューにしたサンプル。アイコンロゴを各SNS画像にすることも出来ますし、サイドバーやサブメニューにも挿入できます。

またボックスメニューのカスタマイズも自由度が高いので、ウェブサイトやページに合わせたイメージで作ることも可能です。

各HTMLカスタマイズ

[st-box-btn-list icon_image="アイコン画像のURL" fontawesome="fontawesomeのクラス" icon_size="アイコンのサイズ(%)" text="メニュー名" subtext="サブテキスト" url="リンク先のURL" target="ターゲット属性" rel="nofollow属性" bgcolor="背景色" color="テキストの色" fontsize="テキストのサイズ(%)" fontweight="テキストの太さ"]

 

3.記事一覧のサムネイル画像を大きく表示

各記事で設定しているアイキャッチ画像(サムネイル)を、最大化サイズで表示できるようになりました。

alt=AFFINGER5 サムネイル画像サイズ

例えばアイキャッチ画像を「丸くする」にすると、上のようなデザインでアイキャッチ画像が表示されます。このデザインもオリジナリティーがあって良いですけどね。

alt=AFFINGER5管理 アイキャッチ設定

 

ではアイキャッチ画像サイズをフルサイズで表示すると・・・

alt=AFFINGER5 サムネイル画像サイズ1

アイキャッチ画像がレスポンシブで最大化表示できるサイズに。設定は以下の通りに変更するだけでOK。画像をアピールしたい場合は、この設定がおすすめですね。

alt=AFFINGER5管理 アイキャッチ設定1

そこで誰もが気になる「表示速度はどうなのか?」という疑問。

プラグインを導入しているわけではないので、テーマAFFINGER5での設定なので大きく遅延することはありません。安心して設定してもらえたらと。

 

4.会話ふきだしで使用するアイコンサイズ調整が可能

AFFINGER5の魅力機能のひとつ「会話ふきだし」。アクセントにもなるし、お客様の声(口コミ)としても重宝できる機能ですよね。

でも以前までは正直にアイコンが「小さいな・・・」と思われていた方が多かったのではないかなと・・・。ですよね?

今回のアップデートでは、ふきだしアイコンのサイズ調整設定が可能になりました。

 

デフォルトサイズ

alt=AFFINGER5 会話アイコン

サイズアップ

SHIN
アイコンはこのサイズの方が見やすいですよね。サイズアップをおすすめします。

 

設定方法

alt=AFFINGER5 会話アイコン サイズ設定

SHIN
WordPressダッシュボードから「AFFINGER5管理」>「会話・ファビコン等」へ進み、一番最下部にある「会話風アイコンを少し大きく」にチェックを入れるだけ。

 

5.アイキャッチ画像を全て一括してポラロイド風へ変更が可能

アイキャッチ画像を設定しているすべてのコンテンツ(投稿記事・固定ページ)で、アイキャッチ画像をおしゃれなポラロイド風に変更できる設定です。

alt=AFFINGER5 アイキャッチ ポラロイド風

ちなみに、アイキャッチ画像へテキスト挿入をした場合は、写真下にテキストを表示することも可能に。ちょっとしたPRや説明文など入れておくとアクセントになります。

 

設定方法

alt=AFFINGER5 アイキャッチ画像 ポラロイド風AFFINGER5 アイキャッチ画像 ポラロイド風

ちなみに、アイキャッチ画像へ代替テキストを登録しておけば、画像下の余白へテキストも表示が可能。

 

6.スマホフッター固定メニューのアイコンサイズが調整可能

スマホページフッターへメニューを設置できる「フッター固定メニュー」は非常に便利ですよね。

alt=AFFINGER5 フッター固定メニュー

このメニューで使用しているアイコンサイズを「%」で調整できるようになりました。

 

設定方法

alt=AFFINGER5 フッターメニュー アイコンサイズ

SHIN
カスタマイズから「メニューのカラー設定」>「スマホフッターメニュー」へ進み、fontwesomeアイコンデフォルトサイズに対する%を入力するだけでOK。おすすめのサイズは「200%」ですね。

スマホフッター固定メニューの設置方法はこちらを参考にどうぞ。

【AFFINGER5】スマホフッターに固定メニューを設置する方法-min
【AFFINGER5】スマホフッターに固定メニューを設置する方法

こんにちは。WordPressテーマ研究家SHINです。 スマホユーザーへ訴求する重要なポジションとも言えるのがフッターメニューですよね。   スマホフッターメニューと言えば、パソコンで言う ...

続きを見る

 

7.ミニふきだしボックス内へアイコン画像を表示

AFFINGER5の記事で便利な機能のひとつ「ミニふきだし」を利用されている方多いかなと思います。

このミニふきだし内へアイコンや任意の画像を簡単に挿入できる設定です。

ミニふきだしデフォルトタイプ

fontawesomeアイコンを挿入したミニふきだしタイプ

 

注目は下の任意画像を挿入できる機能です。

alt=AFFINGER5 ミニふきだし

任意の画像を挿入したふきだしタイプ

ちょっとしたコメントや、画像でイメージと一緒にテキストで訴求できるツールで活躍できる機能にバージョンアップしています。フル活用していきましょう。

 

8.まるもじ・クリップメモデザインにボーダーのみを追加

AFFINGER5では、下のような「まるもじ」という付箋のようなデザインにテキストが書ける機能が実装されています。

まるもじ大バージョン

 

このデフォルトのまるもじに、ボーダー(枠線)のみのデザインにできるタグ属性が追加されました。

まるもじ大バージョン

 

もちろん任意の画像を入れることもできます。

まるもじ大バージョン画像付き

いろいろと使えるバラエティー機能ですよね。

 

9.スライドボックスへfontawesome内のアイコンが使用可能

AFFINGER5には、クリックひとつで表示する「スライドボックス」がタグに標準装備されています。

+ クリックで開く

ここに画像やテキストなどのコンテンツを入れて閉まっておけるボックス機能

 

このスライドボックスに「fontawesome」で取り扱うアイコンが表示できるようになり、さらにアニメーションを加えることも可能に。

+ クリックで開く

ここに画像やテキストなどのコンテンツを入れて閉まっておけるボックス機能

 

表示速度改善のために、動画や重い画像・写真などをスライドボックスに隠しておいたり、長いコード類(HTMLやCSS)をスッキリさせておくのに重宝します。

ちょっとオシャレなデザインのスライドボックスにしたいなら、こちらの記事も参考にどうぞ。

alt=【簡単】クリックでコンテンツの表示切替ができるスライドBOXを作る方法
【WordPress】1クリックでスライドBOXを作る方法

今日は、クリックでコンテンツが展開するスライドBOXの作り方を解説していきます。 このスライドBOXは、非常に便利な反面、1つだけデメリットがあります。ただ上手に活用すれば重宝するものなので、うまく使 ...

続きを見る

 

10.PC閲覧時の横並び左右対比率を追加

パソコンとタブレットのみ表示する際に、3分割や各比率に合わせた表示をタグひとつで挿入できます。

alt=AFFINGER5 3分割 レイアウト

alt=AFFINGER5 3分割 レイアウト

alt=AFFINGER5 3分割 レイアウト

 

下のレイアウトでは、ランディングページ上で商品やサービスを紹介する場面などで大活躍できますよね。

テキスト

テキストテキストテキスト

テキストテキストテキスト

テキストテキストテキスト

alt=AFFINGER5 3:7 レイアウト

 

alt=AFFINGER5 4:6 レイアウト

テキスト

テキストテキストテキスト

テキストテキストテキスト

テキストテキストテキスト

 

設定方法

alt=AFFINGER5 レイアウト設定

SHIN
AFFINGER5の「タグ」内にメニューがあります。タグ一発で6点の左右レイアウトを挿入できるのは嬉しい限り。まさに時短!

 

11.PC閲覧時のヘッダーメニュー(横列)をスマホでも表示可能

alt=AFFINGER5 ヘッダーメニュー横列 スマホ
画像出典:AFFINGER5 公式サイト

 

パソコン表示上でヘッダーにメニューを設置できる機能を、スマホ表示上でも横へスワイプしながらメニューを表示する設定が追加されました。

注意ポイント

ヘッダーメニューは「グローバルメニュー」とは用途が違うコンテンツと認識しておきましょう。

ヘッダーメニューは「固定ページ」で作るもの。つまり別ページのみで完結するコンテンツとして作るべき。一方でグローバルメニューは、一層・二層とプルダウンするコンテンツなので「カテゴリー」で作るのが最適。

カテゴリーをヘッダーメニュー(横列)に設置した場合、プルダウンするデザインに違和感があること・タイトル属性が設定できない=メニュー名下に表示するサブテキストがないという2点のデメリットがあります。

固定ページで「サイト訪問された方に注目して欲しいコンテンツ」をメニューにしてアピールすることができるので、商品やサービスのPR(ランディングページ)や、リスト収集(メルマガ・LINE@など)、ランキングページなどが効果的ですね。

このヘッダーメニューはフル活用していきましょう。

 

12.記事一覧のタイトル文字サイズを調整できる

僕も含め、トップページやカテゴリーページで「記事一覧」を表示している方は多いですよね。

その記事一覧にある「タイトル文字サイズ」のみを、単体で調整できる設定が追加されました。

alt=AFFINGER5 記事一覧タイトル 文字サイズ

SHIN
WordPressダッシュボードから「AFFINGER5管理」>「デザイン」と進み、フォントのサイズ設定内にある「記事一覧」でpx数値を入力して調整できます。

PC・スマホ・タブレットのデバイスそれぞれで設定できるので、プレビューで確認しながら調整しましょう。

 

13.タブを複数切り替え表示できる機能を追加

この機能はすごく便利!記事にもサイドバーにも、簡単にタブ切り替えパーツが挿入できます。







alt=AFFINGER5 PINKY

alt=AFFINGER5 Note

alt=AFFINGER5 HappyDiary

alt=AFFINGER5 Lupine


タブは2つから4つまで作成可能で、記事に挿入できるのはもちろんサイドバーにも簡単に設置できます。

タブ内は「おすすめ記事」や「カテゴリー記事」を表示したり、動画や画像などのコンテンツも挿入できます。ビフォー&アフターや口コミなど使い方は盛りだくさんですよね。おすすめの機能です。

 

まとめ

以上ご紹介したアップデートは、「Marry X'mas UPDATE」として2019年12月18日にAFFINGER5ユーザーへ配布されています。

もう一度確認しておきましょう。

アップデート機能13選

  • サイトタイトル前にアイコンロゴ画像が設置が可能に
  • おすすめ記事や自由に抜粋した記事をボックスメニュー化を追加
  • サムネイル画像(アイキャッチ)サイズを大きく表示する設定を追加
  • 会話ふきだしで使用するアイコンサイズアップ調整が可能に
  • アイキャッチ画像を全て一括してポラロイド風へ変更が可能に
  • スマホフッター固定メニューのアイコンサイズが調整可能に
  • ミニふきだしボックス内へアイコン画像の表示が可能に
  • まるもじ・クリップメモデザインにボーダーのみを追加
  • スライドボックスへfontawesome内のアイコンが使用可能に
  • PC閲覧時の横並び左右対比率を追加
  • PC閲覧時のヘッダーメニューをスマホでも表示可能に
  • 記事一覧のタイトル文字サイズを調整可能に
  • タブを複数切り替え表示できる機能を追加

機能数と自由度が無限に近いテーマAFFINGER5ですけど、使い倒していきましょう!

 

\ 稼ぐことに特化した最速収益化テーマ /

AFFINGER5公式サイトはこちら

 

\ 記事はお役に立ちましたか? /

  • この記事を書いた人
  • 最新記事
SHIN

SHIN

WordPressテーマ研究家のSHINです。WPテーマとコーヒーをこよなく愛し、日々マウスをカチカチ!キーボードをパチパチ!しながら研究をしている人。

-AFFINGER5, WPテーマレビュー

© 2020 WordPress theme NAVI