今日は、ワードプレスの記事の中に、自分でランキングを作成する方法をご紹介したいと思います。
テーマは『Cocoon（コクーン）』を使おう
このサイトでは、無料のテーマ『Cocoon（コクーン）』を適用しています。
このテーマは、無料とは思えないくらい様々な便利機能が備わっていて、ワードプレス初心者の方でも素敵なホームページが作れるように開発されています。
また、アドセンスやアフィリエイトの広告設置も簡単にできるので、今のところわたしのイチ押しテーマです。
この後ご紹介するランキング作成も、そんな『Cocoon（コクーン）』内の機能を使って作っていきます。
同じようにやってみたい方、まずはテーマを『Cocoon（コクーン）』に設定してくださいね。
テーマの変更方法を知りたい・確認したい方はこちらの記事を参考にしてみてください。
ランキング作成機能を使ってみよう
ランキング形式で紹介したいデータを集めたら、『Cocoon（コクーン）』に用意されているランキング作成機能を使いましょう。
ダッシュボードのメニューから「Cocoon設定」→「ランキング作成」の順に選択します。
ランキング作成のページに切り替わったら、「新規作成」を選択します。
入力画面に切り替わったら、①から順番に入力していきます。
①タイトル…あとで何のランキングか分かる名前をつける
（サイト上のランキングには表示されないので自分が分かればOK）
②項目名…ランキング1位の商品名、サービス名、書籍名などを入力する
③評価…★マークで評価をつけたい場合のみ設定する
（なしのままであれば★マークは非表示）
④説明文…1位の商品に関する詳しい説明を入力する
一例ですが、こんな風に入力し、終わったら「保存」を選択しましょう。
「保存」を選択すると画面が切り替わり、下図のように入力した内容が表示されます。
画面を下にスクロールすると、先ほどの1位の入力画面が表れ、その下に2位の入力画面が増えています。
1位と同じ手順で内容を入力したら、2位以降は画面左下の「追加」を選択しましょう。
これを繰り返して、必要な数だけランキングを作成することができます。
ランキング内に画像を設定する（要HTML）
これでも十分立派なランキングが作成できましたが、やっぱり画像を表示したいなと思いますよね。
ランキングに画像を表示するには、ちょっとだけHTMLの知識が必要です。ただ、HTMLはわからない、という方でも、コピペが出来れば大丈夫ですので、頑張れそうな方は試してみてください。
必要な画像を準備し分かりやすい名前をつける
まず最初に、必要な画像を準備しましょう。
そして何の画像なのか、名前を見ただけで分かるように、きちんと名前を変更しておいてください。変更する名前はローマ字または英語で設定しましょう。
使用する画像をメディアライブラリにアップロードする
ランキングで使いたい画像をすべて、ワードプレスのメディアライブラリにアップロードしておきます。
画像のアップロード方法を確認したい、という方は以下の記事が参考になります（まったく同じではありませんのであくまで参考程度に）。
画像のアップロードが終わったら、メモ帳ソフトに使用する画像のアップロード先情報をコピペしていきます。
こうすると、複数枚の画像を簡単にランキングに設定できるので便利です。
アップロード先情報の確認方法
次に、メディアライブラリにアップロードした画像の、どの情報をメモ帳にコピーするかについてご案内します。
メディアライブラリを開き、情報を確認したい画像をクリックします。
すると「添付ファイルの詳細」という画面に切り替わり、該当の画像が大きく表示されます。
右側の画面下にある「リンクをコピー」欄横の文字列をすべてコピーしましょう。
※文字列は隠れていてとても長いので、文字列の上でダブルクリックして全体を選択してからコピーすると良いです。
コピーできたら、右上の「×」でこの画面を閉じます。
そしてメモ帳を開き、コピーした文字列を貼り付けておきましょう。
これを使用する画像の数だけ繰り返します。
ランキング内に画像データを設定する
「Cocoon設定」→「ランキング作成」の順に進み、ランキングの画面を表示します。
すでにランキング情報のみ作っているので、下図のように「ランキング一覧」が表示されていると思います。
ランキングのタイトル、または右横にある「編集」のどちらかをクリックすると、編集画面に移動します。
編集画面が開いたら、左下にある「画像・バナータグ」に画像を設定していきます。
以下の文字列を、「画像・バナータグ」欄にそのままコピペしてください。
<img src="ここに画像情報をコピペ" alt="画像の説明を日本語で入力">
コピペしたら、「ここに画像情報をコピペ」部分にメモ帳から画像情報をコピペしましょう。
前後の記号が消えないように気を付けてください。
そして「画像の説明を日本語で入力」の部分には、どんな画像なのか日本語で説明を入れてください。
もしネットの不調などで画像が表示されない場合に、入力した文字が表示されます。
設定が終わったら「変更を保存」を選択しましょう。
設定した画像がきちんと表示されていればOKです。
続けて、2位以下も同じ方法で設定してみましょう。
今回は先にランキングを作成し、後から画像データを設定しましたが、同時に設定することも可能です。
その際は、先に画像の準備をしっかりおこなってから、ランキングの作成に取り掛かりましょう。
アフィリエイトタグを貼る場合
アフィリエイトサービスに登録している場合、画像をアフィリエイトの入り口として貼る事ができます。
その場合は、該当する広告のアフィリエイトタグ（広告タグ）をこの欄に貼ればOK。
登録しているアフィリエイトサービスから、簡単に作成することが出来ます。
作成方法については、各自が登録しているアフィリエイトサービスのサイトでご確認ください。
投稿画面に作成したランキングを反映させる
最後に、作成したランキングを投稿画面に反映させる方法をご紹介します。
ランキング一覧画面を見て頂くと、自動的にショートコードが作成されています。
このショートコードをコピーし、投稿画面のランキングを表示したい箇所に貼り付ければ、ランキングが完成です。
貼り付けるブロックは、ショートコードブロックもありますが、段落ブロックに貼り付けても自動的にショートコードブロックに変換されます。
無事ランキングは作成出来たでしょうか。
ぜひ、オリジナルのランキングを作って、自分らしい情報発信してみてください。
それでは。
