日本ブログ村のオリジナルバナーの作り方と最適な画像サイズを解説

この記事ではにほんブログ村のオリジナルバナーの作り方や最適なサイズ感をご紹介します。

日本ブログ村のオリジナルバナーとは？メリットを整理

日本ブログ村のオリジナルバナーの仕組み

日本ブログ村には、もともと公式のランキングバナーがいくつか用意されています。オリジナルバナーは、その「ランキングバナーとしての機能」はそのままにして、見た目だけ自分の画像に差し替えられる仕組みです。

イメージしやすいように、大まかな種類を表で整理してみます。

バナーの種類	役割	見た目の特徴	向いている人
INポイントランキングバナー	クリックでINポイントが入る	公式デザインのみ	まずは簡単に参加したい人
オリジナルバナー	INバナーを自分の画像に合成	ブログの世界観に合わせられる	デザインにこだわりたい人
PVランキングバナー	PVランキング用のバナー	PVランキングのロゴ入り	アクセス推移も見たい人
フォローバナー	読者にフォローしてもらう導線	フォローを促す専用デザイン	固定ファンを増やしたい人

オリジナルバナーは、あくまで「ランキング投票ボタンの見た目を自分好みに変えるもの」です。クリックした読者が日本ブログ村のランキングページに飛ぶ点は、通常のバナーと同じです。

オリジナルバナーを作るメリット3つ

オリジナルバナーをわざわざ作るメリットは、主に次の3つです。

• ブログの世界観に合わせたデザインにできる
• クリックを促す一言メッセージを書き込める
• 他ブログと差別化できて読者の目に止まりやすくなる

特に大きいのが「差別化」です。日本ブログ村の公式バナーは、どうしても似たデザインが多く、サイドバーに並ぶと埋もれがちです。アイコンやキャラクター、自分で撮った写真などを使ったオリジナルバナーにするだけで、「あ、このブログの人だ」と読者に覚えてもらいやすくなります。

日本ブログ村オリジナルバナーの仕様とおすすめサイズ

オリジナルバナーの公式仕様（サイズ・容量・形式）

日本ブログ村の公式ヘルプでは、オリジナルバナーに使える画像の条件が決められています。内容をざっくりまとめると、次のようになります。

項目	条件
画像サイズ（縦横）	80ピクセル以上、240ピクセル×240ピクセル以内
ファイル容量	最大約5MBまで
画像形式	jpg・gif・png（アップロード時にjpgへ変換される場合あり）
内容の目安	「ランキング」「にほんブログ村」など、ランキング用バナーだと分かる表記を入れておくと親切

日本ブログ村のオリジナルバナー作成画面に画像をアップロードすると、240ピクセルを超える場合は自動で縮小されます。ただ、文字が細かすぎると縮小されたときに読めなくなるので、「文字は大きめ・太め」を意識して作ると安心です。

ブログに合うおすすめバナーサイズ例

公式仕様の上限は正方形に近いサイズですが、ブログのレイアウトを考えると「やや縦長」「ほぼ四角」にするとバランスが取りやすいです。日本ブログ村の制限内で使いやすいサイズ感を、例としてまとめておきます。

縦×横サイズ（ピクセル）	形のイメージ	おすすめの使い方
200×200	正方形	プロフィール下やサイドバーのアイコン風
200×240	やや縦長	サイドバーの少し大きめバナー
180×240	縦長寄り	サイドバーで縦にスペースを取りたいとき
160×240	すっきり縦長	細めのサイドバーや1カラムレイアウト
220×220	やや大きめの正方形	記事下に1つだけドンと置きたいとき

どれかひとつが「正解」というより、ブログのレイアウトやテーマに合わせて選ぶイメージです。迷ったら、まずは200×200か200×240あたりから試して、実際に貼ったときの見え方を見ながら微調整していくといいと思います。

Canvaでできる日本ブログ村オリジナルバナーの作り方

Canvaでキャンバスを作成する手順

まずは、オリジナルバナーの土台となるキャンバスを作ります。ここでサイズを決めてしまうので、先ほどのおすすめサイズを参考に設定していきましょう。

手順	操作内容	ポイント
1	Canvaにログインし「デザインを作成」をクリック	無料プランで十分使えます
2	「カスタムサイズ」を選択	単位は「px（ピクセル）」に切り替える
3	幅と高さに決めたサイズを入力	例：幅200、高さ200など
4	「新しいデザインを作成」をクリック	空のキャンバスが開く
5	右側のメニューで背景色を決める	ブログのテーマカラーに近い色がおすすめ
6	左メニューから「アップロード」や「テキスト」を選択	素材や文字を配置していく準備

キャンバスの比率を決めたら、実際にブログに置く位置をイメージしてみてください。サイドバーに細長く置くのか、記事下に存在感を出して置くのかで、しっくりくる比率が変わってきます。

画像・文字を配置するコツ

キャンバスが用意できたら、画像や文字を載せていきます。ここでは次の3つだけ意識すると、いきなりそれっぽいデザインになります。

• 写真と文字を重ねすぎない
• 「にほんブログ村」「ランキング参加中」などのキーワードを入れる
• 余白をしっかり残して、情報を詰め込みすぎない

