生活情報オンライン

ITエンジニアが役立つ情報を発信します。

はてなブログ「プロフィール写真」を大きくする方法!各段に見やすい

はてなブログの「プロフィール写真」。これ小さくて感じません?
この記事では簡単に「プロフィール写真」を大きく表示する方法をご紹介します。(※表示速度の確認のため現在表示させていません。2016.06.01~)


簡単に「プロフィール写真」を大きくするために、はてなブログの「プロフィール画像アップロード機能」は使いません。こちらを使って大きくするのは難しい(面倒)です。独自に画像をアップロードしてしまいます。完成図としては次のようになります。

完成図

f:id:somegoro:20160515205226p:plain

こんな感じが私はちょうどいいサイズかと思います。(※なお、画像サイズはご自由に決められますのでご安心を。)


設定方法

それでは設定方法に入っていきましょう。簡単3ステップです。


1.フォトライフに画像をアップする。

日記を書くときと同じ要領でフォトライフに写真を投稿してください。なお、フォトライフに関する問題にはご注意ください。
somegoro.hatenablog.com



2.アップした画像のアドレスをコピーする。

編集画面に表示された画像を左クリックして、画像アドレスをコピーしてください。

f:id:somegoro:20160515205357p:plain

3.HTML、CSSに次のとおりに記載する。

HTML
<a href="/about">
    <img src="http://cdn-ak.f.st-hatena.com/images/fotolife/s/somegoro/20160514/20160514004033.png" alt="id:somegoro" class="profile-user-icon">
</a>

このときに2点注意事項があります。
1.httpアドレスは先ほどコピーしたご自分のアドレスにしてください。

2.IDはご自分のIDにしてください。

CSS
#box2 img {
max-width: 35%;/* ←お好きな大きさにご調整ください */
max-height: 35%;
}

これで完成です。

簡単に「プロフィール写真」を大きく出来ましたね。