ホーム / ブログ村 /

Bloggerに日本ブログ村のバナーを見映えよく貼る方法

2021年2月7日日曜日

Blogger Bloggerカスタマイズ CSS CSSアニメーション Flexbox ブログ村

t f B! P L
bchari banner

このブログを始めたとき、少しでも多くの人に読んでもらえればと思い 日本ブログ村（以下ブログ村）に登録しランキングに参加しました。

今までなんとなく思いつきでバナーを貼ったり、貼らなかったりであまり ランキングアップ、ブログ村からの流入増の恩恵はありませんでした。

ブログ村のランキングはINポイント、OUTポイント、PVポイントと わかりにくいことに加え、バナーがダサいことから登録してみたものの積極的に バナーを貼る気になれなかったのも要因ではと思います。

今回、それなりに見映えがよくなるようバナーとその貼り方を見直してみました！

ブログ村のランキングシステム

先に書いたとおりブログ村のランキングは3種類あります。

  • INポイント
  • OUTポイント
  • PVポイント

INポイント

自分のブログに「ランキングバナー」を貼り、読者がランキングバナーをクリックしてくれると INポイントが発生する。

OUTポイント

ブログ村の新着記事や自己紹介ページなど、ブログ村側に貼られた自分のブログへのリンクが クリックされ、自分のブログへ流入した場合にOUTポイントが発生する。

PVポイント

自分のブログに「PVランキングバナー」を貼り、読者が自分のブログの記事を読んで PVランキングバナーが表示されるとPVポイントが発生する。

まとめ

今までPVポイントがずっと0で何故だと思っていました。ポイントは、ブログ村から自分のブログに 誘導すること(=OUTポイントを上げること)が目的で、そのためにINポイントとPVポイントを稼いで 自分のブログが上位に表示されるようにすることです。

INポイントとPVポイントを稼ぎたいのですが、INポイントとPVポイントは別のバナーを貼る必要がある というのが盲点でした。

バナーがダサい問題

INポイント用のランキングバナーは、自分の参加しているカテゴリの標準バナーがあります。例えば、こんなのです。

にほんブログ村 自転車ブログ 自転車 改造へ
にほんブログ村

微妙ですね。よほどのことがないとこれをクリックしてみたいとは思わないのではないでしょうか。 　こちらは自分で用意した画像を使いオリジナルバナーを作ることができます。

PVポイントバナーはオリジナルを作成することはできませんがデザインは悪くありません。

PVアクセスランキング にほんブログ村

ランキングバナーとPVポイントバナーを並べて表示する

さて、2つのバナーを貼りたいのですが、ブログ村のHTMLをそのまま並べてコピーすると味気ない感じです。

にほんブログ村 自転車ブログ 自転車 改造へ
にほんブログ村 PVアクセスランキング にほんブログ村

スタイルシート使い横に整列する

スタイルシート(CSS)のFlexboxを使い2つのバナーを横に整列してみます。

<div style="display:flex;justify-content:space-around;align-items:center;">
  --- PVポイントラインキングバナーのコード ---
  <div style="text-align:center;">
    --- INポイントラインキングバナーのコード ---
  </div>
</div>

2個のバナーを<div>で囲み、CSSでdisplay:flex;とすることでFlexboxを使い並べて表示しています。

INポイントランキングバナーは、画像＋テキストと2個の要素があるので、画像とテキストをひとまとめのブロック にして中央揃えにするためさらに<div>で囲んでいます。

Flexboxは間隔を自動調整してくれるのでPCでもモバイルでもいい感じに並べてくれます。これだけでもだいぶ 見映が良くなりました。

オリジナルバナーを作ってみる

せっかくなのでオリジナルバナーを作ってみます。Inkscapeでせっせと絵を描いてみました。PVランキングバナーと 並べて表示することを想定し、縦横比はPVランキングバナーと合わせています。

ブログ村のオリジナルバナー作成機能で画像をアップロードして参加カテゴリを選択すると、オリジナルバナーに 参加カテゴリの小さなバナーが付きます。

これを先ほどのFlexboxでPVランキングバナーと並べてみます。同じサイズになるようwidthを調整しています。 「にほんブログ村」のテキストは削除しました。

PVアクセスランキング にほんブログ村 にほんブログ村 自転車ブログへ

CSSアニメーションを使う

オリジナルバナーですが、HTMLを見るとブログ村の作成機能でアップロードした画像をリンクタグで囲んでいるだけのようです。 ということは、リンクタグの中は何でも動作するということになります。（おそらく）ブログ村のサイトには 「ブログ村へのリンクであるということがクリックする読者の側でわかるようなバナー作り」であることや、著作権放棄など ルールがあるため、このルールには則っている必要があるでしょう。

せっかくInkscapeを使ってSVGで絵を描いたので、SVGのまま使い、さらにCSSアニメーションで動きを付けてみました。

PVアクセスランキング にほんブログ村 image/svg+xml

CCSアニメーションの解説は、かなり大変なので省きます。SVGを記事にそのまま貼り付けるため 記事の9割近くがSVGになってしまいHTMLソースの可読性がかなり下がりますがなかなかおもしろいものができました。

関連記事

Blogger 人気の投稿ガジェットをカスタマイズ

「人気の投稿ガジェット」 の見た目をカスタマイズした際に調べた知識をまとめてみます...

Bloggerのナビゲーションバーでカテゴリ別に記事を整理

ナビゲーションバーとは、各カテゴリの情報へ素早くアクセスするためのリンクで、通常ブログタイトルの直下に設置されます ...

定型文入力支援ツール Lintalist でテキスト入力を楽々に

日頃PCで作業していると、自分の名前、メールアドレスなどよく使うテキストを繰り返し入力することがあります ...

Blog Archive

QooQ