loader image

広告 きらぼし成長日記

オリジナルバナーで個性をアピール!にほんブログ村バナーを自作してみた

2024-07-18

🌟にほんブログ村って?初心者がランキングに参加した理由

こんにちは。

プライマリ・ケアサポート きらぼし、鍼灸師・看護師のKagayaです。

ブログを始めたばかりの頃、正直なところアクセス数もほとんどなく、コメントや反応もゼロの日々が続いていました。

そんなときに目にしたのが、「にほんブログ村」というブログランキングサイト。

ブログのジャンルごとに登録ができて、ランキング形式で他のブロガーさんと繋がれる、というものでした。

「アクセスアップに効果あり」「クリック応援で読者の輪が広がる」といった評判を見て、Kagayaもとりあえず登録してみたのが最初のきっかけです。

とはいえ、当時は記事を書くことで精一杯。

プロフィールやバナーの設置など、手が回らずに長いこと放置してしまっていました。

ですが最近になって、「せっかくブログを続けてきたんだから、そろそろ本格的にランキングにも参加してみようかな」と思うように。

ちょっとした気まぐれですが、自分なりにブログに個性を出していくタイミングとしては悪くないなと感じました。

にほんブログ村のランキングに参加するには、専用のバナーを自分のブログに設置する必要があります。

これによって「クリック応援」という仕組みが成立し、ランキングに反映されるというわけですね。

最初に見つけたのは↓のような公式のデフォルトバナー。

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

この無難なバナーも悪くはないのですが、自分の世界観を出すにはちょっと味気ないかも…と思ってしまいました。

最近では、他のブロガーさんがかわいらしい手作りバナーを使っていたり、おしゃれな配色で統一感を出していたりするのをよく見かけます。

「せっかく設置するなら、やっぱり自分らしいバナーを作りたい!」と思い、Kagayaもオリジナルバナーづくりに挑戦してみることにしました。

調べてみると、にほんブログ村では画像さえあれば簡単にオリジナルバナーが作成可能とのこと。

それなら、愛着のあるロゴやキャラクターを使って自分だけのバナーを作ってみよう!ということで、さっそく制作を始めました。

この記事では、実際にKagayaが行った「オリジナルバナーの作成手順」と「設置方法」、そして「使用したツール(Canvaなど)」について詳しくご紹介します。

「ランキングに参加したいけど、どうやってバナーを貼るの?」「オリジナルバナーって難しいの?」と迷っている方の参考になれば嬉しいです。

🌟使用する画像制作~Canvaで簡単!オリジナルバナーづくりの第一歩~

にほんブログ村のオリジナルバナーを作成するためには、あらかじめ用意する画像に条件があります。

公式サイトによると、サイズは240ピクセル×240ピクセル以内、ファイルの重さは最大5MBまでという制限があります。

そこでKagayaは、デザイン初心者でも手軽に使えるツールとして有名な「Canva」を使って、画像制作を始めることにしました。

Canvaでは、カスタムサイズを自由に指定できるので「240px × 240px」と入力して新規キャンバスを作成するだけでOK。

テンプレートも豊富にあるので、初心者でも直感的に操作できます。

Canvaで作成したバナー画像

↑こちらが実際に作成した画像です。

丸い背景の中に、サブロゴと簡単な文字を組み合わせてデザインしてみました。

本当は「プライマリ・ケアサポート きらぼし」という事業所名も入れようかと考えたのですが、文字が細かくなりすぎてしまい、視認性が低くなるのが気になって断念しました。

また、トップページに表示しているメインロゴとかぶってしまうのも気になり、今回はバナー用に用意している「サブロゴ」を使用することにしました。

うちにはロゴが2種類あり、どちらも気に入っているのですが、シーンによって使い分けていこうと思っています。

ちなみにロゴに添える文字(キャッチフレーズ)も色々と悩みました。

定番の文言をリサーチしてみると…

  • 「応援のポチお願いします」
  • 「ランキングに参加しています。クリックしてね」
  • 「クリックで応援してね」
  • 「ぽちっと応援してね」
  • 「ポチっとしてね」

