はてなブログのプロフィールアイコンカスタマイズ！
※クリックで拡大できます。
はてなブログでは既定のデザインレイアウトがあり、何もしないままでは、他のブロガーと全く同じデザインになってしまいます。
ブログはネタで勝負！とは言え、やはり見た目でも差をつけたいもの。
今回はコピペでプロフィールを変更する方法をご紹介したいと思います。
【この記事を読むメリット 】
- はてなブログのプロフィールが簡単にアレンジできるようになる
- 他のブログと差が付けられる
沢山のブログを見ても、個性のあるものは記憶に残る。
それでは今回のコンテンツです。
アレンジはコピペだけ
手順はCSSのコピペのみです。
初めてはてなブログでCSSの編集をされる方は下記の記事で方法をご確認ください。
３分ほどで確認できます。
↓はてなブログのCSS編集手順↓
それでは早速編集用のコードをみて行きましょう。
１．アイコンを大きくする
アイコンを大きくする方法は下記です。
このままコードをコピーして貼り付けてください。
.profile-icon {
width: 70px;
}
赤字の数字の大小で大きさを変えられます。
【実装イメージ】
２．アイコンに縁をつける
次はアイコンの縁取りをつけるやり方です。
.profile-icon {
border: 2px solid #3cb371;
}
赤字の数字で太さを、青字のカラーコードで色を変えられます。
カラーコードはこちらからどうぞ。
緑の記載で線の種類（二重線・破線など）の変更が可能です。
solid・・・１本線
double・・・２重線
groove・・・窪んで見える線
ridge・・・立体に見える線
inset・・・全体が窪んで見える設定
outset・・・全体が立体に見える設定
dashed・・・破線
dotted・・・点線
【実装イメージ】
３．アイコンを丸くする
アイコンを丸く表示することも、３行の記載でできます。
.profile-icon {
border-radius: 50px;
}
赤字の部分は丸みの具合を調整しています。
数字を小さくしていくと、四角の角が丸いような形もできますので試してみてください。5pxくらいがよいかと思います。
【実装イメージ】
【１から３を実装すると】
これまでのすべてを実装すると、下記のようになります。
だいぶ個性的になりましたね。
４．不要な文字を消す
プロフィールの文章は細かい部品に分かれていて、選んで消すこともできます。
下記のイメージを参考に、不要な部品は表示されないようにしてしまいましょう。
- ユーザー名（意識高いK） ⇒ .user-name-nickname
- ID両端の丸括弧 ⇒ .user-name-paren
- はてなID名（id:biz-thinking-K) ⇒ .user-name-hatena-id
- はてな「PRO」アイコン ⇒ .badge-type-pro
※先頭のドット「.」を忘れずに。
コードはこちらです。
(消したい部品名) {
display:none;
}
当サイトは②両端の丸括弧と④「PRO」アイコンを外しているので、下記のようになっています。
ユーザー名とIDで改行がされるように、赤字の部分を付け足しています。
.user-name-paren{
display:none;
}
.badge-type-pro{
display:none;
}
.user-name-hatena-id{
display:block;
}
それぞれお好みはあるかと思いますが、このような方法でデザインを変更することが可能です。
細部へのこだわり。
身近なところから始めよう
プロフィールはブログの上部に表示することも多く、人目につきやすいパーツです。
簡単にアレンジができるので、ぜひお好みでアレンジして、他のブログと差をつけてみてください。
もう少しCSSの仕組みが知りたいという方はこちらもどうぞ。
それでは、本日もご覧くださりありがとうございました。
このブログははてなブログで運営しています。
スター・ブックマーク・読者登録いただけると励みになります。
2019.6.29 公開
2019.7.15 更新
