人気ブログランキングのオリジナルバナーの作り方と画像のサイズを解説！

ブログに人気ブログランキングのバナーを貼りたいけれど、オリジナルバナーの作り方やサイズの決め方がよくわからないと悩んでいませんか。

人気ブログランキングのオリジナルバナーの作り方とサイズの考え方を、初心者でも迷わないように順番に解説していきます。

人気ブログランキングのオリジナルバナーとは？

人気ブログランキング オリジナルバナーの基本

人気ブログランキングのオリジナルバナーは、かんたんにいうと「ランキングへの投票リンクを兼ねた、自分好みの画像バナー」です。特徴を表にまとめると、イメージしやすくなります。

項目	内容
役割	人気ブログランキングへの投票リンクを兼ねた画像バナー
ベース	人気ブログランキングの公式バナー画像と、自分の画像や背景を組み合わせたもの
作成方法	ランキング側が用意しているオリジナルバナー作成機能を使うのが基本
保存	いくつかのパターンを登録しておき、切り替えて使える仕組み
設置場所	サイドバー、記事下、ヘッダー付近など、ブログのレイアウトに合わせて自由に配置
クリック効果	読者がクリックすると、ランキングのポイントが加算されて順位に反映される

イメージとしては「人気ブログランキングのロゴ入りバナーに、自分のブログの雰囲気を重ねた看板」のようなものです。ランキングのルールを守りつつ、ブログの世界観を伝える小さな広告、と考えるとわかりやすいと思います。

通常バナーとの違いとメリット

通常バナーとオリジナルバナーの一番大きな違いは「デザインの自由度」です。

通常バナーは、人気ブログランキングが用意した画像をそのまま貼るだけなので、手間はほとんどかかりません。その一方で、ほかのブログと見た目がほぼ同じになりやすく、「あのブログらしいバナー」という印象は弱くなりがちです。

オリジナルバナーにすると、次のようなメリットがあります。

• アイキャッチやヘッダーと同じ写真・色・フォントを使えるので、「このブログらしさ」を出しやすい
• 周りのバナーと見た目がかぶりにくく、読者の目にとまりやすい
• ランキングバナーが「よくある広告」ではなく、ブログの一部として自然になじむ

私も最初は通常バナーだけを貼っていたのですが、オリジナルバナーに変えたあと、以前よりクリックが増えた実感がありました。作り込む必要はありませんが、画像とサイズを少し工夫するだけでも結果は変わりやすいと感じています。

人気ブログランキング オリジナルバナーのサイズの基本ルール

画像サイズの上限と推奨サイズ

人気ブログランキング側でも、あまり極端に大きな画像は想定されていません。公式の案内を参考にしつつ、実際の運用で扱いやすいサイズ感をまとめると、次のようなイメージになります。

項目	目安・ポイント
画像の縦横サイズ	横幅はおおよそ400px前後まで、高さは200px前後までにおさえると扱いやすい
画像の比率	横長（2:1くらい）のほうが、サイドバーや本文におさまりやすい
ファイル形式	JPG / PNG / GIFなど、一般的な形式で問題なし
ファイル容量	表示速度を考えると、できるだけ軽め（数百KB以内）にしておくと安心
テキスト量	小さな画像に長文を詰め込まず、短いフレーズを大きく見せる

とくに大事なのが「縦横のバランス」と「文字の読ませ方」です。画像自体はある程度小さくてもかまいませんが、その中で文字まで小さくしてしまうと、一気に読まれにくくなってしまいます。あとで紹介するCanvaなどを使えば、キャンバスサイズを決めてから作り始められるので、サイズの失敗を減らしやすくなります。

設置場所別のおすすめバナーサイズ

同じ人気ブログランキングのオリジナルバナーでも、設置場所によって「ちょうどいいサイズ」は変わります。代表的な場所ごとの目安を、実際の使いやすさベースでまとめました。

設置場所	おすすめ画像サイズの目安	特徴
サイドバー	200×100〜300×150	縦に並ぶスペースなので、横長すぎず適度な存在感に調整しやすい
記事下（本文の一番下）	300×120〜400×150	本文を読み切った読者に向けて、しっかり大きめに見せられる
ヘッダー直下	400×100〜400×150	横長の細いバナーにして、メニューの邪魔をしないようにできる
記事中の段落間	200×80〜250×100	本文の流れを切りすぎないサイズで、さりげなく置きやすい

