本サイトは記事内に広告を含む場合があります

WordPress テーマ WordPress 初心者

アフィンガー5のカスタマイズ方法教えます【WordPress最強テーマの設定】

AFFINGER(アフィンガー)のカスタム方法が分からない!?【初心者にも分かる設定方法教えます】

無料のWordPressテーマからアフィンガーに乗り換えたものの設定の項目が多すぎて、どこに何があるか分からず、どういう風に設定すれば自分の求めている状態になるのか分からない時はありませんか?

アフィンガーは慣れてしまえば、とてもカスタマイズがしやすく、痒いところに手が届くWordPressテーマなので、しっかりと使い方をマスターして1日でも早くブログ運営に取りかかれるようにしましょう!

今回はそんなアフィンガーに乗り換えたばかりの初心者向けて、分かりやすく設定方法を紹介したいと思います。

WordPressを独学で勉強する方法【一人で学習してきたエンジニアが教えます】
WordPressを独学で勉強する方法【一人で学習してきたエンジニアが教えます】

WordPressを独学で勉強する場合、どれくらいの学習量が必要で、仕事を得られるまでどれくらいの時間がかかるのかや、Web初心者でも本当に学習できるのか心配になるのではないでしょうか? また、Wor ...

続きを見る

 

 

デザインの変更

デザインの変更

まず、サイトの方向性が定まったら、そのジャンルに合ったデザインに整えなければなりません。

アフィンガーには用途に合わせてデザインをボタン一つで切り替えられる機能が付いています。

設定方法は管理画面の『AFFINGER 管理 > デザイン』の中で選択することが可能です。

簡単な設定でサイトのデザインを大きく変更することができるので、色々試してみることをオススメします。

 

カラーパターンの設定方法

カラーパターンの設定方法

カラーパターンを変更することによって、サイトのデザインを大きく変えることが可能です。

設定方法は『AFFINGER 管理 > デザイン > カラーパターン』で変更することができます。

設定の種類は女性的なデザインから、ビジネス系のカッチリしたデザインまで幅広く、13個ものデザインが用意されています。

 

カラーパターンの種類

  • 赤(エレガント)
  • 青(ビジネス)
  • 緑(ナチュラル)
  • オレンジ(元気)
  • ピンク(可愛い)
  • グレー(ダーク)
  • 赤(やさしい)
  • 青(やさしい)
  • 緑(やさしい)
  • オレンジ(やさしい)
  • ピンク(やさしい)
  • グレー(やさしい)
  • リセット(カラー未設定)

 

デザインパターンの設定方法

デザインパターンの設定方法

デザインパターンは『AFFINGER 管理 > デザイン > デザインパターン』で変更することが可能で、ボタンはカラーパターンの下に用意されています。

カラーパターンを変更することによって、ヘッダーにグラデーションをかけたりするカスタマイズが可能で、計6種類のパターンが利用できます。

 

デザインパターンの種類

  • デフォルト(グラデーション横)
  • ビジネス(グラデーション縦)
  • フラット(シンプル)
  • キューティー(ストライプ)
  • ブログ(初心者おすすめ)
  •  リセット(設定なし※カラー含む)

 

SEO対策

SEO対策

アフィンガーには管理画面で、内部SEOを最適化する機能が付いています。

SEO対策は検索エンジンのサイト評価を下げないためにも必ずやっておかなければいけない設定なので、怠らないようにしましょう。

SEO対策の設定は『AFFINGER 管理 > SEO』で変更することが可能です。

 

タイトルの設定方法

タイトルの設定方法

タイトルはWordPressの『設定 > 一般設定 > サイトのタイトル』からも変更できますが、アフィンガーの初期設定ではトップページのタイトルにはキャッチフレーズやメタキーワードが表示される仕様になっているため、変更したい方は『AFFINGER 管理 > SEO > トップタイトルを書き替え』で書き換えることができます。

 

キーワードの設定方法

タイトルの設定方法

現在SEO的には、ほとんど効果が無いと正式に勧告されていますがサイトの属性をはっきりさせるためにも記入しておきましょう。

