AFFINGERのカスタマイズに便利なテクニック＆webサイトまとめ

でく

みなさんこんにちは、でく（@dddekunoboh）です。

このブログは有料ワードプレステーマAFFINGER5を利用して作成しているのですが、AFFINGRを使ってサイトを作る際に参考にしたブログやwebサイトなどをまとめてみました。

私と同じようにAFFINGERを使ってサイト作りを始めたいという方の役に立てばうれしいです

Affinger 公式ページ

ちなみに私が購入したのはAFFINGER5EXです。

これはAFFINGERに色々な機能が追加されたり、オマケのプラグインがついている『Affinger Pack3』というセットについているテーマです。

基本的な中身はAFFINGER5-WINGと一緒ですので、以下に紹介するカスタマイズも全部共通ですので安心してください。

AFFINGER5のテーマに関するレビュー記事を書いています。

AFFINGER導入を検討している人は参考にしてみてください。

AFFINGERの導入・インストール・初期設定

AFFINGERを購入して、インストールから最初の設定についての流れについて解説しているサイトをまとめています。

インストール・初期設定・最初にいれるプラグイン・最低限のカスタマイズ

詳しくはコチラ

はじめてワードプレスでブログを作るときにAFFINGERを購入する人はあまりいないと思いますが、購入してからのインストールと初期設定についてまとめられています。

ブログをはじめるにあたって、入れておくべきプラグインも解説されています。

記事のオススメにしたがってインストール&有効化して、設定をしていけばブログをスムーズにスタートすることができます。

実際に私もこれらのプラグインをインストールしていますが（厳密にはImsanity以外）、最初に入れておいてよかったーと思います。

０から始める人はもちろん。引っ越しをしたりする人も一読しておくことをオススメします。

CocoonからAFFINGER5（アフィンガー5）へ移行する方法

詳しくはコチラ

私はAFFINGERを使う前は無料Wordpressテーマの『COCOON』を使っていました。

COCOONは無料とは思えないレベルの完成度で、カスタマイズ性も高くて無料テーマでは１番の人気のテーマですね。

そんなCOCOONからAFFINGERへ引越しする人は多いと思うのですが、このページではCOCOONからAFFINGERへの移行するときに、準備しておくことややるべきことを丁寧にまとめてくれています。

COCOONからの引越しを検討している、あるいは実際に引っ越しをした後の初期設定について調べたい人は参照してみてください。

ブログ作成初期にやるべき最低限のカスタマイズ

詳しくはコチラ

AFFINGERを導入したらまずやるべきおおまかな設定がまとめられています。

０から作り始める人も、他テーマからの引越しの人も、このページを参考にして順に設定していけば、とりあえずブログの体裁を整えていくことができます。

具体的に解説されている内容をリストアップしてみます。

非常に情報が豊富で、かつ丁寧に解説されているので、これさえ読めば基本はOKといった感じですね。

とりあえずブログを使えるようにしたいという設定をする方は参照してみてください。

購入ページやダウンロードページ、限定ページをページ検索結果から除外する方法

AFFINGERブログのデザインをカスタマイズする

ブログの基礎ができあがって、記事が増えてきたらブログデザインを色々とカスタマイズしたくなりますよね。

例えばサイドバーの情報をもっと充実させたいとか、プロフィールをもっとアピール性の強いものにしたいとか、より見やすいデザインにしたいとかですね。

そういったブログカスタマイズのテクニックを紹介しているページをまとめてみました。

サイドバーのカスタマイズ基礎編

詳しくはコチラ

サイドバーってなんですか？レベルの人にもわかりやすく、サイドバーでできるカスタマイズ方法を紹介しています。

以上のような設定やカスタマイズをしたいという人は参照してみてください。

サイドバーウィジェットの見本一覧

詳しくはコチラ

サイドバーに設置できるウィジェットって、結構種類があるのでどれがどんなデザインのウィジェットなのか、どんな機能があるものなのかわかりづらいですよね。

このページでは、ウィジェットの具体的な機能をすべて画像で紹介してくれているので、実際にどんなものが設置されるのか一目でわかります。

ウィジェットの機能が知りたい、見た目がどんなものか知りたいという人にオススメです。

プロフィールを使い分ける

詳しくはコチラ

AFFINGERにはプロフィールを掲載する機能が３つあります。

それらがそれぞれどんなデザインで、どんな違いがあって、どのように設定すればよいかを解説しているサイトです。

目次の導入&設定方法

詳しくはコチラ

AFFINGERの欠点の一つだと思うのですが、目次機能が結構貧弱です。

Cocoonでブログを作っていたときは、Cocoonの目次機能が圧倒的にシンプルで便利だったので気づきませんでしたが、AFFINGERは標準搭載の目次機能（SUGOI MOKUJI）が使いづらいです（個人の感想です）。

そこでTable of Contents Plus（TOC+）というプラグインを導入すると、目次を簡単に導入することができます。

この記事ではこのTOC+プラグインの導入と設定方法、およびAFFINGERのSUGOI MOKUJI機能の設定方法の両方をまとめています。

