Affinger4Proの使い方とカスタマイズ方法を、シンプルなランキングサイトを作りながらご説明します。
最初にこの手順をやると何ができるのかご理解頂くため、完成した状態をご紹介します。下のようなランキングサイトになります。ちょうどオンライン英会話のサイトを作ろうとしていたので、その土台を作るつもりで作りました。
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/complete.jpg)
無料版のStinger Plusにはない、ランキング作成、ヘッダー画像の横幅100%などの機能を使っています。
もくじ
AFFINGER4proの購入
購入・ダウンロード方法がわかりづらい場合は、詳しく解説した記事を書きましたので、そちらもご覧ください。
![](https://webfood.info/wp-content/uploads/common/affinger4pro-320x180.png)
AFFINGER4proのインストール
WordPressをインストールしたデフォルトのテーマから始めます。
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/original.png)
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/theme-go.png)
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/theme-new.png)
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/theme-select.png)
affinger4.zipを選択します。
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/theme-upload.png)
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/theme-uploaded.png)
するとこのような状態になります。
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/initial.png)
フッターのクレジットを削除する
フッターの右側に、「by AFFINGER4」という文字があるのにお気づきでしょうか?
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/credit.png)
こちらは、AFFINGERの公式サイトへのリンクになっています。余計な発リンクはSEO的に良くないと言われているので、これを削除します。
それには「クレジット削除プラグイン」というものを使います。
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/go-to-plugin.png)
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/go-to-upload-plugin.png)
「クレジット削除プラグイン」は、最初にインフォトップでAFFINGER4Proを購入した際にダウンロードした、zipファイルの中に入っています。
zipを開いたら、「クレジット削除プラグイン」というフォルダを開きます.
その中にある、credit-remover.zipというファイルをインストールします。
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/credit-remover.png)
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/credit-remover-upload.png)
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/credit-remover-uploaded.png)
すると「by AFFINGER4」はなくなります。
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/credit-removed.png)
ヘッダー画像を設定する
まずはAFFINGER4のオリジナルのカスタマイザーを有効にします。それにはAFFINGER4の管理画面で設定します。
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/go-to-affinger-mng.png)
カスタマイザーを有効にするついでに、基本カラーも決めてしまいます。
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/enable-customizer.png)
今回はロゴを使わないので以下をチェックします。
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/disable-logo.png)
カスタマイザーに移動します。AFFINGER4の設定は基本的に、AFFINGER4の管理画面、このカスタマイザー、そして後で登場するランキング管理画面の3箇所で行います。
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/go-to-customizer.png)
もしここで日本語部分が文字化けする方は下の記事をご覧ください。
![](https://webfood.info/wp-content/uploads/common/wordpress-320x180.png)
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/go-to-header.png)
ここからヘッダー画像をアップロードします。今回は自作のヘッダー画像を作ってみました。
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/select-header.png)
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/check-header.png)
今回はもともとぴったりのサイズの画像を作成してアップロードしたので、「切り抜かない」を選びます。大きめの画像などをアップする場合は、ここで適当な部分を切り抜くことができます。
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/cut-header.png)
メニューを設定する
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/go-to-menu.png)
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/make-menu.png)
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/input-menu-name.png)
「このメニューに新しいトップレベルペーを自動的に追加」をチェックしておくと、あたらいく固定ページを追加した際にメニューに追加されます。
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/select-menu-item.png)
この設定を行ってもサイドメニューは、AFFINGER4っぽくないままです。これをAFFINGER4っぽくしていきます。
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/sidebar-before.png)
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/go-to-widget.png)
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/go-to-sidebar-top.png)
サイドバートップのコンテンツを一度全て削除します。
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/remove-item.png)
すると新着記事だけになります。これも非表示にできるのですが、それは後ほど行います。
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/sidebar-after.png)
サイドバートップにAFFINGERのメニューを加えます。
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/add-menu.png)
「01_STINGERサイドバーメニュー」を選択します。
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/select-sidemenu.png)
これでさきほど作成したメニューが表示されます。
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/sidebar-stinger.png)
次に、トップページに表示する固定記事を決めます。
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/go-to-fixedfront.png)
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/set-frontpage.png)
とりあえずサンプルページを指定します。
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/set-frontpage-after.png)
ここでサイドバーの新着記事を表示されないようにします。AFFINGER4管理画面で行います。
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/disable-newentry.png)
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/removed-new-entry.png)
ヘッダー画像を横幅100%にする
カスタマイザーのヘッダー画像をアップロードした部分で以下をチェックします。
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/width-100.png)
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/expanded-header.png)
スポンサーリンク
固定記事をいくつか追加する
ランキングのアイテム一つ一つの詳細ページがあったほうがそれらしいので、固定記事をいくつか適当に追加します。
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/go-to-fixedpage.png)
メニューに追加した記事が現れました。
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/added-menu.png)
メインメニューを非表示にする
メインメニューとサイドメニューの内容が同じなので、今回はメインメニューを非表示にします。AFFINGER4管理画面で設定します。
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/disable-mainmenu.png)
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/disabled-mainmenu.png)
ランキングを作成する
ランキング管理画面で行います。
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/go-to-ranking-mng.png)
必要な項目を入力します。ここで、「トップページに表示」をチェックしましたが、記事投稿画面側でもランキングを表示するかどうかを設定できます。
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/set-ranking.png)
次に1〜3位のアイテムの内容を入力します。ここでは1位のみ示します。アフィリエイトコードには、バナーのアフィリエイトコードとテキストのアフィリエイトコードを入力します。テキストのほうは、ボタンのラベルになるので適当な文字に変えるのがいいかもしれません。
「詳細ページへのリンクURL」は固定記事のパーマリンクを入力します。ここはパーマリンクを変えた場合は、いちいち変えなければなりません。また、URLの最初は画像のように「/(スラッシュ)」で始めるか、ドメインを含めたフルURLで入力しないときちんと画面遷移しません。
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/set-ranking-1.png)
下のようなランキングがトップページに表示されます。
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/made-ranking.png)
トップページの記事を装飾する
トップページに設定した記事を編集します。AFFINGER4proの魅力の一つは、記事を装飾するスタイルが豊富な点です。
下のように、装飾したい部分を選択して、スタイルから希望のスタイルを選びます。
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/make-num-list.png)
チェックマークや番号付きリストも、カスタマイザーで色を変えることができます。
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/before-color.png)
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/set-color.png)
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/set-color-after.png)
スマホ用メニューを設定する
スマホで表示した時の右上のボタンを押すと出てくるメニューがこのままだとAFFINGERっぽくないものになっています。
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/sp-menu-before.png)
カスタマイザーの「メニューの位置」から設定します。フッターのメニューも現状おかしいのでここで設定しておきます。
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/set-sp-footer-menu.png)
これでAFFINGER4っぽくなりました。
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/sp-menu-after.png)
この手順はこれで終了です。パソコンで見たら下のようになっています。
![AFFINGER4proの使い方とカスタマイズ法](/wp-content/uploads/posts/affinger4pro-usage/complete.jpg)
さいごに
いかがでしたでしょうか?
シンプルで見やすいランキングサイトが簡単に作れるのがご理解いただけたのではないでしょうか。
このテーマの評価もしたので興味のある方は以下をご覧ください。
![](https://webfood.info/wp-content/uploads/common/affinger4pro-320x180.png)