まずは「どこにオリジナルバナーを置きたいか」を決めて、その場所に合うサイズを1つ試してみるイメージがおすすめです。テーマやレイアウトによって最適な数字は少し変わるので、最初に決めたサイズを基準にしながら、少しずつ微調整していくと、自分のブログに合ったバランスが見つかりやすくなります。

人気ブログランキング オリジナルバナーの作り方【公式ツール編】

事前に準備しておきたい画像とテキスト

オリジナルバナーの作り方でつまずきやすいのが、「何を用意しておけばいいか分からない」という点です。あらかじめ次のようなものをざっくり決めておくと、画面を前にして固まる時間が減ります。

• 背景に使う画像 → ブログのアイキャッチ、ヘッダー画像、写真、イラストなどから、文字を乗せやすいものを1枚選ぶ
• 画像サイズの目安 → 「サイドバーに置くから300×120くらい」「記事下用に400×150くらい」など、用途に合わせて決める
• 入れたいコピー（ひとこと） → 「人気ブログランキング参加中」「応援クリックお願いします」など、短いフレーズを1〜2個
• 設置場所のイメージ → 一番見せたいのはサイドバーなのか、記事の最後なのかを決めておく

背景画像は、色や模様がごちゃごちゃしていないもののほうが、文字がしっかり読みやすくなります。写真を使う場合は、少し暗めにしておくと白文字が映えることが多いので、一度試してみてください。

オリジナルバナー作成ツールの使い方ステップ

人気ブログランキングのオリジナルバナー作成機能は、ざっくり次のような流れで操作します。

• 人気ブログランキングのマイページにログインする
• リンクバナーやURLを管理するページを開く
• 「オリジナルバナー」関連のメニューから、作成画面を表示する
• 背景にしたい画像ファイルをアップロードする
• バナーに使う公式ロゴやバナー画像の種類を選ぶ
• ロゴの配置位置（四隅など）や枠線の有無、色を調整する
• 必要であれば文字を追加して、フォントや色を決める
• プレビューを確認し、問題がなければ保存する
• ブログに貼り付けるためのタグ（HTMLコード）をコピーする

最初は項目が多く見えて戸惑うかもしれませんが、画面の指示どおりに進めていけば迷わず終点までたどり着けます。一度ベースとなるオリジナルバナーを作っておけば、背景画像だけ季節の写真に差し替えたパターンなども簡単に増やせるので、気楽に試してみてください。

Canvaなどでオリジナルバナー画像を作る方法

Canvaでキャンバスサイズを設定するコツ

Canvaで人気ブログランキング用のオリジナルバナー画像を作るときは、最初にキャンバスサイズ（完成画像の縦横）を決めます。設置場所を意識したサイズの例は、次のとおりです。

用途	Canvaでのキャンバスサイズ例	コメント
サイドバー用	300×120	サイドバーにちょうど収まりやすく、文字も入れやすい横長サイズ
記事下用	400×150	本文を読み終えた読者の目に入りやすい、少し大きめのサイズ
ヘッダー直下用	400×100	細めの横長バナーとして、ヘッダーやメニューの下に置きやすい
試し作り用	400×200	余白が多いので、レイアウトや文字の位置をいろいろ試しやすい

キャンバスサイズはあとから変更もできますが、「どこに置くバナーか」「どれくらい目立たせたいか」を最初にイメージしておくと、やり直しが減ります。完成した画像はPNGやJPGで書き出し、人気ブログランキングのオリジナルバナー作成画面で背景として読み込めばOKです。

クリックされやすいデザインのポイント3つ

私がオリジナルバナーのデザインで意識しているポイントは、次の3つです。

• 文字は短く、大きく、はっきりと → 「応援クリックお願いします」「人気ブログランキング参加中」など、1〜2フレーズに絞る
• 背景と文字色のコントラストをしっかりつける → 暗めの背景には白や明るい色の文字、明るい背景には黒や濃い色の文字を合わせる
• ブログ全体のテイストと揃える → アイキャッチやヘッダーと同じフォントや色を使い、サイト全体の統一感を出す

とくに、サイドバー用のように小さめのオリジナルバナーは、スマホで見るとかなり小さくなります。「凝ったデザインにしたのに読めない」という状態になりやすいので、装飾よりも「一瞬で読めること」「何のボタンかすぐ分かること」を優先してみてください。