…といったフレーズをよく見かけました。

でもKagaya個人としては、「クリックしてね」や「応援お願いします」といった催促的な文言には少し抵抗がありました。

なんとなく、選挙で「私に投票して!」と連呼されるような感覚がしてしまって…。

だからこそ、あくまで控えめに、「にほんブログ村ランキングに参加しています」や「ランキング参加中」といったスタイルで、そっと存在を示す程度に留めることにしました。

クリックしてくださるかどうかは読者さんの判断に委ねたいなと。

そして実際に画像を作ってみると、背景の色や淵の装飾にも悩みどころがありました。

背景色は最終的にちょっと失敗だったな…と思っていて、パソコン版のブログ表示では背景と馴染んでしまい、せっかくの円形デザインが目立たないという結果に。

淵を飾るために影をつけてみたり、線を加えてみたりもしたのですが、技術的にうまくいかず今回は断念。

でも、また時間のあるときにリベンジしたいと思っています。

ちなみに、画像制作は無料の範囲でも十分楽しめますが、より細かな調整をしたい方は「Canva Pro」やプロのデザイナーへの依頼もおすすめ。

たとえば「ココナラ」では、リーズナブルな価格でバナー制作を依頼できるサービスも豊富にあります。

自分で作るか、外注するかは好みや時間の余裕によりますが、「ちょっと凝ったオリジナルバナーを作ってみたいな」と思った方は、まずは無料のCanvaから始めてみるのが手軽でおすすめです。

🌟オリジナルバナー作り~ブログ村マイページで簡単に設定!

Canvaでバナー用の画像が完成したら、次はいよいよ「にほんブログ村」でのオリジナルバナー作成です。

ブログ村のマイページにログインし、上部メニューから「ランキング参加」を選択し、そこから「オリジナルバナー作成」という項目をクリックします。

にほんブログ村バナー作成画面

専用画面では、数ステップでオリジナルバナーを作ることができます。

まず、参加しているランキングカテゴリを選択し、次にバナーの表示スタイルタイトル文字の設定などを行います。

バナーの種類は「画像あり」「画像なし」「テキストのみ」など複数から選べますが、今回はCanvaで作った自作画像を使うため、「画像をアップロード」する形式を選択しました。

バナー作成設定項目画面

画像を選択してアップロードすると、すぐにプレビュー画面で仕上がりを確認することができます。

ここで実際の見え方をチェックできるのはありがたいポイントです。

プレビュー画面

細かい文字の位置やバナー内のバランスが気になる場合は、ここで再度画像を作り直してアップロードし直すこともできます。

何度でもやり直せるので、自分が納得いくまで微調整できるのが嬉しいです。

次に「利用規約に同意する」にチェックを入れ、バナーを作成します。すると、自動で生成されたHTMLコード(バナータグ)が表示されます。

バナー作成完了とコード表示

このコードが、ブログのHTML部分に貼り付けるタグになります。

WordPressを使っている方なら、「カスタムHTML」ブロックを使用して設置するのが一般的です。

ウィジェット、フッター、サイドバー、記事下など好きな場所に貼り付けることが可能です。

Kagayaは、まずはブログのプロフィール下とスマホ版スライドメニューの下に表示させてみました。

表示のされ方や、背景色とのバランスを見ながら微調整も行っています。

画像制作からブログ村での登録まで、一見面倒に見える作業ですが、画像が用意できていれば5分~10分ほどで完了します。

操作はとてもシンプルで、直感的に進められるようになっているので、ブログ初心者さんにもおすすめです。

バナーが完成すれば、あとはそれを貼り付けるだけでランキング参加の準備が整います。

🌟ブログに挿入する~カスタムHTMLでサイドバーとスマホに設置

オリジナルバナーの作成が完了したら、いよいよそれをブログに設置する作業です。

にほんブログ村で発行されたHTMLコード(いわゆる「バナータグ」)を、WordPressの管理画面から貼り付けていきます。

Kagayaの場合は、サイドバーのプロフィール下にバナーを表示させたかったので、管理画面の「外観」→「ウィジェット」を開きました。

