どうも、へろきです！
ブログのアクセスアップを目指すべく、にほんブログ村（以下、ブログ村）のブログランキングに参加していますが、このランキングではINポイントが重要だという情報を入手しました。理由はブログ村を開いたときに最初に表示されるのがINポイントのランキングだからです。今回はINポイントランキングをアップさせるために読者がバナーを押したくなるような自作バナーを作った話を記載します。
今までのバナー
ブログ村で提供されている標準のバナーをそのまま使ってました。個性ゼロのやつです。このバナーでも押してくれる方はいると思うのですが、押したくなるかと言われると疑問ですよね。そこでバナーを自作してみようと思ったわけです。
自作したバナー
こちらが自作したバナーです。いかがでしょうか。今までのバナーに比べ画像サイズも大きくし、ランキングに参加していることやクリックして欲しいことも分かりやすくしてみました。オリジナルの画像ですので押してくれる方も増えるんじゃないかと思います。、、、多分。誰かクリックしてくれぃ！
自作バナーの作成手順
今回自作したバナーの作成手順をご説明します。
- バナーにしたい画像を選ぶ
- 漫画カメラという無料アプリを使ってモノクロの漫画風に変換
- LINE Cameraという無料アプリを使って文字を追加
- 画像をPCにコピー
- ブログ村のサイトから「ブログ村」のアイコンを取得
- 4の画像に5の画像を追加
- ブログ村でオリジナルバナーを作成
- バナーが表示されるサイズを微調整
- バナーを各記事の最後に追加
1.バナーにしたい画像を選ぶ
好きな画像を選んでください。
2.漫画カメラという無料アプリを使ってモノクロの漫画風に変換
スマホでダウンロードできる無料アプリを使って変換するだけ。
3.LINE Cameraという無料アプリを使って文字を追加
スマホでダウンロードできる無料アプリを使って文字を追加しました。文字の大きさ、色、枠線の有無、配置箇所は自由に変更できます。
4.画像をPCにコピー
私はGoogleドライブを経由してPCにコピーしました。よくわからない方はメールでPCに送ってもOKと思います。
5.ブログ村のサイトから「ブログ村」のアイコンを取得
ブログ村のサイトをプリントスクリーンしてペイントに貼り付けし、アイコン部分を切り取りました。
6.4の画像に5のアイコンを追加
ペイントでアイコンを画像に貼り付けしました。
7.ブログ村でオリジナルバナーを作成してhtmlタグを入手
ブログにはhtmlタグをつける必要があるのでブログ村の機能でhtmlタグを作成しました。作成の仕方はブログ村にログインし、
マイページ->ランキング参加->オリジナルバナー作成
にて作成しました。
8.6で作成した画像をブログ記事に張り付けて画像のURLを入手
下書きの記事に画像を張り付けして、「HTML編集」モードで開いて画像のURLを入手しました。こんな感じのやつです。
<img class="hatena-fotolife" title="f:id:heroki4:2020xxxxxxxxxxj:image" src="https://cdn-ak.f.st-hatena.com/images/fotolife/h/heroki4/2020xxxx/xxxxx.jpg" alt="f:id:heroki4:2020xxxxxxxxxxx:image" /></p>
太字の箇所が画像のURLです。
9.8で入手した画像のURLを7で入手したHTMLに貼り付け
こんな感じにHTMLを修正しました。
<p><a href="https://localkyushu.blogmura.com/ranking/in?p_cid=xxxxxxxx" target="_blank" rel="noopener"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/h/heroki4/2020xxxx/2020xxxxxxxx.jpg" alt="にほんブログ村へ" border="0" /></a></p>
太字の箇所が変更内容です。
10.バナーが表示されるサイズを微調整
バナーのサイズが小さくなってしまったので少し多くなるように調整しました。また、私は画像を中央に表示させたかったので<center>タグで囲むことによって中央表示しました。具体的にはこんな感じです。
<center>
<p><a href="https://localkyushu.blogmura.com/ranking/in?p_cid=xxxxxxxx" target="_blank" rel="noopener"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/h/heroki4/2020xxxx/2020xxxxxxxx.jpg" alt="にほんブログ村へ" width="210" height="280" border="0" /></a></p>
</center>
11.バナーを各記事の最後に追加
「この記事が良かったと思っていただけた方はクリックお願いします！」という一文を付け加えて、作成したバナーを記事の最後に追加しました。
注意事項
ブログ村の「オリジナルバナー作成」では画像にアイコンを自動的に追加して、HTMLを生成してくれますが、作成された画像が結構粗いため、独自に画像を作成してHTMLタグを編集しています。画像の粗さが気にならない場合は、手順の5,6,8,9を飛ばして作成してください。
おまけ
バナーには関係ないのですが、コミックカメラという無料アプリを使うとワンピースの一コマみたいな画像も作れます。興味があれば使ってみてください。意外と面白いです。
最後までお読みいただきありがとうございました。感想や質問などありましたらコメント欄にお願いします。
【この記事を読んだ人にオススメのページ】
ランキングに参加してます。この記事が良かったと思っていただけた方はクリックお願いします！
