ブログ運営・副業

AFFINGERのカスタマイズに便利なサイト集

みなさんこんにちは、でくです。

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

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

 

Affinger 公式ページ

 

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

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

 

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

 

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

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

 

こんな方におすすめ

  • AFFINGER5 WINGをこれから導入したいと考えている方
  • AFFINGER5 WINGのカスタマイズの基本を学びたい方
  • AFFINGER5 WINGを使っている方で、便利なテクニックを身に着けたい方
  • AFFINGER5 WINGを使ってもっと魅力的なサイトを作りたいと考えている方

目次-クリックでジャンプ

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

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

 

 

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

詳しくはコチラ

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

まとめられていること

  • AFFINGER5のインストール方法と初期設定(パーマリンクとタイムゾーン)
  • Google Analyticsの設定方法
  • Google Serch consoleの設定方法
  • 最低限必要なプラグインの導入方法

 

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

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

おすすめ導入プラグイン

  • Classic Editor
  • Google XML-Sitemaps
  • PubSubHubhub
  • TinyMCE Advance
  • Imsanity
  • EWWW Image Optimizer
  • Gutenberg用プラグイン

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

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

 

 

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

詳しくはコチラ

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

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

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

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

 

 

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

詳しくはコチラ

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

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

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

まとめられていること

  • デザインの初期設定(基本色と基本デザイン)
  • TOPページのカスタマイズ(ヘッダーとメニューバー)
  • ヘッダー画像とヘッダースライドショー
  • メニューバーの設定とカスタマイズ
  • ブログタイトルとカテゴリメニューの設定
  • ヘッダーカードの設定
  • サイドバーウィジェットの設定
  • プロフィールの設定・プロフィールカードの作成
  • 見出し(H2~H4)のカスタマイズ
  • 記事一覧スライドショーの設定
  • カテゴリー別記事一覧の設定(ブログカードとバナー)
  • 固定ページのカスタマイズとブログTOPへの設定

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

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

 

 

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

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

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

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

 

 

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

詳しくはコチラ

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

具体的なカスタマイズ項目

  • サイドバートップのカスタマイズ
  • サイドバーウィジェットのカスタマイズ
  • サイト内検索の設置
  • お問い合わせボタンのカスタマイズ
  • サイト管理者のカスタマイズ(アバター設定)
  • ピックアップ記事の挿入
  • 関連記事の表示
  • 新着記事の表示
  • 人気記事の表示

 

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

 

 

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

詳しくはコチラ

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

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

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

 

 

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

詳しくはコチラ

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

プロフィールの3パターン

  • ワードプレス標準機能の「プロフィール」
  • ワードプレス標準機能の「この記事を書いた人」
  • AFFINGERのプロフィールカード

 

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

 

 

目次の導入&設定方法

詳しくはコチラ

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

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

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

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

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

 

 

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

詳しくはコチラ

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

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

TOC+のカスタマイズ項目

  • ショートコードを使って手動で目次を挿入する方法
  • 目次の連番(1,2,3…)を消す方法
  • 階層表示(H3)を消す方法
  • 見出しレベルの設定方法(H2,H3,H4…)
  • 目次の見出しをクリックでスクロールする設定方法
  • 特定の見出しだけを除外する方法
  • 見出しスクロールでメニューと見出しの被りを解消する方法

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

 

 

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

詳しくはコチラ

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

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

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

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

 

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

詳しくはコチラ

 

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

詳しくはコチラ

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

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

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

 

 

 

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

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

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

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

ショートコードの見本一覧(便利帳)

詳しくはコチラ

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

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

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

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

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

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

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

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

 

タグ一覧

詳しくはコチラ

WINGタグやショートコードの一覧のサイトです。

こちらもかなり網羅的に紹介されています。

上のサイトの方が少し見やすいのですが、情報量はこちらの方が上かもしれません。

 

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

[st-kaiwa1][/st-kaiwa1]

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

詳しくはコチラ

 

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タグ管理マネージャー3の使い方

詳しくはコチラ

 

AFFINGERタグ管理マネージャー3の登録画面の詳細(画像)

詳しくはコチラ

 

 

 

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

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

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

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

 

 

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

詳しくはコチラ

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

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

まとめられていること

  • アドセンス広告を貼る場所5つ
  • 広告を貼るときの設定
  • 広告は必要以上に貼らない。貼らない記事の設定方法。
  • アドセンスを管理するのに便利なサイト・アプリ

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

 

 

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

詳しくはコチラ

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

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

 

 

 

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

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

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

 

 

Twitterカードの設定方法

詳しくはコチラ

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

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

 

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

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

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

 

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

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

詳しくはコチラ

 

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

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

詳しくはコチラ

 

 

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

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

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

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

詳しくはコチラ

またのお越しお待ちしてます

このブログではガジェット・便利グッズ・生活の知恵・スマホ通信などを扱っています。更新通知は各種SNSで発信しているので下のボタンクリックでフォローお願いします!

TwitterでフォローGoogleニュースでフォローインスタでフォローピンタレストでフォロー

質問やコメント等はTwitterの匿名質問箱でお受けしています。ご意見や質問いただけたら嬉しいです!
質問箱はこちら
スポンサーリンク
  • この記事を書いた人
でく

でく

学校の先生のお仕事をしながらブロガーやってる31歳。得意ジャンルは教育・家電・ガジェット・健康美容。便利グッズや電子機器を収集してレビューするのが趣味のオタク。 小学・中学・高校はゲーム三昧。東北大卒。大学院修了後は公立高校教諭。買ったものを人に紹介する趣味が高じてブログを立ち上げる。今は教育公務員ではないけど教師は継続中。2020年度で教師も辞める予定。デグー・リチャードソンジリス・スナネズミを飼育するげっ歯類好き。

-ブログ運営・副業

© 2021 デクマガ