AFFINGER5 ~WordPressテンプレート 機能面やメリットをより詳しく~

2020年5月25日

AFFINGER5 WordPressテンプレート

収益を上げる」ことで定評のある「AFFINGER5」は、管理画面やカスタマイザーで細かく設定ができること、プラグインで機能拡張ができますので、より作りやすく、ユーザーにとっては見やすいサイトを構築運営することができます。

このページではAFFINGER5の機能について、より詳細に解説します。

商品名 料金 ライセンス形態
WING(AFFINGER5版)
AFFINGER PACK3
14,800 円(税込)
39,800円(税込)
1ライセンス購入で
サイト利用数無制限

 

AFFINGER5 3つのポイント

AFFINGER5には、大きく3つの注目すべきポイントがあります。

  1. 管理画面でSEOや各種設定が細かくできる
  2. カスタマイザーでデザインの設定・微調整が細かくできる
  3. プラグインで機能を拡張できる

多くのWordPressテンプレートも設定はできるのですが、プログラミングはもちろん、HTML・CSSの知識がなくても、「AFFINGER5」では細かい設定ができることが大きなメリットです。

細かい設定ができる分、項目数も増えますので設定しながら画面を確認して、自分や自社に必要な見せ方を見つけていきましょう。
注目です

 

1:管理画面でSEOや各種設定が細かくできる

AFFING5をインストール後、WordPress管理画面にログインし、メニュー「AFFINGER5管理」をクリックするとテンプレートの管理画面が開きます。

AFFINGER5管理画面

基本設定をはじめ、デザイン、トップページの設定、投稿・固定記事、ヘッダー、メニューやSNS、SEO、Google広告/AMP、会話・ファビコンなど各種設定をここで行います。

例:投稿・固定記事設定

「投稿・固定記事」の設定を行います。タグやカテゴリーを表示する・しない、日付を表示する・しないなど、必要に応じで微調整を進めてください。

AFFINGER5管理画面 投稿・固定ページ設定例

 

2:カスタマイザーでデザインの設定・微調整ができる

WordPressのメニューの「外観」→「カスタマイズ」から、サイトデザインを修正できるカスタマイザーが表示されますので、サイトのデザインや見た目の設定・修正・微調整を行います。

例:H3タグデザイン変更

ここではH3タグのデザインを変えたいので、カスタマイザーのメニューから「[+]各テキストとhタグ(見出し)」をクリックします。

AFFINGER5管理画面カスタマイザー

H3タグ」をクリックし、タイトルの背景色を変更します。プレビューが表示されますので問題なければ「公開」をクリックし確定します。

AFFINGER5管理画面カスタマイザータグのデザインを変える

H1~H5タグの文字色や背景色、グラデーション、ボーダー色や配置、デザインなど任意で設定できますので、プレビューを確認しながら決めていきましょう。

このほか、PC・スマホメニューカラー、ぱんくず、タグクラウド、NEW ENTRY & 関連記事、検索フォーム、会話風吹き出し、サイト管理者紹介、ブログカード/ラベル、追加CSSなど様々な設定を行うことができます。

<ポイント>
1のAFFINGER管理画面でサイト全体のデザインを決めて、2のカスタマイザーで見出しなど各パーツのデザインを細かく設定するという流れになります。項目数や管理ページ数が多いので混乱しないように注意してください。
解説です

 

3:プラグインで機能を拡張できる

プラグインで機能を拡張WordPressには機能を拡張するプラグインがありますが、AFFINGER5にも独自のプラグインがリリースされています。例えば、目次の表示位置などを簡単できる「SUGOI MOKUJI(すごいもくじ)」では、ぺージ内に表示する条件や投稿・固定ページの選択、階層化など細かな設定が行えます。

 

SUGOI MOKUJI(すごいもくじ)設定画面例

目次は、そのページにどんな記事があるか一目でわかりますので、ユーザーにとって利便性が高く、読みたい記事に飛ぶことで時間も節約してもらえます。
しかし、目次を手作りするとなると時間がかかりますので、「SUGOI MOKUJI(すごいもくじ)」プラグインで「目次」を簡単に作成することができます。下記は、「SUGOI MOKUJI(すごいもくじ)」での作成例(キャプチャー)です。

目次サンプル

目次欄表示例

 

例えば、上記の目次を設定する場合、位置は「最初の見出しの前」、表示条件は「2つ以上見出しがあるとき」など詳細な設定ができます。なお、枠の色などデザインはカスタマイザーの「オプションカラー」→「目次プラグイン(すごいもくじ)」で設定することに注意してください。
もっと詳しく

 

