【Blogger】お手製ブログカードを作りました

―――スポンサーリンク―――
こんにちは。SAKURAです。

 直帰率に日々悩まされています。
 minecartのブログについて、このブログから移した旧記事は、ある程度アクセスがありますが、引越し後にアップした記事は、読者はクローラーだけではないかと思えるぐらい低調です。(T_T)
 関連記事のリンクも貼り付けていますが、クリックされた形跡があまりありません。
(まあ、記事途中で離脱されている方が多いと思うが……)

 そこで、スマホでもクリックしやすいよう、全体がボタンになるブログカードを作りました。

お手製ブログカードの紹介

私の作ったブログカード

関連記事
お手製のブログカードを作りました。この記事の先頭に飛びます。
 クリック 

特徴、ポイント

  • 枠内どこでも、クリック有効
  • PCでもスマホでも表示可能なレスポンシブデザイン(画像、テキスト枠自動調整)
  • カスタマイズ可能(画像の大きさ、画像の縦比など)
  • 設置は基本的に手作業(HTMLの勉強になった)

枠内どこでもクリック有効

 なぜ、普通のリンクだとクリックされないのか?
『スマホだとも文字をクリックしにくいのでは?』と考えました。

 それならクリックし易いように、大きいボタンが良いのではないかと思ったのが、このブログカードを作ろうと思ったキッカケです。

レスポンシブデザインのブログカード

 ブログカードの良い点は、画像付きなので読者の興味を引きやすいところにあると思います。ですが、画像が大きすぎると存在感が増し、広告のように邪魔に感じます。

 特にスマホの場合、画像を大きくするとテキストの量が制限されるので、あまり大きくできないのですが、スマホの画像の大きさでPCに表示させると、解像度の関係もあり、小さく感じます。
 そこで、PCとスマホで画像の大きさを変更する仕組みを取り入れました。

カスタマイズ可能なブログカード

 所詮、素人が作ったブログカードなので、凝った仕様ではありません。要領をおぼえていただければ、ご自身のブログにあったブログカードにすることができると思います。
 画像については、Googleフォトの再利用です。Bloggerの仕組みで、長方形の画像でも簡単に正方形にできます。
(長方形の画像のブログカードにもできます)

HTMLの勉強になった

 もしかしたら、これが一番有意義だったかもしれません。漫然と勉強をするより、明確な目標を持って勉強をしたほうが、憶えることも早いと感じました。

 まだ、未完成なブログカードですが、改良を重ねていきたいです。

※作動確認のため、一旦公開します。

コメント