クリアメモリ

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

【はてなブログ】プロフィール画像を動画にする方法!GIF画像を使えば超簡単でした!

f:id:clrmemory:20180218134127p:plain

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

今回は、はてなブログプロフィール画像を動画にカスタマイズする方法を紹介します。

プロフィール画像を動画にすることで、より目立たせることができますし、GIF画像を使うだけで簡単に実行できるのでぜひ試してみてください。

はじめに

 

今回紹介するのは「はてなブログのプロフィール画像を動画にして動かす方法」です。

実際に、私が設定しているプロフィール画像がこちら。

 

f:id:clrmemory:20180208175133g:plain

 

こんな感じで、プロフィールを動画にすれば目立ちますよね。

実は、GIF(ジフ)と呼ばれる拡張子の画像を用意するだけで簡単なので、ぜひチェックしてみてください。

 

今回の方法では、動画が必要になるのであらかじめ用意しておきましょう。

 

動画をGIFに変換する

 

はてなブログ内で使う前に、撮影した動画をGIFに変換する必要があります。

ネット上で動画をGIF画像に変換できるサイトは、調べれば色々出てくるので、ファイルの拡張子に合ったサイトを探してみてください。

 

ちなみに、私が使用しているMac向けの動画拡張子は「MOV」でした。

MOVファイルをGIF画像に変換してくれるサービスはこちらを利用させていただきました。

 

MOVコンバータ (/ MOVに変換. オンライン フリー) — Convertio

 

  1. 動画ファイルをドラッグ
  2. GIFに変換
  3. ダウンロード

 

という3行程で実行でき、シンプルで扱いやすいのでオススメ。

 

f:id:clrmemory:20180218131744p:plain

 

GIFが用意できたら、実際にはてなブログのプロフィール欄に設定していきましょう。

 

GIF画像をアップロード

 

はてなブログのプロフィール画像を動画にするためには、先ほど作成したGIF画像をアップロードする必要があります。

とは言っても、方法はとても簡単で「普段ブログに画像を貼るようにドラッグ&ドロップ」するだけ。

 

f:id:clrmemory:20180208175133g:plain

 

冒頭で、私が使用しているGIF画像を紹介しましたよね。

あれは、はてなブログ(はてなフォトライフ)にアップロードしたGIF画像を持ってきているだけなんです。

 

はてなブログの新規記事の中に「先ほど作成したGIF画像」を貼り付けてみてください。

サイドバーの「写真を投稿」欄にGIF画像が表示されていればOK。

 

f:id:clrmemory:20180218131913p:plain

 

実際に貼り付けて動画が再生されていれば成功です。

 

GIF画像のURLを取得

 

はてなブログのプロフィールにGIF画像を使うためには、その画像のURLを取得しておく必要があります。

先ほど記事にアップしたGIF画像を右クリックしてみてください。

 

f:id:clrmemory:20180218131757p:plain

 

画像のアドレスをコピー」という項目があるので、クリックしましょう。

Macで動作を確認していますが、Windowsでも同じような項目があるかと思います。

 

これで、GIF画像のURLをコピーできました。

最後に、はてなブログのプロフィール画像として設定していきましょう。

 

はてなブログのプロフィール欄に表示する

 

ではいよいよ、はてなブログのプロフィール画像を「動画(GIF)」にしていきましょう。

設定 > デザイン」を表示してください。

 

f:id:clrmemory:20180218132027p:plain

 

PCカスタマイズ > サイドバー > モジュールを追加」から、サイドバーに設置するプロフィールを追加します。

すでにプロフィールモジュールを設置している方は不要。

設置してあるプロフィールを編集するだけでOKです。

 

f:id:clrmemory:20180218132037p:plain

 

プロフィールモジュールの「ブログの説明」欄を編集します。

そのため、「プロフィール画像」「はてなID」のチェックは外しておいてください。

 

f:id:clrmemory:20180218132050p:plain

 

では、ブログの説明欄の一番上に以下のようなコードを記述してみましょう。

 

<img class="profile-img" src="先ほどコピーした画像.gif">

 

このようにするだけで、はてなブログのプロフィール画像を動画にできました。

プロフィール内容(自己紹介など)は、画像の下に書いてください。

 

ただし、このままだと「はてなID」がプロフィール画像より上に表示されてしまいますよね。

 

これに対処したい場合は、自分ではてなIDを書いてしまえばOKです。

別になくても動作するので、難しいなって人は飛ばして構いません。

 

<p class="profile-id">
  <a  href="http://ドメイン名/about">表示したいID</a>
</p>

 

クリックすることで「aboutページ(プロフィールページ)」にアクセスできるようになっています。

ドメイン名は自身のサイトのURLに書き換えてください。

表示したいIDは、はてなIDの形式と合わせれば、馴染みのあるデザインになるのではないでしょうか。

 

スタイル(CSS)を調整

 

最後に、設置したプロフィール画像のスタイル(CSS)を調整していきましょう。

とは言っても、CSSはデザインなので「サイトのレイアウト」や「好み」によって変わってくると思います。

あくまで一例として、自分なりにカスタマイズしてみてください。

 

では、私が作成したCSSがこちらです。

 

f:id:clrmemory:20180218132210p:plain

 

.profile-img {
    display: block;
    width: 50%;
    margin: 0 auto;
    border: 10px double #a8b8b8;
}

.profile-id {
    text-align: center;
    margin-top: -20px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #a8b8b8;
}

.profile-id>a {
    color: white;
}

 

CSSなので、サイトによって調整すべき項目が変わってきますよね。

重要なのは、先ほど記述したプロフィール画像のクラスが「.profile-img」というのと、設置したはてなIDのクラス名が「.profile-id」ということ。

これらにスタイルを割り当てることで自由に調整できるので、試してみてください。

 

まとめ

 

今回紹介した方法を使えば、はてなブログのプロフィール画像を動画にして、より目立たせることができました。

目立つだけではなく、自分のアイコンを印象づけることもできますね。

www.clrmemory.com

 

簡単なので、ぜひカスタマイズしてみてください。

ではまた。

新着記事