「SUGOI MOKUJI(すごいもくじ)」

このほかのプラグインも数が多く、新規プラグインも随時リリースされていますので、一覧表で分かりやすくまとめてみました。

 

AFFINGER5独自プラグイン一覧

有料で販売されているAFFINGER5独自プラグインです。サイト表示に関するものから、統計系・SEO系・バックアップ移行関係・コンテンツ制作支援系など多岐に渡っています。

AFFINGER5 カスタム検索プラグイン

出典:AFFINGER5公式サイト カスタム検索プラグイン

 

プラグイン名 価格(税込) 主な機能
サイト表示系
SUGOI MOKUJI
(すごいもくじ)[PRO]
5,980円 目次のカスタマイズ、クリック数集計など
カスタム検索
プラグイン
3,980円 カテゴリやタグによる絞込検索フォーム設置等
会話ふきだし
プラグイン2
2,980円 吹き出しキャラ無制限登録・デザイン設定
ブログカード外部
URL対応プラグイン
3,800円 外部サイトをブログカード風リンク設定する
RichAnimation
(リッチアニメーション)
3,800円 画像の動きを様々に演出できる
PhotoGallery
(写真ギャラリー)
5,000円 スライドショーなど写真を豊かに見せる
コピーライト完全削除
プラグイン
2,500円 「WING」「STINGER PLUS2」の
コピーライトを完全非表示
クレジット削除
プラグイン *1,2
2,500円 「Powered by テーマ名」を非表示
SEO系
LazyLoad SEO 5,000円 SEO対策として画像を遅延読込を実現
バックアップ・移行系
データ引継ぎ
プラグイン
2,980円 テーマ設定(データ内容)を移行できる
記事バックアップ
「安心くん」
3,000円 1クリックで記事データを保存
コンテンツ制作支援・統計・管理系
かんたん便利
「置換くん」
3,000円 テキストモードの記事内容を一括置換
ステ子[PRO]
(テンプレート管理)
3,000円 頻度の高いコンテンツをソース挿入・作成支援
STINGERタグ管理
プラグイン3
4,980円 よく使うコード登録・簡単に利用
AFFINGERタグ管理
マネージャー3
*2
21,800円 コード一括管理・CTRやログ確認で効率化
PVモニター
(AFFINGERタグ管理
マネージャー3
拡張プラグイン)
12,800円 記事毎のアクセス・ランキングをチェック
ABテスト *2
(AFFINGERタグ管理
マネージャー3
拡張プラグイン)
4,800円 ABテスト表示で効果をチェック
外注管理系
「CHAIN」
ライター管理
8,500円 記事毎にライター制限やメッセージができる

*1 WING(AFFINGER5)に含まれます。
*2 AFFINGER PACK3(WING対応)に含まれます。 

サイト下部の著作権表示を完全に消したいときは「コピーライト完全削除」ですが、Powered by ~のみを削除したいときは「クレジット削除」でOKです。なお、テンプレート購入時には、クレジット削除プラグインは付属しています。
注目です

 

記事作成パーツサンプル

AFFINGER5」には、記事の作成効率を向上するための記事作成パーツが充実しています。主な記事作成パーツをサンプルとして紹介します。

AFFINGER管理画面でサイト全体の方向性を決めて、カスタマイザーでデザインを修正・設定、足りない機能は独自プラグインで追加すれば、オリジナルサイトの完成です。さらに、記事を作りやすく、読みやすくする記事作成パーツを活用して効率よくコンテンツを作成し、コンテンツマーケティング&検索エンジン対策を行ってください。
もっと詳しく

 

アイコン

アイコンマークはエディタでは表示されませんので、「カスタマイザー」→「オプションカラー」→「記事内のWebアイコン」でカラーを設定を行います

「はてな」マークです

「注意」マークです

「人物」マークです

「チェック」マークです

「メモ」マークです

「王冠」マークです

「初心者」マークです

マーカー

強調個所など、文章や単語を目立たせたいときに役立つ蛍光ペン風のマーカーです。アンダーラインと、すべて塗りつぶすパターンが選べます。

黄マーカーです。

黄マーカー(細)です。

赤マーカーです。

赤マーカー(細)です。

青マーカーです。

青マーカー(細)です。

鼠マーカーです。

鼠マーカー(細)です。

