Change Forward

「かわる」をアシストする

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

 

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

 

【コピペCSS】はてなブログのプロフィールアイコンをアレンジする方法

 

※クリックで拡大できます。

 

はてなブログでは既定のデザインレイアウトがあり、何もしないままでは、他のブロガーと全く同じデザインになってしまいます。

 

ブログはネタで勝負!とは言え、やはり見た目でも差をつけたいもの。

 

今回はコピペでプロフィールを変更する方法をご紹介したいと思います。

 

【この記事を読むメリット 】

  • はてなブログのプロフィールが簡単にアレンジできるようになる
  • 他のブログと差が付けられる

 

沢山のブログを見ても、個性のあるものは記憶に残る。

 

それでは今回のコンテンツです。

 

   

アレンジはコピペだけ

手順はCSSのコピペのみです。

 

初めてはてなブログでCSSの編集をされる方は下記の記事で方法をご確認ください。 

3分ほどで確認できます。

 

↓はてなブログのCSS編集手順↓

www.biz-thinking-k.com

 

それでは早速編集用のコードをみて行きましょう。

 

 

1.アイコンを大きくする

アイコンを大きくする方法は下記です。

このままコードをコピーして貼り付けてください。

 

.profile-icon {
width: 70px;
}

 

赤字の数字の大小で大きさを変えられます。

 

【実装イメージ】

【コピペCSS】はてなブログのプロフィールアイコンをアレンジする方法

 

 

2.アイコンに縁をつける

次はアイコンの縁取りをつけるやり方です。

 

.profile-icon {
border: 2px solid #3cb371;
}

 

赤字の数字で太さを、青字のカラーコードで色を変えられます。

カラーコードはこちらからどうぞ。

 

www.biz-thinking-k.com

 

緑の記載で線の種類(二重線・破線など)の変更が可能です。

 

solid・・・1本線

double・・・2重線

groove・・・窪んで見える線

ridge・・・立体に見える線

inset・・・全体が窪んで見える設定

outset・・・全体が立体に見える設定

dashed・・・破線

dotted・・・点線

 

【実装イメージ】

【コピペCSS】はてなブログのプロフィールアイコンをアレンジする方法

 

 

3.アイコンを丸くする

アイコンを丸く表示することも、3行の記載でできます。

 

.profile-icon {
border-radius: 50px;
}

 

赤字の部分は丸みの具合を調整しています。

数字を小さくしていくと、四角の角が丸いような形もできますので試してみてください。5pxくらいがよいかと思います。

 

【実装イメージ】 

【コピペCSS】はてなブログのプロフィールアイコンをアレンジする方法

 

【1から3を実装すると】

これまでのすべてを実装すると、下記のようになります。

【コピペCSS】はてなブログのプロフィールアイコンをアレンジする方法



 

だいぶ個性的になりましたね。

 

 

4.不要な文字を消す

 プロフィールの文章は細かい部品に分かれていて、選んで消すこともできます。

下記のイメージを参考に、不要な部品は表示されないようにしてしまいましょう。

 

【コピペCSS】はてなブログのプロフィールデザインをアレンジする方法

 

  1. ユーザー名(意識高いK) ⇒ .user-name-nickname
  2. ID両端の丸括弧 ⇒ .user-name-paren
  3. はてなID名(id:biz-thinking-K) ⇒ .user-name-hatena-id
  4. はてな「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】はてなブログのプロフィールアイコンをアレンジする方法

 

それぞれお好みはあるかと思いますが、このような方法でデザインを変更することが可能です。

細部へのこだわり。

 

 

身近なところから始めよう

プロフィールはブログの上部に表示することも多く、人目につきやすいパーツです。

簡単にアレンジができるので、ぜひお好みでアレンジして、他のブログと差をつけてみてください。

 

もう少しCSSの仕組みが知りたいという方はこちらもどうぞ。

 

www.biz-thinking-k.com

 

それでは、本日もご覧くださりありがとうございました。

 

このブログははてなブログで運営しています。
スター・ブックマーク・読者登録いただけると励みになります。
 

 

2019.6.29 公開

2019.7.15 更新