ランゲルハンス

福島県の田舎生まれの19歳。現在は東京に暮らし、某MARCH大学で日々勉強中。買ったもののレビューを主に、自分の趣味や生活、気になることなど綴っています。 お問い合わせ、お仕事の依頼はこちらにお願いします。 mrinrin88@gmail.com

【デザイン】はてなブロのプロフィールを丸型でおしゃれにしてみたぞ!

こんにちは

ある程度ブログを始めてから立つと、だんだんブログのデザインにこだわり始めますよね。

絶賛、僕がそれなんですが、最近気になっているのが、サイドバーのプロフィール欄。

 

 

 

はてなブログの標準のプロフィール欄だとこんな感じ。

f:id:mrinrin92:20170522162614p:plain

こんな感じで、悪くはないですけど、おしゃれじゃない

 

このブログの目標は"おしゃれなブログ!"なんで、これではいけないわけです。

そこで、プロフィール欄のデザインの変更をして見ました。

 

f:id:mrinrin92:20170522182119p:plain

現在がこんな感じ。

どうです?おしゃれでしょ?

 

 

この方のサイトを参考にさせていただきました。

 

説明通りにやれば簡単にできます。

 

ちょっとめんどくさいのが、画像の設定。 

ただ単に貼るわけではなく、はてなフォトライフにアップロードし、そのURLをHDMLに貼るという形です。

 

詳しいやり方は上の引用記事に載っているのでぜひそちらをお読みください。

 

で、上の記事で紹介されているものだと、長方形型のもので、それもおしゃれではあるんですが、ブログの雰囲気を柔らかくしたいので、丸型にして見ました。

 

それが、こう

f:id:mrinrin92:20170522184729p:plain

普通にやるとずれてしまうので、

 

<div align="center">~</div>

 

で中心に設置しています。

 

そして、設置した写真のHDMLの下に

 

width="数字"height="数字"style=border-radius:数字px;"

 

を設置します。

これで円形の写真が表示されると思います。

長方形の写真だと、うまく表示されないことがあるそうなので、アップロードする写真は正方形のものをお勧めします。

 

 

ついでに、こちらのサイトで紹介していた、登録ボタンも設置しました。

 

 

さらに、ちょっとフォントを変えたりもしてますが、上のものだけでもおしゃれになると思います。