AFFINGER4proの使い方とカスタマイズ法|ランキングも楽々

AFFINGER4proのトップ画像

Affinger4Proの使い方とカスタマイズ方法を、シンプルなランキングサイトを作りながらご説明します。

最初にこの手順をやると何ができるのかご理解頂くため、完成した状態をご紹介します。下のようなランキングサイトになります。ちょうどオンライン英会話のサイトを作ろうとしていたので、その土台を作るつもりで作りました。

AFFINGER4proの使い方とカスタマイズ法

無料版のStinger Plusにはない、ランキング作成、ヘッダー画像の横幅100%などの機能を使っています。

まずはAFFINGER4Proを入手します。購入・ダウンロード方法を詳しく書いたのでご覧ください。

⇒AFFINGER4proの購入・ダウンロード方法

AFFINGER4proのインストール

WordPressをインストールしたデフォルトのテーマから始めます。

AFFINGER4proの使い方とカスタマイズ法

AFFINGER4proの使い方とカスタマイズ法

AFFINGER4proの使い方とカスタマイズ法

AFFINGER4proの使い方とカスタマイズ法

affinger4.zipを選択します。

AFFINGER4proの使い方とカスタマイズ法

AFFINGER4proの使い方とカスタマイズ法

するとこのような状態になります。

AFFINGER4proの使い方とカスタマイズ法

フッターのクレジットを削除する

フッターの右側に、「by AFFINGER4」という文字があるのにお気づきでしょうか?

AFFINGER4proの使い方とカスタマイズ法

こちらは、AFFINGERの公式サイトへのリンクになっています。余計な発リンクはSEO的に良くないと言われているので、これを削除します。

それには「クレジット削除プラグイン」というものを使います。

AFFINGER4proの使い方とカスタマイズ法

AFFINGER4proの使い方とカスタマイズ法

「クレジット削除プラグイン」は、最初にインフォトップでAFFINGER4Proを購入した際にダウンロードした、zipファイルの中に入っています。

zipを開いたら、「クレジット削除プラグイン」というフォルダを開きます.
その中にある、credit-remover.zipというファイルをインストールします。

AFFINGER4proの使い方とカスタマイズ法

AFFINGER4proの使い方とカスタマイズ法

AFFINGER4proの使い方とカスタマイズ法

すると「by AFFINGER4」はなくなります。

AFFINGER4proの使い方とカスタマイズ法

ヘッダー画像を設定する

まずはAFFINGER4のオリジナルのカスタマイザーを有効にします。それにはAFFINGER4の管理画面で設定します。

AFFINGER4proの使い方とカスタマイズ法

カスタマイザーを有効にするついでに、基本カラーも決めてしまいます。

AFFINGER4proの使い方とカスタマイズ法

今回はロゴを使わないので以下をチェックします。

AFFINGER4proの使い方とカスタマイズ法

カスタマイザーに移動します。AFFINGER4の設定は基本的に、AFFINGER4の管理画面、このカスタマイザー、そして後で登場するランキング管理画面の3箇所で行います。

AFFINGER4proの使い方とカスタマイズ法

もしここで日本語部分が文字化けする方は下の記事をご覧ください。

WordPressのカスタマイザーで文字化けした件への対処

AFFINGER4proの使い方とカスタマイズ法

ここからヘッダー画像をアップロードします。今回は自作のヘッダー画像を作ってみました。

AFFINGER4proの使い方とカスタマイズ法

AFFINGER4proの使い方とカスタマイズ法

今回はもともとぴったりのサイズの画像を作成してアップロードしたので、「切り抜かない」を選びます。大きめの画像などをアップする場合は、ここで適当な部分を切り抜くことができます。

AFFINGER4proの使い方とカスタマイズ法

メニューを設定する

AFFINGER4proの使い方とカスタマイズ法

AFFINGER4proの使い方とカスタマイズ法

AFFINGER4proの使い方とカスタマイズ法

「このメニューに新しいトップレベルペーを自動的に追加」をチェックしておくと、あたらいく固定ページを追加した際にメニューに追加されます。

AFFINGER4proの使い方とカスタマイズ法

この設定を行ってもサイドメニューは、AFFINGER4っぽくないままです。これをAFFINGER4っぽくしていきます。

AFFINGER4proの使い方とカスタマイズ法

AFFINGER4proの使い方とカスタマイズ法

AFFINGER4proの使い方とカスタマイズ法

サイドバートップのコンテンツを一度全て削除します。

