プロフィールをカスタマイズして大きくしました。

こんにちは、桃太郎です。

はてなブログに元々あるプロフィール欄でも満足していたのですが、プロフィール画像が大きいのも見やすくていいなぁと思ったので思い切って変更してみました。

こちらの記事を参考にさせていただきました！

panmeeee.hatenablog.com

もうちょっと詳しい解説を…。

変更の仕方

パソコン表示用です。

元々のプロフィール欄はこんな感じでした。

うーん、これでも全然いいんだけど、折角頑張って描いたアイコンが小さい…！

変更後のプロフィール欄はこんな感じです！

どうですか？？

結構いい感じじゃないですか？（自画自賛ｗ）

先ほどご紹介したみっきーさんの記事で、新規記事を作って下書きにしてそこでプロフィール記事を作るとあったので早速作成。

その前に、アイコンは300×300で設定。

みっきーさんは枠を作ってましたが、私はとりあえず枠なしで。

普通に記事を書くみたいに、画像入れてプロフィール欄に載せたい言葉を書きました。

ついでにプロフィール文章も変更。

読者ボタン・Twitterフォローボタン

読者になるボタンは、設定→詳細設定→下の方の読者になるボタンに書いてあるHTMLをコピーして貼り付けてください。

ツイッターのフォローボタンはTwitterボタンから

赤丸部分を画像のように設定します。

ユーザー名は自分のTwitterのIDを入れてくださいね。

HTMLをコピーして、先ほどのプロフィール記事に追加。

追加するときは、見たままではなくHTML編集で追加してくださいね♪

ちなみに、わたしのプロフィールの紹介分の青枠の所はこちらを参考に追加しました。

saruwakakun.com

先ほど作成したプロフィールをHTML編集の画面でコピーして、ダッシュボードのデザイン→スパナマーク→サイドバー→モジュールの追加→HTMLに貼り付けます。

一応これで完成ですが、青枠の差し込み方も載せておきますね。

【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30さんから好みの枠を選びます。

HTMLの方を紹介分の前後に持ってきます。

そして、CSSの方を一番下の方に<style></style>タグで囲って追加します。

すると、<div class="box14">~</div>で囲んだ間の文字の周りに枠が出てきたと思います。

これで完成ですね♪

まとめ

カスタマイズが紹介されてるブログは本当に助かります^^

お陰様でカッコよくなったと思います！