それぞれの機能のメリットデメリットを比較して、使いやすい方を選びましょう。

目次プラグイン『TOC+』のカスタマイズ方法

詳しくはコチラ

Table of Contents Plus（TOC+)を導入すると、簡単に目次を導入することができます。

このサイトでは、TOC+を使った発展的なカスタマイズ方法についてまとめています。

TOC+の基本的な使い方、設定方法のまとめを知りたい人は参照してみてください。

フッターのキャッチフレーズを消す方法

詳しくはコチラ

ちょっとニッチなカスタマイズですが掲載しておきます。

AFFINGERの標準設定では「ヘッダーおよびフッターにキャッチフレーズを表示しない」ことはできるんですが、ヘッダーにキャッチフレーズを残したままで、フッターのキャッチフレーズだけを消すという設定はないんですね。

なのでそういう設定をする場合にはphpファイルに変更を施す必要があります。

PHPをいじるので少し専門的です。必ずバックアップしてから行うようにしてください。

記事一覧(スライドショー)の更新日を見やすくする方法

詳しくはコチラ

ブログ全体を見やすく機能的にデザインする

詳しくはコチラ

ブログのデザインを学ぶときには、具体的なサイトをお手本にするのがいいです。

Tsuzuki Blogという非常に人気のブログがあるのですが、そのブログのカスタマイズ方法を丁寧に解説しています。

ブログの構成やデザインに悩んでいる人は一読してみると参考になると思います。

AFFINGERにSNSフォローボタンを追加する

AFFINGERに限らず、ワードプレス全般に適用できるHTMLとCSSのSNSボタン配布サイトです。

詳しくはコチラ

タグボックスのアイコンを変更する方法

AFFINGERのショートコードまとめ

AFFINGER5の魅力は機能豊富なショートコードにあります。

様々なショートコードを使うことで、ボタンやボックス、ブログカードなどいった完成度の高いブログレイアウト要素を簡単に導入することができます。

このカテゴリでは、ショートコードの使い方についてまとめられたサイトや記事を紹介していきます。

WINGのタグ機能をまとめた一覧ページ【AFFINGER5】

詳しくはコチラ

私が一番愛用しているサイトです

AFFINGERの標準搭載のショートコードは、あまりにも数と種類が多すぎて、正直すべてを把握して使い分けるのは困難です。

特にショートコードは、コードを書き入れてプレビューをしないと、どんな風に表示されるのかがわかりません。

なので自分が入れたいチェックボックスやボタンはどれなのか、いちいちプレビューしないといけないわけです。

同じ悩みを持っている人も多いと思います。

このページでは、記事作成に使えるショートコードをすべて画像付きで一覧にまとめてくれています。

この記事を開いて、入れたいボックスなどの要素を探してからショートコードを入れるようにすると、記事作成の手間が大きく減ります。

自分がイメージしているものが見つかりやすいですし、時には自分のイメージしていたものよりもピッタリなものが見つかることもあるので、ぜひ活用してもらえればと思います。

ショートコードをショートコードのまま表示する方法

[st-kaiwa1][/st-kaiwa1]

こんな感じでショートコードを、コードとしてそのまま表示する方法をまとめている記事です。

詳しくはコチラ

一部のコンテンツを　スマホのみで表示したい、PCのみで表示したい

一部の画像や文字などを、スマートフォンもしくはパソコンのみで表示したいというときに参考になる記事です。

サイドバーや投稿記事の下部などで、コンテンツ表示をうまく切り替えることで、読者の導線を意識したホームページを作成することができます。

詳しくはコチラ

AFFINGERのアイキャッチ画像の設定方法

ブログ内においてアイキャッチ画像は、一目で記事の内容を読者に伝えたり、記事の印象を左右したりなど非常に重要な要素です。

このカテゴリで紹介するサイトや記事では、アイキャッチ画像の設定方法や、カスタマイズについて解説しています。

アイキャッチ画像をブログカードにぴったり合わせる方法

詳しくはコチラ

一般的にワードプレスで作る記事のアイキャッチ画像は横長です。私がCocoonで作成していたアイキャッチ画像は3200×1800というサイズで作成していました。

しかしAFFINGERのブログカードのサムネイルは正方形が標準になっています。

それでいながら記事TOP下に表示されるアイキャッチ画像は横長という、非常に困った仕様です。

この記事では、AFFINGERのアイキャッチ画像とブログカードをめぐる悩みを解消する、画像作成のテクニックが紹介されています。

アイキャッチやブログカードをデザインすることで、読者の回遊率を上げたり、離脱率を下げたりといった効果が見込まれます。

ぜひ勉強してよりよいブログデザインを目指しましょう。

サムネイル画像を好きな大きさに変更する方法

詳しくはコチラ

AFFINGERでの抜粋・メタディスクリプションの設定方法

Google検索の記事タイトル下に表示されるメタディスクリプションの設定方法です。

SEO対策には欠かせない知識なので、しっかり学んでおきましょう。