ボックス

文章の強調や、外部ニュースサイトなどの引用時に利用するボックスです。

黄色ボックスです

薄赤ボックスです

グレーボックスです

引用のボックスです

テーブル

コンテンツ作成時にはよく使う「テーブル(表)」のうち、3パターンの例です。

横スクロール

パソコンではすべて表示されても、スマートフォンでは画面が小さく、すべてが表示されない、圧縮・改行して読みづらくなる場合があります。
その時は、表全体を<div class="scroll-box"></div>で囲めば、スマートフォンで横スクロールに対応することができます。

サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト
サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト
中央配置

表内のテキストを上下左右の中央に配置したいときに利用します。

テキスト テキスト テキスト テキスト
テキスト テキスト テキスト テキスト
装飾なし

デフォルトデザインを解除する場合に利用します。

サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト
サンプルテキスト サンプルテキスト サンプルテキスト サンプルテキスト

クリップメモ

ショートコードで作成するクリップメモは、ちょっとしたコメントをアピールするには便利です。自分でカスタマイズもできます。

(メモ)サンプルテキストです

(外部リンク)サンプルテキストです

(ブックマーク)サンプルテキストです

(おしらせ)サンプルテキストです

(はてな)サンプルテキストです

(コメント)サンプルテキストです

(コード)サンプルテキストです

(ポイント)サンプルテキストです

(ユーザー)サンプルテキストです

(初心者)サンプルテキストです

(注意文グレー)サンプルテキストです

(注意文)サンプルテキストです

ミニふきだし

ショートコードで作成するミニふきだしで、アイキャッチ的に目立たせるのは有効です。

(基本)サンプルテキストです

(オレンジ)サンプルテキストです

(ピンク)サンプルテキストです

(ブルー)サンプルテキストです

(グリーン)サンプルテキストです

(レッド)サンプルテキストです

複合

吹き出しと文章でいずれも目立たせるのに役だつ「複合」装飾です。

自由なメモ

サンプルテキストです

ココがポイント

サンプルテキストです

ココがおすすめ

サンプルテキストです

ココがダメ

サンプルテキストです

ココに注意

サンプルテキストです

さらに詳しく

サンプルテキストです

女性の意見

サンプルテキストです

男性の意見

サンプルテキストです

ステップ

順を踏む流れを分かりやすくするときに、ステップは役立ちます。
背景色や文字色などカスタマイザーの「オプションカラー」→「ステップ/ポイント」で好きなデザイン・色に変更できます。

step
1
ホップ

サンプルテキストです

step
2
ステップ

サンプルテキストです

step
3
ジャンプ

サンプルテキストです

ポイント

サンプルテキストです

マイボックス

文字の羅列で読み疲れを避けたいときなど、マイボックスで囲うと整理されて読みやすくなります。

ポイント

(基本)サンプルテキストです

(しかく枠のみ)サンプルテキストです

(まるみ)サンプルテキストです

参考

(参考)サンプルテキストです

関連

(関連)サンプルテキストです

メモ

(メモ)サンプルテキストです

ポイント

(ポイント)サンプルテキストです

注意ポイント

(注意ポイント)サンプルテキストです

はてな

(はてな)サンプルテキストです

見出し付きフリーボックス

見出し(全角15文字)

サンプルテキストです

メモボックス

メモ

サンプルテキストです

スライドボックス

+ クリックして下さい

クリックで開かれる内容です

チェックボックス(番号なしリスト)

  • サンプルテキストです
  • サンプルテキストです
  • サンプルテキストです

こんな方におすすめ(v)

対象ユーザーを分かりやすく箇条書きにする項目も簡単に設定できます。

こんな方におすすめ

  • サンプルテキストです
  • サンプルテキストです
  • サンプルテキストです

<ul class="st-blackboard-list st-no-ck-off">st-no-ck-offst-no-ckにすれば、アイコンを消すことができます。

例:本日すべき項目

  • サンプルテキストです
  • サンプルテキストです
  • サンプルテキストです

「番号付きリスト(olタグ)」にも対応しています。

人気のポイント

  1. これはダミーのテキストです
  2. これはダミーのテキストです
  3. これはダミーのテキストです

カスタムボタン

外部リンクなどデザインされた自由なボタンを設置することができます。幅や色、アイコンなどボタンごとに自由なカスタマイズが可能です。

ノーマル

基本

ボタン

詳しくはコチラ(オレンジ)