配置パターンとして、よく使いやすいのはこんな形です。

• 左：ブログのアイコン画像／右：テキスト（ブログタイトルや一言メッセージ）
• 上：写真やイラスト／下：「にほんブログ村ランキング参加中」といったテキスト
• 中央：大きめのテキスト／下部：小さめのロゴやブログURL

文字色は背景とのコントラストを強めにするのが基本です。白背景なら黒や濃いグレー、写真を背景にするときは文字の後ろに半透明の四角を敷いてあげると、一気に読みやすくなります。

画像を書き出すときのポイント

デザインがまとまったら、画像として書き出します。ここで気をつけたいポイントは次の通りです。

• 形式は「PNG」か「JPG」を選ぶ（どちらでもOK）
• ファイルサイズが大きくなりすぎないようにする（5MB以内）
• 書き出した画像をPCとスマホで開き、文字が読めるか確認する

キャンバス上では大きく見えても、実際のブログ上では少し小さく表示されることがあります。「スマホで見ても読めるか」を必ずチェックしてから、日本ブログ村のオリジナルバナー作成画面にアップロードしましょう。

日本ブログ村マイページでオリジナルバナーを設定する手順

マイページでオリジナルバナー作成画面を開く

まずは、日本ブログ村のマイページにログインします。

• 上部メニューの「ランキング参加」にカーソルを合わせる
• 表示されたメニューから「オリジナルバナー作成」をクリックする

このページが、オリジナルバナー専用の設定画面です。ここで先ほどCanvaで作った画像を使って、クリックできるバナーを作ります。

画像をアップロードしてバナーを作る流れ

オリジナルバナー作成画面では、上から順番に項目を設定していくだけでOKです。よく使う項目だけを表にまとめておきます。

項目	何をするところか	ポイント
画像ファイルを選択	Canvaで作った画像をアップロードする	ファイルサイズとピクセル数の上限内か確認
埋め込むバナーを指定	合成する日本ブログ村のランキングバナーを選ぶ	INポイントランキングバナーを選ぶのが一般的
埋め込む位置を指定	バナーを画像のどこに置くか決める	右下や左下など、メインの文字を邪魔しない位置を選ぶ
バナーの表示スタイル	画像あり／テキストのみなどを選択	オリジナル画像を使うときは基本的に「画像あり」を使う
プレビュー	最終的な見た目を確認	文字が読めるか、バナーが変な位置にないかチェック

すべて設定できたら、「バナーを作成する」ボタンを押すとオリジナルバナーが完成します。そのあと、ブログに貼るためのHTMLコード（タグ）が表示されるので、まとめてコピーしておきましょう。

バナーコードをコピーしておく

作成したオリジナルバナーには、それぞれ専用のコードが発行されます。用途によっては、縦に並べたコードや、別サイズのコードが用意されていることもあります。

とりあえずサイドバーに1つ置きたい場合は、標準的なバナーコードを選んでコピーしておけば問題ありません。あとで貼り直したくなったときのために、メモアプリやテキストファイルに一度保存しておくと安心です。

WordPressで日本ブログ村バナーを貼る作り方と配置例

ウィジェットでサイドバーに貼る方法

まずは、いちばん定番の「サイドバーに貼る」方法です。どの記事を開いても表示されるので、クリックされるチャンスが増えます。

• WordPress管理画面で「外観」→「ウィジェット」を開く
• 「カスタムHTML」ウィジェットをサイドバーエリアに追加する
• タイトルは空欄か「ランキング参加中」などお好みで入力
• 日本ブログ村でコピーしたオリジナルバナーのHTMLコードを貼り付ける
• 保存して、ブログを表示して見え方を確認する

サイドバーに常に表示されるので、「どの記事から来た読者にも見てもらえる」という強みがあります。一方で、上のほうに置きすぎると主張が強く感じられることもあるので、他のウィジェットとのバランスを見ながら調整してみてください。

設置場所	特徴	向いているブログ
サイドバー上部	常に目に入るが主張は強め	日本ブログ村からの流入を増やしたいブログ
サイドバー中段	記事を読み進めたあとに自然に目に入る	雑記ブログや導線をいくつか並べたいブログ
サイドバー下部	邪魔にならないが目立ちすぎない	まずは控えめに置いて様子を見たい人

記事下やプロフィール下に貼る方法

次によく使われるのが、記事の一番下にオリジナルバナーを貼る方法です。

• 投稿編集画面を開く
• 本文の一番下に「カスタムHTML」ブロックを追加する
• オリジナルバナーのコードを貼り付ける
• 必要であれば、段落やCSSで中央寄せにする

記事を最後まで読んでくれた人は、すでにあなたのブログに好印象を持っていることが多いので、そのタイミングで「よかったら応援お願いします」とお願いするのは自然な流れです。プロフィールページを作っている場合は、その下に貼っておくのもおすすめです。

クリックされやすい配置パターン

配置のパターンには、いくつか定番があります。全部試す必要はないので、自分のブログに合いそうなものから取り入れてみてください。

