スポンサーリンク

おしゃれなランキングバナーの設置方法!人気ブログランキング/にほんブログ村/稼ぐブログランキング

ブロガーの交流の場となっている「人気ブログランキング」「にほんブログ村」「稼ぐブログランキング」などのブログランキング。

ブログをかじったことがあれば、一度は耳にしたことがあるどころか、登録して有効活用している方も多いのではないでしょうか。

ランキングに参加するには、あなたのブログに、よく見かける以下の様なバナーを貼る必要があります。

ブログランキング・にほんブログ村へ稼ぐブログランキング

ただ、筆者の好みとして、当ブログにバナーデザインがマッチしませんし、もう少し控え目なバナーを設置したい...ということで、当ブログのバナーは以下の様にしています。

\ランキング参加中/
 にほんブログ村 にほんブログ村へ 稼ぐブログランキング

この記事では、当ブログ同様に各種ブログランキングのバナーを貼る方法を解説します。

スポンサーリンク

バナーの取得方法

各種ブログランキングに会員登録した上で、下記のページからバナーのURLを取得することができます。

人気ブログランキングマイページリンクバナー・リンクURL

にほんブログ村マイページランキングバナー

稼ぐブログランキングマイページ

バナーURLの貼り方はこちらが参考になります。

当ブログのバナー設置方法

テーマは「Cocoon」で、投稿本文の下に以下のようなバナーを設置する方法です。

\ランキング参加中/
 にほんブログ村 にほんブログ村へ 稼ぐブログランキング

①[外観] > [ウィジェット] > [カスタムHTML] > [投稿本文下] > [ウィジェットを追加]する。

②以下のHTMLをコピーし、メモ帳等で下記の通り変更する。

<center>

\ランキング参加中/
	
<br>

<!-- 人気ブログランキングバナー -->
<a href="https://blog.with2.net/link/?id=2067076" target="_blank"><img width="80" height="15" src="https://blog.with2.net/img/banner/banner_11.gif" title="人気ブログランキング"></a><a href="https://blog.with2.net/link/?id=2067076" target="_blank" style="font-size: 0.9em;"></a>

&nbsp;

<!-- にほんブログ村 -->
<a href="https://blogmura.com/ranking/in?p_cid=11105182" target="_blank"><img src="https://b.blogmura.com/original/1304364" width="80" height="18" alt="にほんブログ村 にほんブログ村へ" /></a>

&nbsp; 

<!-- 稼ぐブログランキング -->
<a href="https://ranking.chienochokinbako.com/ranklink/in?un=1632906277" target="_blank" rel="noopener noreferrer" title="『稼ぐ』に特化したブログランキング!"><img src="https://ranking.chienochokinbako.com/banner/163290627701.png" width="80" height="15" alt="稼ぐブログランキング" /></a>

</center>
上記HTMLを下記の通り変更
  • id=2067076 >> あなた人気ブログランキングのID
  • p_cid=11105182 >> あなたの日本ブログ村のID
  • 1632906277 >> あなたの稼ぐブログランキングのUN

※変更しないと筆者のブログランキングに計上されます

③[内容]欄に変更したHTMLをコピー&ペーストして[完了]をクリックする。

④投稿の一番下にバナーが表示されていることを確認する。

\ランキング参加中/
 にほんブログ村 にほんブログ村へ 稼ぐブログランキング

以上で、お洒落で控えめな各種ランキングバナーを設置することができました‼

上記HTMLの青字・黄色マーカー部分が各ブログランキングの画像バナーURLですので、別のバナーに変更することも可能です。

width="80" height="15"」の数字部分を変更すれば、表示されるバナーサイズも変更することができます。

いろいろ試してみて、自分好みのバナーを設置してみてください。

コメント