詳しくはコチラ

詳しくはコチラ(レッド)

詳しくはコチラ

詳しくはコチラ(グリーン)

詳しくはコチラ

詳しくはコチラ(ブルー)

詳しくはコチラ

お問合せ

お問合せ

もっと詳しく(オレンジ)

もっと詳しく

もっと詳しく(ピンク)

もっと詳しく

もっと詳しく(ブルー)

もっと詳しく

人気ランキング

人気ランキング

ランキングはコチラ

ランキングはコチラ

ミニ

基本
ボタン
詳しくはコチラ(オレンジ)
詳しくはコチラ
詳しくはコチラ(レッド)
詳しくはコチラ
詳しくはコチラ(グリーン)
詳しくはコチラ
詳しくはコチラ(ブルー)
詳しくはコチラ

会話ふきだし

「会話ふきだし」は最大8つまで設定できます。

相談者A
これはダミーのテキストですこれはダミーのテキストです
これはダミーのテキストですこれはダミーのテキストです
解決熱血男
お悩みくん
これはダミーのテキストですこれはダミーのテキストです
これはダミーのテキストですこれはダミーのテキストです
お悩みさん

ランキング見出し

ランキング1位

ランキング2位

ランキング3位

ランキング4位以下

タブ

タブ1のコンテンツ

タブ2のコンテンツ

スター

三角(下矢印)

カラーを変更できる三角矢印のショートコードです。記事の流れを演出するのに便利です。

スクロールナビ

 

記事作成パーツの一部をご紹介しました。このほか、レイアウトや写真、YouTube、画像付きコメント、アドセンスなど機能が豊富にありますので、記事作成・サイトの構築に利用しましょう。
解説です

 

あわせて読みたい

こちらで、AFFINGER5の基本的な説明を確認できます。

AFFINGERの導入前に


AFFINGER5 ~企業・個人で利用できる収益を上げることに徹したWordPressテンプレート~
AFFINGER5 ~企業・個人で利用できる“収益を上げることに徹した”WordPressテンプレート~

商品名 料金 ライセンス形態 WING(AFFINGER5版) AFFINGER PACK3 14,800 円(税込) 39,800円(税込) 1ライセンス購入で サイト利用数無制限 こんな方におすす ...

続きを見る

テンプレートのアップデートは?


Affinger5のテーマをアップデートする方法 ~最新の環境でユーザビリティの向上とSEO対策を~
AFFINGER5のテーマをアップデートする方法 ~最新の環境でユーザビリティの向上とSEO対策を~

WordPressテンプレートは、レンタルサーバーとともにビジネスの結果を出すために必須の大きな要素の一つです。 「AFFINGER5」は多機能・表示速度などメリットも多く、ビジネスやブログで数多く利 ...

続きを見る

 

まとめ

非常に細かい設定やカスタマイズが可能になるWrdPressテンプレート「AFFINGER5」。

ローマは一日にしてならずできることが多い反面、機能や設定を覚え、まめなアップデートが必要になりますが、ユーザビリティを考えながらサイト運用を続けると「収益」という結果が目に見えて出てきます。

「ローマは一日にしてならず」

一日一日を大切に、結果を出すべく努力を続けていけば、きっと道は開けるはずです。

 

通常版テンプレート単体

 

特別版テンプレート・プラグインとセット

 

この記事を書いた著者

佃 直毅
佃 直毅ITサポート/コンサルティング/コンテンツプロデュース
株式会社ストレン 代表取締役社長
MCP,2級知的財産管理技能士
GAIQ(Googleアナリティクス個人認定資格)

【仕事略歴】早稲田大商卒。東証一部精密機器メーカー、レコード会社を経て独立後、2001年に動画配信(ストリーミングサーバー)レンタルサービス「ストレン」を立ち上げ、マイクロソフト認定パートナーとしてサーバー構築・運用からPRまで全般に携わる。2015年、東証マザーズ上場企業・お客様と合意のもと、上場企業サービスへ移行していただき同ビジネス終了、以降はITサポート・コンサルティングとして企業の支援に。

当サイトでは、ホスティングビジネスの経験を踏まえ、ユーザー視点でレンタルサーバーやECサービスの評価をし、これから始めたい・切り替えたい方の立場に立った記事・評価・比較情報をお届けします。

【趣味】プロ野球/MLBなどスポーツ、そして映画・音楽好き(主に洋楽)。

© 2020 ストリームレンタルドットコム