• サイドバー上部と記事下の2カ所に同じバナーを貼る
• サイドバーには正方形の小さめバナー、記事下にはやや大きめのバナーを使い分ける
• プロフィール下とフッターにだけさりげなく置く

クリック率だけを考えると目立つ場所が有利ですが、あまりにも押し出しが強いと、読者に「押してほしいアピール」が伝わりすぎてしまうこともあります。自分が他人のブログを読んだときの感覚も思い出しながら、「ほどよく目に入る場所」を探してみてください。

クリックされるオリジナルバナーのデザインと文言のコツ

色・フォント・余白の基本

デザインの専門知識がなくても、次の3点を意識するだけで、見やすいオリジナルバナーになります。

• 色は「ベースカラー＋アクセントカラー」の2〜3色に絞る
• フォントは読みやすいゴシック体をメインにする
• 上下左右にしっかり余白を取る

ブログ全体のテーマカラーが決まっているなら、その色をベースにすると統一感が出ます。全く別の色を使うとバナーだけ浮いて見えてしまうので、「ブログの雰囲気からずらしすぎない範囲で目立たせる」くらいがちょうどいいです。

写真と文字を組み合わせる場合は、文字の周りに余白を確保しないと一気に読みにくくなります。迷ったら、文字を一回り大きくし、行間もゆとりを持たせてあげると、それだけでも印象がかなり変わります。

文言の例と注意点（NG例／OK例）

日本ブログ村のオリジナルバナーには、短い一言メッセージを添えておくと、クリックされやすくなります。ただ、「押して押して！」という雰囲気が強すぎると、かえって避けられてしまうこともあるので、言い回しには少し気をつけたいところです。

NGな文言例	OKな文言例	ポイント
今すぐ絶対クリック！	よかったらポチっと応援お願いします	強制ではなく、あくまでお願いベースにする
ここを押さないと損！	日本ブログ村ランキングに参加しています	ランキング参加中だと素直に伝える
クリックしないで閉じないで！	応援クリックいただけると更新の励みになります	読者への感謝を前面に出す
押してくれたら○○します！	いつも読んでくださってありがとうございます	見返りではなく、日頃のお礼の気持ちを伝える

文言を考えるときは、

• 「よかったら」「もし気に入っていただけたら」などのクッション言葉を入れる
• 「応援クリック」「ランキング参加中」など目的をはっきりさせる
• 「ありがとうございます」「励みになります」で感謝を添える

このあたりを意識しておくと、読者にも自然に受け入れてもらいやすくなります。

日本ブログ村オリジナルバナーのよくある質問

Q1. 日本ブログ村のオリジナルバナーのサイズはどれにすればいいですか？

A. まずは、日本ブログ村の公式仕様で決まっている「80ピクセル以上、240ピクセル×240ピクセル以内」という条件の中に収める必要があります。そのうえで、ブログのレイアウトに合わせて、

• サイドバー用なら、200×200や200×240などの四角〜やや縦長
• 記事下用なら、少し大きめの正方形（220×220など）

といったイメージで選ぶと使いやすいです。迷ったら、まず200×200前後から試して、実際に貼ったときの見え方を見ながら少しずつ調整していくのがおすすめです。

Q2. 日本ブログ村のオリジナルバナーはスマホでも見やすくできますか？

A. できます。ポイントは、オリジナルバナーの作り方の段階で「文字を大きめ」「色のコントラスト強め」「余白多め」を意識することです。

スマホで見るとバナーはどうしても小さく表示されるので、

• フォントサイズをPC前提より一回り大きくする
• 細い書体より、太めのゴシック体を選ぶ
• 背景と文字色が近くならないようにする

といった点を押さえておくと、スマホからでも十分読みやすいオリジナルバナーになります。

Q3. デザインが苦手で、日本ブログ村のオリジナルバナーをうまく作れるか不安です

A. 私も最初は、「色の組み合わせってどうすればいいんだろう」「ごちゃごちゃしないかな」と不安しかありませんでした。そんなときは、次のように割り切ってしまうのもアリです。

• 色は「背景1色＋文字色1色＋アクセント1色」に絞る
• 写真は1枚だけにして、文字も2行以内に抑える
• どうしても迷うなら、ココナラなど外注サービスでシンプルなデザインを依頼する

「完璧なデザイン」より、「このブログのバナーだと一目で分かること」のほうが大事です。まずはシンプルなオリジナルバナーを1つ作って貼り、慣れてきたら少しずつブラッシュアップしていけば十分だと思います。

日本ブログ村オリジナルバナー作り方のまとめ

ここまでのポイントをまとめます

今日からできる最初の一歩としては、

1. ブログの雰囲気に合う「バナーのサイズ」と「メインカラー」をざっくり決める
2. Canvaでそのサイズのキャンバスを作り、「ブログタイトル＋ランキング参加中」のシンプルなバナーを1つ作る
3. 日本ブログ村のオリジナルバナー作成画面にアップロードして、サイドバーか記事下のどちらかに貼ってみる

この3ステップだけでも、「デフォルトのバナーのまま」という状態から一歩抜け出せます。少しずつデザインや文言を調整しながら、自分のブログらしい日本ブログ村オリジナルバナーを育てていきましょう。