AFFINGER4proの使い方とカスタマイズ法

すると新着記事だけになります。これも非表示にできるのですが、それは後ほど行います。

AFFINGER4proの使い方とカスタマイズ法

サイドバートップにAFFINGERのメニューを加えます。

AFFINGER4proの使い方とカスタマイズ法

「01_STINGERサイドバーメニュー」を選択します。

AFFINGER4proの使い方とカスタマイズ法

これでさきほど作成したメニューが表示されます。

AFFINGER4proの使い方とカスタマイズ法

次に、トップページに表示する固定記事を決めます。

AFFINGER4proの使い方とカスタマイズ法

AFFINGER4proの使い方とカスタマイズ法

とりあえずサンプルページを指定します。

AFFINGER4proの使い方とカスタマイズ法

ここでサイドバーの新着記事を表示されないようにします。AFFINGER4管理画面で行います。

AFFINGER4proの使い方とカスタマイズ法

AFFINGER4proの使い方とカスタマイズ法

ヘッダー画像を横幅100%にする

カスタマイザーのヘッダー画像をアップロードした部分で以下をチェックします。

AFFINGER4proの使い方とカスタマイズ法

AFFINGER4proの使い方とカスタマイズ法

固定記事をいくつか追加する

ランキングのアイテム一つ一つの詳細ページがあったほうがそれらしいので、固定記事をいくつか適当に追加します。

AFFINGER4proの使い方とカスタマイズ法

メニューに追加した記事が現れました。

AFFINGER4proの使い方とカスタマイズ法

メインメニューを非表示にする

メインメニューとサイドメニューの内容が同じなので、今回はメインメニューを非表示にします。AFFINGER4管理画面で設定します。

AFFINGER4proの使い方とカスタマイズ法

AFFINGER4proの使い方とカスタマイズ法

ランキングを作成する

ランキング管理画面で行います。

AFFINGER4proの使い方とカスタマイズ法

必要な項目を入力します。ここで、「トップページに表示」をチェックしましたが、記事投稿画面側でもランキングを表示するかどうかを設定できます。

AFFINGER4proの使い方とカスタマイズ法

次に1〜3位のアイテムの内容を入力します。ここでは1位のみ示します。アフィリエイトコードには、バナーのアフィリエイトコードとテキストのアフィリエイトコードを入力します。テキストのほうは、ボタンのラベルになるので適当な文字に変えるのがいいかもしれません。

「詳細ページへのリンクURL」は固定記事のパーマリンクを入力します。ここはパーマリンクを変えた場合は、いちいち変えなければなりません。また、URLの最初は画像のように「/(スラッシュ)」で始めるか、ドメインを含めたフルURLで入力しないときちんと画面遷移しません。

AFFINGER4proの使い方とカスタマイズ法

下のようなランキングがトップページに表示されます。

AFFINGER4proの使い方とカスタマイズ法

トップページの記事を装飾する

トップページに設定した記事を編集します。AFFINGER4proの魅力の一つは、記事を装飾するスタイルが豊富な点です。

下のように、装飾したい部分を選択して、スタイルから希望のスタイルを選びます。

AFFINGER4proの使い方とカスタマイズ法

チェックマークや番号付きリストも、カスタマイザーで色を変えることができます。

AFFINGER4proの使い方とカスタマイズ法

AFFINGER4proの使い方とカスタマイズ法

AFFINGER4proの使い方とカスタマイズ法

スマホ用メニューを設定する

スマホで表示した時の右上のボタンを押すと出てくるメニューがこのままだとAFFINGERっぽくないものになっています。

AFFINGER4proの使い方とカスタマイズ法

カスタマイザーの「メニューの位置」から設定します。フッターのメニューも現状おかしいのでここで設定しておきます。

AFFINGER4proの使い方とカスタマイズ法

これでAFFINGER4っぽくなりました。

AFFINGER4proの使い方とカスタマイズ法

この手順はこれで終了です。パソコンで見たら下のようになっています。

AFFINGER4proの使い方とカスタマイズ法

さいごに

いかがでしたでしょうか?

シンプルで見やすいランキングサイトが簡単に作れるのがご理解いただけたのではないでしょうか。

もし、まだAFFINGER4proをお持ちでないようでしたら、公式サイトだと6,500円のところ、下の特別優待サイトからだと1,000円割引の5,500円で購入できます。

⇒AFFINGER4優待特別販売ページ

羊毛や小麦