ウィジェットエリアの中から「サイドバーウィジェット」を選び、「カスタムHTML」というブロックを追加します。

WordPressウィジェットのカスタムHTML設定画面

ここに、ブログ村で生成されたHTMLコードをそのまま貼り付けるだけでOKです。

設置後のPC画面表示

↑設置後の画面がこちら。アーカイブの下に、ちゃんとバナーが表示されました。

これでパソコン版では読者さんの目に触れる位置に設置できました。

ただし、ひとつ気になったのは背景色との相性です。

今回作成したバナーは円形デザインだったのですが、背景色がブログのサイドバーとほぼ同じだったため、円の境目がわかりづらくなってしまいました。

このあたりは、背景色を少し濃いめにする、もしくは影をつけるなど、デザイン面で工夫すればもっと際立たせることができそうです。

スマホ版スライドメニュー下に表示されたバナー

こちらはスマートフォンでの表示例。

スマホでは「スライドメニュー内」の「プロフィールの下」に表示されるよう設定してみました。

こちらの方が背景と被らないため、円形デザインもきれいに見えています。

ちなみに、ブログの各ページに同じように設置したい場合は、テーマによってはフッター記事下にも同様の手順で追加可能です。

ただし、あまりに何度も表示されると、読者の目には少し「しつこい」と感じられてしまうかもしれません。

にほんブログ村 にほんブログ村へ
にほんブログ村

↑このように、HTMLコードを任意の場所に貼り付けるだけで、オリジナルバナーを簡単に表示させることができます。

一つだけ注意したいのは、スマホとPCでは表示エリアが異なるため、両方の表示を必ず確認すること。

特にAFFINGERなどのテーマでは、表示条件の細かな設定が可能なので、スマホ用・PC用と分けて管理するとよりスッキリ見せられます。

バナー設置はほんの一手間ですが、ブログにオリジナリティを加え、他のブロガーさんとのつながりを作る第一歩にもなります。

おしゃれに見せるだけでなく、応援してもらいやすいブログづくりにもつながるので、ぜひ自分らしい場所に設置してみてください。

🌟まとめ~オリジナルバナーでブログに個性と温かみを

ここまで、にほんブログ村のランキング参加にあたって、オリジナルバナーを自作する手順をご紹介してきました。

登録するだけでは効果を実感しにくいブログ村ですが、きちんとバナーを貼り付けることでランキングに参加でき、クリックしてもらうことで少しずつアクセス数の向上にもつながっていきます。

デフォルトで用意されている公式バナーも悪くはありませんが、正直なところ少し味気ない印象を受ける方も多いと思います。

せっかく自分で丁寧に育ててきたブログ。

レイアウトやデザインにこだわりを持っているなら、やっぱり世界観を壊さないバナーを使いたいですよね。

そんなときに活用できるのが、にほんブログ村の「オリジナルバナー作成」機能です。

画像ファイルさえ用意できれば、マイページから誰でも無料で作成・設置することができます。

Kagayaが実際に行った手順は、以下の3ステップでした。

  • Canvaで240px × 240px以内の画像を作成
  • にほんブログ村のマイページでオリジナルバナーを作成
  • WordPressの「カスタムHTML」でブログに貼り付け

この3ステップで、手軽に「自分だけの応援バナー」を設置することができます。

最も時間がかかるのはやはり画像のデザイン部分ですが、Canvaを使えば無料のテンプレートやパーツが豊富にあるため、初心者でも安心してチャレンジできます。

もし「デザインが苦手…」「もっとプロっぽい見た目にしたい」という方には、外注という選択肢もおすすめです。

たとえば、ココナラでは、1,000円〜3,000円程度でバナー作成を請け負ってくれるクリエイターさんがたくさんいます。

ロゴのイメージを伝えるだけで、見栄えの良い画像を仕上げてくれるので、こだわりたい方にはぴったりのサービスです。

「ブログにオリジナルのバナーを設置したい」「ちょっとしたデザインで差をつけたい」と思っている方は、ぜひ今回の手順を参考にしてみてください。

ほんの少しの工夫で、ブログの印象もガラッと変わりますよ!

-きらぼし成長日記