同じような機能に『抜粋』というものがあります。

抜粋はサイト内だけで使用される要約情報です。

記事一覧やブログカード、Twitterカードで使用されます。

記事一覧やブログカードの説明文を任意の文章にする方法

詳しくはコチラ

メタディスクリプションと記事抜粋の違いとデータ移行方法（SQL付き）

詳しくはコチラ

AFFINGERのブログカードのつくりかたと設定方法

ブログカードの作り方の手順

詳しくはコチラ

ブログカード」の抜粋表示の設定をカスタマイズする手順

詳しくはコチラ

AFFINGERブログの表示速度を高速化する

ブログの表示速度はGoogleからの評価のポイントになっています。

ブログの表示速度の健全性については、グーグル提供の検査ツール「Page Speed Insights」があるのでそちらを利用します。

Page Speed Insightsはこちら

ブログの表示速度を高速化するには、画像のフォーマットを変えたり、圧縮したり、リライトしたり、といった作業が効率的です。

ここではそれらに役立つサイトを紹介します。

AFFINGERブログの画像をwebp形式に一括変換する方法

詳しくはコチラ

画像を自動でリサイズしてくれるプラグイン「Imsanity」の設定方法と使い方

詳しくはコチラ

AFFINGERのアフィリエイト：ランキング機能を活用する

AFFINGERには、アフィリエイト広告の紹介用にランキング機能が搭載されています。

ネットでサービスを探すときに、必ず一度は見たことがあるあのブロックです。

それを自分のブログに導入するテクニックを紹介しているサイトをまとめました。

当サイトでも↓のようなランキングを作成しています。

このような感じで表示できるテクニックがまとめられています

ランキングの作成手順・複数作る方法も

詳しくはコチラ

AFFINGERのアドセンス広告の設定

Googleアドセンス広告をブログに設定したいときの"いろは"をまとめているサイトを紹介します。

アドセンス広告の設置方法は収益に直結するため、しっかりと学ぶ必要があります。

今回紹介するサイトでは『どんな広告を』『どこに設置すればよいか』について簡単にまとめています。

アドセンス広告の種類と設置場所

詳しくはコチラ

こちらのサイトを読めば、アドセンス広告の基本を網羅することができます。

コンセプトは「マネするだけでOK！」ということで、アドセンス広告を実際に運用しているサイトの貼り付けパターンをわかりやすく丁寧に解説しています。

はじめてアドセンス広告を貼る人や、貼る箇所について学びたい人は参考にしてみてください。

インフィード広告の設置方法

詳しくはコチラ

アドセンス広告にはいくつか種類があるのですが、この記事ではインフィード広告という、Googleがサイトの内容に沿った広告を自動で決定する機能について解説しています。

興味のある人は参考にしてみてください。

AFFINGERブログとSNSの連携について

ブログはSNSと連携してこそ真価を発揮します。

このカテゴリでは、SNSとの連携方法のテクニックについて解説したサイトや記事を紹介しています。

Twitterカードの設定方法

詳しくはコチラ

Twitterカードを設定するときには、All in One SEO Packなどを利用する人もいると思うのですが、AFFINGERにはそもそもTwitterカードを設定するための機能が標準で搭載されています。

このサイトでは、AFFINGER上でTwitterカードを設定する方法について解説しています。

外部サイトの記事をコピーしていることをGoogleに伝えて、コピーサイト扱いを回避する方法

AFFINGERブログにオンライン決済「Stripe」を導入する

私のブログにもエクセルツールを有償販売しており、オンライン決済ツール「ストライプ」を使って決済できるようにしています。

ストライプを導入するにあたって、参考にしたサイトを紹介します。

ストライプのメリットとデメリットのまとめ

ストライプを導入するか迷っている人はとりあえずこちらのページを参考に

詳しくはコチラ

ストライプのアカウント作成から導入・設置方法まで

このページだけで、Stripeの決済の有効化までいけます。

詳しくはコチラ

Affingerのテーマアップデート方法

AFFINGER5は本来『買い切り』のテーマなので、継続的なメンテナンス保証はありません。

しかし、購入者限定ページからアップデートされたバージョンをダウンロードすることができます。

アップデートテーマのインストールする方法をまとめている記事です。

詳しくはコチラ

ワードプレス トラブルシューティング

ワードプレスを運用していて色々なトラブルに見舞われると思いますが、私が出会ったトラブルを解消するために参考にしたサイトです。

メンテナンスモードから復旧しない

ワードプレスのバージョンアップや、プラグインのアップデート中にはメンテナンスモードになります。

メンテナンスモード中に何かしらの操作をしてしまうと、メンテナンスモードから復旧せず、ログインも何もできなくなってしまいます。

結構初歩的でありながら致命的なミスなので、かなり焦りますよね。

そんなときに参考になるページです。

詳しくはコチラ

「許可されていない属性または属性値が HMTL タグにあります」を解消する設定方法

アップデートしたらボタンやボックスのアイコンが消えてしまったときの対処法