クリアメモリ

プログラミングやガジェットレビュー、便利なアプリケーションなど雑多に記録するブログ

【はてなブログ】読者登録ボタンを動画にする方法!より目立たせたい時にオススメ!

f:id:clrmemory:20180331063920p:plain

こんにちはクリアメモリです!

今回は、はてなブログ読者登録ボタンを「動画」にする方法を紹介します。

 

読者登録ボタンをより目立たせることができました。

ほとんどコピペOKで、超簡単にカスタマイズできるので、ぜひ挑戦してみてください。

はじめに

 

今回紹介する内容は「はてなブログの読者登録ボタンを動画にする方法」です。

 

以前紹介した「はてなブログのプロフィールを動画にする方法」と

同じような方法でカスタマイズしてみました。

 

www.clrmemory.com

 

プロフィール画像を動画にする方法は、こちらからチェックしてみてください。

 

用意した動画

 

今回のカスタマイズで使用する動画は以下のようなものを用意してみました。

 

f:id:clrmemory:20180330062136g:plain

 

これがそのまま読者登録ボタンになるイメージです。

 

動画を作成

 

今回のカスタマイズでは「GIF画像」を使用します。

 

私は、GIF画像としてアニメーションを作成しましたが、

GIF変換サイトを利用すれば、普通の動画も読者登録ボタンにカスタマイズ可能です。

 

convertio.co

 

プロフィール画像を動画にする方法でも利用させていただいた、

こちらのサイトが簡単でオススメです。

 

Convertioの使い方は、

まず、用意した動画の拡張子に合わせて選択します。

 

拡張子をGIF(ジフ)にすることで、

htmlのimgタグのソースに動画を指定できるようになるわけですね。

 

f:id:clrmemory:20180331063945p:plain

 

こちらはMP4 -> GIF変換の場合。

 

あとは、変換したい動画をドラッグ&ドロップして、

変換開始をクリックするだけで、動画からGIF画像を作成できました。

 

f:id:clrmemory:20180331064124p:plain

 

GIF画像のURLを取得

 

続いて、GIF画像を表示するための「URL」を取得していきましょう。

 

はてなブログで画像のURLを取得するには、

はてなフォトライフ」に画像をアップロードする方法が簡単でオススメ。

 

適当な記事を用意し、

記事編集欄に「作成したGIF画像」をドラッグ&ドロップすると、png画像などと同じようにプレビュー内で動画が再生されたと思います。

 

f:id:clrmemory:20180331064136p:plain

 

プレビュー内の画像を右クリックすると、

画像のアドレスをコピー」という項目が見つかるのでクリックしてください。

 

f:id:clrmemory:20180331064142p:plain

 

これで、GIF画像のURLを取得できました。

 

読者登録ボタンを動画にする

 

では、いよいよ「はてなブログの読者登録ボタン」を動画にしていきましょう。

読者登録ボタンを設置したい場所に、以下のコードを記述してください。

 

<div class="subscribe-gif">
  <a href="読者登録のURL">
    <img src="GIF画像のURL">
  </a>
</div>

 

画像のURLは、

先ほどコピーしておいた「GIF画像のURL」に書き換えましょう。

 

読者登録のURLは以下を参考にしてください。

 

読者登録のURL

 

はてなブログで、読者登録ボタンのURLを取得するには、

設定 > 詳細設定 > 読者になるボタン」の中に書かれているコードをコピーします。

 

f:id:clrmemory:20180331064203p:plain

 

具体的に必要な部分はこちら。

  • https://blog.hatena.ne.jp/ID名/サイトURL/subscribe

 

このような部分をコピーし、

先ほどのコード内を書き換えてください。

 

設置例:サイドバー

 

例えば「サイドバー」に表示したい場合は、

「HTMLモジュール」を利用することで簡単に設置できます。

 

f:id:clrmemory:20180331064229p:plain

 

この中に、先ほどのコードを貼り付ければOK。

 

f:id:clrmemory:20180331064240p:plain

 

このようになりました。

実際にクリックしてみると、はてなブログの読者登録ページが表示されたと思います。

 

f:id:clrmemory:20180331064246p:plain

 

ちなみに、読者登録ボタン用CSSも用意しましたが、

基本的に、自分のサイトに合わせて調整してみてください。

 

.subscribe-gif {
  width: 100%;
}

.subscribe-gif img {
  width: 100%;
}

 

こちらは、サイドバーの横幅MAXまでサイズを調節するコードです。

 

まとめ

 

今回紹介したように「GIF画像」を利用することで、

はてなブログの読者登録ボタンを動画にすることができました。

 

通常の読者登録ボタンより目立たせることができるので、

ぜひカスタマイズしてみてください。

 

ではまた。

新着記事