ブログ側への設置方法とレイアウト【WordPress中心】

WordPressのサイドバーに人気ブログランキングバナーを貼る

WordPressで人気ブログランキングのオリジナルバナーをサイドバーに表示する場合、おおまかな手順は次のとおりです。

• 人気ブログランキングのマイページで、作成したオリジナルバナーのタグ（HTMLコード）をコピーする
• WordPressの管理画面で「外観」→「ウィジェット」を開く
• サイドバーのエリアに「カスタムHTML」や「テキスト」ウィジェットを追加する
• コピーしておいたタグをそのまま貼り付けて保存する
• 実際のブログを表示して、位置やバナーの大きさを目で確認する

テーマによってウィジェットの名前や配置は少し違いますが、「サイドバーのどこかにHTMLを置く」という考え方は同じです。もしバナーが横にはみ出してしまう場合は、画像自体を少し小さく作り直すか、CSSで幅を制限してあげるときれいに収まります。

記事下・本文中にバナーを入れるときの注意点

記事下や本文の途中に、人気ブログランキングのオリジナルバナーを入れることもできます。クリックは増えやすくなりますが、やり方を間違えると本文が読みにくくなってしまうので、次の点を意識してみてください。

たとえば、記事の最後に「ここまで読んでくださってありがとうございます。」と一言添え、その下に「人気ブログランキング参加中です。応援クリックしてもらえると更新の励みになります。」と書いてオリジナルバナーを置くと、自然な流れでクリックをお願いできます。押しつけにならないように、あくまで「応援してもらえたらうれしい」というスタンスを意識してみてください。

クリックされやすい文言・コピーの作り方

真似してOKな定番コピー例

まずは、私がよく使ったり、見かけることが多い定番コピーを一覧にしました。気に入ったものがあれば、そのまま使ったり、少しアレンジしてみてください。

パターン	コピー例
応援お願い系	「応援クリックしてもらえると嬉しいです」
ランキング参加アピール系	「人気ブログランキングに参加中です」
更新の励みアピール系	「1クリックが更新の励みになります」
読者メリット系	「面白いと思ったらクリックで応援」
シンプル系	「このブログを応援する」

人気ブログランキングのオリジナルバナーは、サイズが小さくなるほど文字も読みにくくなります。とくにサイドバーに置く場合は、短いコピーを大きく表示したほうが、読者にとっても親切です。「何を書けばいいかわからない」ときは、上の表から一つ選んで使ってみてください。

避けたほうがいいNG表現

逆に、避けておいたほうが無難なコピーもあります。

• 「絶対クリックして！」のように、強制しているように感じられる表現
• クリックすることで何か特典があるように誤解させる書き方
• ランキングサイトのルールに引っかかりそうな過激な表現

人気ブログランキングに限らず、ランキングサイトは不自然なクリックの増え方を嫌います。「毎日必ずクリックしないと〜」のような文言は避け、オリジナルバナーはあくまで「応援ボタン」として使うイメージでいると安心です。

規約とマナーで気をつけたいポイント

人気ブログランキングのオリジナルバナーまわりのルール

オリジナルバナー全体に共通する注意点を整理すると、次のようになります。

項目	気をつけたいポイント
画像サイズ	極端に大きな画像は使わず、常識的なサイズ（横400px前後まで、高さ200px前後まで）におさえる
ロゴの扱い	人気ブログランキングのロゴ部分は、読めなくなったり、意味が変わるような加工をしない
クリック誘導	強制や誤解を招く表現を避け、「応援してくれたらうれしい」というレベルにとどめる
不正クリック	自分で連続してクリックしたり、自動クリックをさせたりしない
登録の目的	スパム的な使い方をせず、まっとうにブログを紹介するための手段として使う

詳しい利用条件は、人気ブログランキングの公式サイトであらためて確認しておくと安心です。オリジナルバナーのサイズや文言は、「見やすく、分かりやすく、やりすぎない」という3つを意識しておけば、大きく外すことはありません。

強制退会を避けるための考え方

もしルールに反した使い方をしてしまうと、最悪の場合はアカウントの停止や、ランキングから外れてしまうことがあります。そうならないために、次のような考え方を持っておくと安心です。

• クリックはあくまで「読者の好意」であって、義務ではないと考える
• オリジナルバナーで過度に煽る表現は避ける
• 「これはちょっとやりすぎかな」と感じたものは一度立ち止まる

