空に向かって走る

ときどき英会話、ときどきTOEIC、ときどき便利なこと。思いついたことを書きためます。

サイドバーのプロフィールをカスタマイズ!画像を大きく表示してSNSボタンも設置

サイドバーに標準のままプロフィールを設定すると、次のように非常に控え目な表示になってしまいます。

f:id:upasan:20160424191401j:plain

 今までプロフィールを非表示に設定していたのですが、どんな人がそのブログを書いているのかが分かると、ちょっとした親近感がわくのかな〜と思いました。

なので、プロフィールの設置とカスタマイズしてみました!

f:id:upasan:20160424191459j:plain

そして、完成がコチラ!!

サイドバーでの存在感がだいぶ増しました!

「読者になるボタン」と「SNSボタン」もついでに設置しました。

プロフィールの文章も好きに記入できるのもポイントです。

(設定からも変更できますが、ここで記入したほうがカスタマイズしやすいです。)

プロフィールのカスタマイズ手順

1. はてなフォトライフへ画像をアップロード

まずは使用したい画像をはてなフォトライフにアップしましょう。

はてなブログの右上の四角いアイコン内に「はてなフォトライフ」がありますので、そこへ移動し、アップロードします。

f:id:upasan:20160424193208j:plain

あんまりにも高解像度の画像にしてしまうと、ページの読み込みに影響してしまうので、ある程度加工してからがオススメです。

 

2. はてなフォトライフから画像のURLを取得

先ほどの画像のURLを取得します。

はてなフォトライフ内で「フォルダを編集」へ進みます。

f:id:upasan:20160424193356j:plain

 使用した画像にチェックを入れ、「ブログに貼り付ける」ボタンを押し、HTMLタグを取得します。

<a href="http://f.hatena.ne.jp/upasan/20160423214527"><img src="http://img.f.hatena.ne.jp/images/fotolife/u/upasan/20160423/20160423214527.jpg" alt="20160423214527"></a> 

こんな感じで2つのURLが含まれていますが、使用するのはピンク色で示した後ろ部分だけです。

3.  サイドバーへ書き込み

次に実際にデザインのサイドバーへ記入していきます。

場所は「はてなブログのデザイン」→「カスタマイズ」→「サイドバー」です。

f:id:upasan:20160424210952p:plain

サイドバーにモジュールを追加します(左)。

並び順を変更する場合は、「≡」のアイコンをドラッグして動かします。

追加したモジュールの「編集」より、右の画像のようにHTMLモードでコードを記入します。タイトルはお好みで。

 

上のコードをコピペすればサイドバーに先ほどの画像が表示されます。

(初GitHub使用!便利・・・)

画像のURLの記入を忘れずに行ってください。

画像のサイズを変更したい場合は、width, heightの数値を適宜変更してください。

プロフィール本文が必要であればここに書きます。

 

私は「読者になるボタン」を一緒に表示したいので、さらに追記しています。

 読者になるボタンのコードは、

「はてなブログ」→「設定」→「詳細設定」→「読者になるボタン」のHTMLコードをコピペするだけです。

読者がまだ2人なのが寂しいですが・・・。 頑張ります!笑

SNSボタンの設置

SNSボタンは記事下にも設置していますが、色が綺麗なのでプロフィール下にも設置してみました。

SNSボタンを設置するには、HTMLとCSSの記入が必要です。

HTMLコードは上の続きに記入すればOKです。

CSSは、CSSコードの箇所に記入します。

 自分で一からCSSをコーディングできないので、今回も先人のお力を借りました。

ありがとうございます!

カスタマイズで毎度お世話になる「Yukihy Life」よりコードをコピペです。

詳細は以下の記事を参考にすればバッチリです!

www.yukihy.com

記事下にSNSボタンを設置もついでにできるので、まだの方は試してみては?

 

その他

画像に影を付ける

画像がのっぺりして見えるので、以下の記事を参考にして影をつけました。

CSSへの記入で表現できます。こういうのを考えられるなんて凄いですね。

ideahacker.net

影を付ける際、画像のwidthの値と影のwidthの値をそろえることをお忘れなく!

 

画像にエフェクトを付ける

プロフィール画像の上にカーソルが載せられた際のエフェクトを付けることができるそうです。

その中でも便利そうなのがコレ!文字列を表示するやつです。

たまーに見かけるオシャレなエフェクトが紹介されています。

blog.raizzenet.com

私の場合、プロフィール写真の上にカーソルがくることはそうそうなさそうなので、見送りましたが、いつかやってみたい!

 

CSSってなんでも出来ちゃうんですね、いや凄い。 

以上、サイドバーのプロフィールカスタマイズでした。