設定方法は『AFFINGER 管理 > SEO > トップ用のメタキーワード』に記述することができます。

記入する際はキーワードを『,』で区切って書くようにしましょう。

 

メタディスクリプションの設定方法

キーワードの設定方法

アフィンガーの初期設定では『設定 > 一般設定 > キャッチフレーズ』が表示される仕様になっていますが、トップページのみ特定の概要情報に変更することができます。

設定方法は『AFFINGER 管理 > SEO > トップ用のメタディスクリプション』で変更することができます。

 

AMPの設定方法

AMPの設定方法

AMPとはGoogleとTwitterが共同で立ち上げたモバイル端末でのページの表示速度を高速化するための仕様のことです。

AMP対応が施されたサイトモバイル端末で検索した時にリンクの横に『雷マーク』が表示されるようになります。

AMPに対応していると検索での表示回数が増加する確率が高まるほかにも、対象のページの表示が簡易的になり表示速度が上がります。

設定方法は『AFFINGER 管理 > 投稿・固定記事 > AMP対応 > 全ての投稿ページをAMP対応にする』でAMP機能を簡単に設定できます。

 

AMP対応ページの見え方

AMP対応ページの検索結果での見え方

AMP対応ページの見え方

 

ヘッダー部分の設定

ヘッダー部分の設定

ヘッダー部分の設定はブログの見た目を大きく左右する部分ですので、しっかりと満足いくまで設定してみることをオススメします。

設定方法は主に『AFFINGER 管理 > ヘッダー』の中にある設定項目で可能です。

それ以外にも場合によってはログイン後に出てくる管理バーの『カスタマイズ 』で変更す場合もあります。

 

ロゴ画像の設定方法

ロゴ画像の設定方法

ロゴ画像を設定する場合は管理バーの『カスタマイズ > ロゴ画像』で変更することができます。

また、ヘッダーのロゴ以外にもフッターのロゴを個別に設定できたり、モバイル用にロゴ画像を切り替える設定も用意されています。

 

ファビコンの設定方法

ファビコンの設定方法

ファビコンを設定する場合は管理バーの『カスタマイズ > サイト基本情報』から変更することができます。ファビコンのサイズは512px × 512pxにするようにしましょう。

また、それ以外にも『サイトのタイトル』『キャッチフレーズ』も変更することができます。

 

ヘッダー画像の設定方法

ヘッダー画像の設定方法

ヘッダー画像の設定する場合は管理バーの『カスタマイズ > ヘッダー画像』から変更することができます。

アファインガーでヘッダー画像を設定する際は、画像サイズを2200px × 500pxにすると最も綺麗に表示されるので事前にサイズを調節してからアップロードすることをオススメします。

それ以外にも、オススメ画像を設定してランダムに表示する機能や、モバイル用に別画像を設定することもできます。

 

メニューの設定方法

メニューの設定方法

ヘッダーメニューの設定方法は『外観 > メニュー』で変更することができます。

まずは『メニュー名』の欄に任意のメニュー名を記述して、『メニュー設定』の欄から『ヘッダー用メニュー』にチェックを入れることによってヘッダー部分にメニューを出すことができます。

 

フッター部分の設定

フッター部分の設定

フッター部分にはサイトの補足情報や、広告を掲載する場所として利用されます。

サイトの見た目を整える場合ヘッダー部分やコンテンツ部分に意識が向きがちですが、フッターの領域を有効活用することによって機会損失を出来るだけ減らすことができます。

 

メニューの設定方法

メニューの設定方法

フッターメニューの設定方法は『外観 > メニュー』で変更することができます。

まずは『メニュー名』の欄に任意のメニュー名を記述して、『メニュー設定』の欄から『フッター用メニュー』にチェックを入れることによってヘッダー部分にメニューを出すことができます。

 

サイドバーウィジェットの設定

サイドバーウィジェットの設定

サイドバーウィジェットを設定することによって、広告を掲載したり、スクロールに追従する形でオススメコンテンツを見せることができるため、他のコンテンをみてもらえる確率が高まります。