人気ブログランキングのオリジナルバナーは、そこから読者との関係が深まっていくきっかけにもなります。長く気持ちよく使っていくためにも、短期的なクリック数だけを追いかけず、マナーの範囲で工夫していきましょう。

よくあるトラブルと人気ブログランキングバナーの対処法

バナーが表示されない・崩れるとき

まずは、人気ブログランキングのオリジナルバナーを貼ったのに「表示されない」「レイアウトが崩れる」ときによくある原因を整理します。

症状	主な原因	対処の例
まったく表示されない	HTMLタグをビジュアルモードに貼ってしまい、書き換えられている	「カスタムHTML」やテキストのHTMLモードで、タグを貼り直す
一部だけ表示される	コードの途中で改行や削除が入っている	人気ブログランキング側からタグをコピーし直し、余計な改行を入れずに貼る
横にはみ出す	画像サイズが大きすぎる、テーマ側の幅に合っていない	画像を一回り小さく作り直すか、CSSでmax-widthを指定する
スマホでつぶれて見える	文字が小さすぎる、情報を詰め込みすぎ	コピーを短くし、フォントサイズを大きめにしたバナーを作り直す

とくに、WordPressのビジュアルエディタ画面にそのままタグを貼り付けると、一部が自動変換されてレイアウトが崩れることがあります。「HTMLをそのまま貼る場所なのか」を確認しながら設置してみてください。

スマホで小さすぎる・大きすぎるとき

人気ブログランキングのオリジナルバナーを設置したあと、多くの人がぶつかるのが「スマホで見るとサイズ感がおかしい」という悩みです。小さすぎる場合と大きすぎる場合で、考え方を分けてみます。

• 小さすぎるとき → 画像の縦幅を少しだけ大きくしたバナーを作り直す → コピーの文字数を減らし、フォントサイズを上げる
• 大きすぎるとき → キャンバスの横幅を一回り小さくして作り直す → 必要に応じてCSSで「max-width:100%; height:auto;」のように調整する

一番確実なのは、自分のスマホで実際にブログを表示してみることです。サイドバーや記事下のオリジナルバナーを眺めながら、「もう少し小さく」「もう少し大きく」といった感覚で微調整していくと、自分なりの正解が見つかります。

よくある質問

Q1. 人気ブログランキング オリジナルバナーの作り方で一番かんたんな方法は？

A. 一番かんたんなのは、人気ブログランキングの公式オリジナルバナー作成機能をそのまま使う方法です。あらかじめ横長の画像を1枚用意しておき、作成画面でその画像を背景として読み込みます。あとは、ロゴの種類と位置、枠線や文字の色を決めて保存し、表示用のタグをコピーしてブログに貼るだけです。慣れてきたら、Canvaなどで作った画像を背景に使うと、オリジナル感をさらに出せます。

Q2. 人気ブログランキング オリジナルバナーのサイズはどれぐらいにするのが無難ですか？

A. 迷ったときの無難なサイズは、横幅300〜400px、高さ100〜150pxくらいを目安にしておくと扱いやすいです。サイドバー中心なら300×120前後、記事下中心なら400×150前後にしておくと、多くのWordPressテーマで違和感なく収まります。同じサイズでも、ブログのレイアウトによって見え方が変わるので、実際に表示しながら微調整してみてください。

Q3. オリジナルバナーの画像サイズを変えるときにSEOは気にしたほうがいいですか？

A. 画像が大きすぎてページの読み込みが遅くなると、SEOに影響が出る可能性があります。ただ、人気ブログランキングのオリジナルバナーはもともと小さめの画像で済むことが多いので、極端に大きなサイズにしなければ大きな問題になることは少ないです。心配な場合は、画像圧縮ツールを使ってファイル容量を軽くしたり、ほかの画像との合計枚数が増えすぎないようバランスを取ったりしてみてください。

まとめ

この記事のポイントを整理します

今日からの一歩としては、まず「どこにバナーを置きたいか」を決め、300×120か400×150あたりのサイズでシンプルなオリジナルバナーを1つ作ってみてください。

そして、人気ブログランキングの公式ツールでその画像を背景にしたバナーを作成し、サイドバーか記事下に貼ってみましょう。一度形にしてしまえば、あとは季節や気分に合わせて画像やコピーを変えていくだけで、自分のブログらしいオリジナルバナーに育っていきます。