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

プロフィールカスタマイズのアイキャッチ

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

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

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

はてなブログカスタマイズ!プロフィールを目立たせてアピール!

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

現在はワードプレスに移行しています。
このカスタマイズははてなブログ用です。

 

変更の仕方

パソコン表示用です。
元々のプロフィール欄はこんな感じでした。

はてなブログのプロフィール

うーん、これでも全然いいんだけど、折角頑張って描いたアイコンが小さい…!
変更後のプロフィール欄はこんな感じです!

はてなブログのプロフィール表示

どうですか??
結構いい感じじゃないですか?(自画自賛w)

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

その前に、アイコンは300×300で設定。
みっきーさんは枠を作ってましたが、私はとりあえず枠なしで。

はてなブログのプロフィール (2)

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

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

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

はてなブログのプロフィールのカスタマイズ (2)

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

はてなブログのプロフィールのカスタマイズ (3)

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

ユーザー名は自分のTwitterのIDを入れてくださいね。
HTMLをコピーして、先ほどのプロフィール記事に追加。
追加するときは、見たままではなくHTML編集で追加してくださいね♪

はてなブログのプロフィールのカスタマイズ
ちなみに、わたしのプロフィールの紹介分の青枠の所はこちらを参考に追加しました。
【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30

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

はてなブログのプロフィールのカスタマイズ

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

はてなブログのプロフィールのカスタマイズ

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

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

はてなブログのプロフィールのカスタマイズ

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

はてなブログのプロフィールのカスタマイズ

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

これで完成ですね♪

まとめ

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

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

桃太郎

名前もアイコンも男っぽいですが、女です。
好奇心旺盛で、やりたいと思ったことに色々手を出したりするので、このブログも色々なジャンルを書いています。
いわゆる雑記ブログ。

 COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です