サイドバーウィジェットの設定は『外観 > ウィジェット』から設定することができます。

 

新着記事の設定方法

新着記事の設定方法

アフィンガーの初期設定ではサイドバーに新着記事が表示されるようになっているのですが、位置を調節することができないので、非表示にしたいと思うのではないでしょうか?

その場合は『AFFINGER 管理 > トップページ』の中にある『トップページのサイドバーの新着記事一覧を非表示にする』『下層ページのサイドバーの新着記事一覧を非表示にする』にチェックを入れることで有効化されます。

そして、位置が調節できる新着記事ウィジェットにを設定する場合は『外観 > ウィジェット』の中にある『STINGER最新の投稿一覧』のウィジェットをサイドバーウィジェットにドラッグすることで有効化されます。

 

著者の情報を表示する方法

著者の情報を表示する方法

著者の情報をサイドバーに表示する場合は、『外観 > ウィジェット』の中にある『STINGERサイト管理者紹介』のウィジェットをサイドバーウィジェットにドラッグすることで有効化できます。

管理者紹介で表示される情報は、『ユーザー > あなたのプロフィール > プロフィール情報』に書かれているテキストと同期しているため、内容を変更する場合は、こちらを編集するようにしましょう。

また、プロフィール画像はGravatarにアップロードしたものが表示されるようになっているので、事前に登録を済ませておきましょう。

 

おすすめの記事の設定方法

おすすめの記事の設定方法

おすすめの記事を設定する方法は『AFFINGER 管理 > おすすめ記事一覧 > おすすめ記事一覧作成』『サイドのスクロールに表示にする』で設定することができます。

また、記事を登録する時は『記事ID, 記事ID, 記事ID』とIDをコロンで区切り記述するようにしましょう。

もしも登録したい記事のIDがわからない場合は『投稿 > 投稿一覧』の中にある、それぞれの記事リストの一番右端にIDが記述されています。

 

コンテンツ部分の設定

コンテンツ部分の設定

コンテンツ部分はユーザーが最も目にする部分になりますので、抜けのないようにしっかりと設定しておきましょう。

せっかく良い文章を書いても、色付けや画像が少なくてはユーザーにとって良い体験をしてもらえず、二度とサイトを訪れてくれないかもしれません。

設定一つで、ユーザー体験に大きな変化を及ぼす場合もあるので、ある程度全体の設定を把握してからカスタマイズすることをオススメします。

 

トップの新着記事を非表示にする方法

トップの新着記事を非表示にする方法

サイドバーに新着記事をせってしているから、トップページのコンテンツ部分に新着記事を表示したくないとうことはありませんか?

トップに表示されている新着記事を非表示にする場合は『AFFINGER 管理 > トップページ > 新着記事』のところの『トップページのコンテンツ内の新着記事一覧を非表示にする』で変更することができます。

 

記事の下に表示される『次へ』『前へ』のボタンを非表示にする方法

記事の下に表示される『次へ』『前へ』のボタンを非表示にする方法

コンテンツの記事した部分に関連記事がし、続けて書くような記事もないから『次へ』『前へ』のボタンを取り除きたいという場合があると思います。

その場合は『AFFINGER 管理 > 投稿・固定記事 >  前と次のページリンクを非表示にする』でボタンを非表示にすることができます。

 

まとめ

今回はアフィンガーの設定方法について解説しましたがいかがでしたでしょうか?

アフィンガー は自由自在に使うことができれば、記事の読みやすさを向上させたり、目を惹きつけるコンテンツ作りが可能になります。

その性能の高さゆえ、設定できることがあまりにも多く、何処に何があるか分かりにくかったり使いにくいよう感じてしまいそうですが、自分が使いそうな設定のみに絞って覚えてしまい後は使わないというようにするというのも一つの手ではあります。

しかし、せっかく有料でお金を出して買ったテーマですので、一度全ての機能をザックリと使ってみてから判断することをオススメします。

-WordPress テーマ, WordPress 初心者