きび団子よりもみたらし派

2017年7月からブログを始めました。福岡県在住、出掛けることが好きで思い立ったらすぐ行動!1人でも行きたいと思ったら色々行きます。

きび団子よりもみたらし派

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

f:id:Momotarous:20170811204440p:plain

 

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

 

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

 

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

 

panmeeee.hatenablog.com

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

 

変更の仕方

パソコン表示用です。

 

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

f:id:Momotarous:20170811195815p:plain

 

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

 

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

f:id:Momotarous:20170811200410p:plain

どうですか??

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

 

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

 

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

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

 

f:id:Momotarous:20170811204800p:plain

 

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

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

 

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

 

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

 

f:id:Momotarous:20170811201022p:plain

 

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

 

f:id:Momotarous:20170811201458p:plain

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

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

 

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

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

 

f:id:Momotarous:20170811201832p:plain

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

saruwakakun.com

 

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

 

f:id:Momotarous:20170811202501p:plain

 

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

 

f:id:Momotarous:20170811202646p:plain

 

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

 

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

f:id:Momotarous:20170811203130p:plain

 

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

 

f:id:Momotarous:20170811203611p:plain

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

 

これで完成ですね♪

 

まとめ

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

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