はてなブログのプロフィール欄をカスタマイズしてみた【はてなブログのカスタマイズ】

はてなブログのプロフィール欄をカスタマイズしてみた【はてなブログのカスタマイズ】

さて、前回に引き続き、今回も、はてなブログのカスタマイズについて記事にしたいと思います。

前回の記事では、はてなブログの「読者になる」ボタンのカスタマイズ方法について記事にしました。

100bucks.hatenablog.com

今回の記事では、「読者になる」ボタンを使って、はてなブログのプロフィール欄をカスタマイズする方法をご紹介したいと思います。

誰でも簡単にコピー&ペーストでカスタマイズできるので、ぜひ参考にして頂ければ幸いです。

はてなブログのプロフィール欄をカスタマイズしてみた【はてなブログのカスタマイズ】

既存のプロフィール欄のデザイン

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

既存のプロフィール欄はこんな感じです。シンプルなデザインで、見やすいですが、特徴がなく、他のはてなブロガーと全く同じデザインなので、味気なく感じます。

カスタマイズ後のプロフィール欄

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

カスタマイズ後のプロフィール欄はこんな感じです。まず、「読者になる」ボタンを大きく表示させて、読者登録がしやすいように工夫しました。

また、一番最初に読んでほしい記事「リゾートバイト5年間の全記録」をリンクしたり、プロフィール欄にかけなかったプロフィールの詳細のページもリンクしました。

プログランキングのバーナーを表示させて被リンクを3つ獲得する！

そして、一番重要なのが、ブログランキングのバーナーです。このブログでは、日本ブログ村、人気ブログランキング、FC2ブログランキングに参加しているのですが、登録してバーナーを張り付けるだけで、「dofollow」の被リンクを3つ獲得できます。

被リンクは、SEO対策をする上で最重要事項なので、ブログランキングに参加しておくことをオススメします。

はてなブログのプロフィール欄をカスタマイズする方法

既存のプロフィールを削除してHTMLモジュールを追加する

既存のプロフィールを削除してHTMLモジュールを追加する

今回は、サイドバーのプロフィール欄を消去し、HTMLモジュールを追加して、プロフィール欄を新たに作成します。

まずは、はてなブログのデザイン設定に飛んでいただき、サイドバーにある「プロフィール」を削除してください。

そして、「モジュールを追加」をクリックして、「HTML」を追加してください。

HTMLモジュールに以下のHTMLコードを貼り付ける

<!-- プロフィールのタイトル部分 -->

<div class="hatena-module-title">
<i class="blogicon-user"></i><span> 管理人</span>
</div>


<!-- プロフィール -->

<div class="hatena-module-body">
<div class="profile" style="text-align: center;">
<img src="イメージ画像のアドレス" style="width: 150px;" class="icon" >
<div class="profile-description">
<span class="profile-name">名前</span>
<span class="profile-main">プロフィール欄</span>
<div class="dokusyaninaru">
<a href="2023年3月15日の記事参考" class="button01"><i class="blogicon-hatenablog lg"></I> 読者になる</a>
<div class="hatena-follow-button-box">
<span  data-track-name="profile-widget-subscribe-button" data-track-once=""></span>
<div class="subscription-count-box" style="display: block;"> <i></i>
<u></u>
<span class="subscription-count js-subscription-count"></span>
</div>
</div>
</div>


<div>
<a href="リンク記事のURL">
<span class="link1">リンク1</span>
</a>
</div>
<div>
<a href="リンク記事のURL">
<span class="link2">リンク2</span>
</a>
</div>
<div>
<a href="リンク記事のURL">
<span class="link3">リンク3</span>
</a>
</div>

<div style="padding-top: 10px;" >
にほんブログ村ののバーナーを貼り付ける
</div>

<div style="padding-top: 10px;" >
人気ブログランキングのバーナーを貼り付ける
</div>

<div style="padding-top: 10px;">
FC2ブログランキングのバーナーを貼り付ける
<div>

</div>
</div>

はてなブログのデザインCSS欄に以下のコードを張り付ける

/* ----- サイドバー ---- */

/* サイドバータイトル */
.hatena-module-title {
    font-size:22px;
    display: inline-block;

    height: 40px;
    text-align: center;
    text-decoration: none;
    font-weight:solid;
    line-height: 40px;
    outline: none;
    position: relative;
    z-index: 2;
    background-color: none;
    border: 1px solid #5f526a;
    border-top-right-radius: 7px;
    border-top-left-radius: 7px;
    color: #5f526a;
    overflow: hidden;
    box-shadow: 0px -1px 14px -5px #777777;
}
.hatena-module-title:before{
    font-family: "blogicon";
}



/* サイドバータイトルとサイドバーbodyの間の余白を消す */
.hatena-module-title {
margin-bottom: -6px;

}




/* ----- プロフィール ---- */

.profile {
  padding: 30px 0 0 0;
  text-align: center;
  border: solid 1px #5f526a;/*線*/
  box-shadow: 0px 1px 16px -6px #777777;
}

.icon {
border-radius: 50px;

}

.profile-name {
  display: block;
  padding: 6px;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
}

.profile-main {
display: block;
text-align: left;
padding: 0 10px;
}


.profile-description {
  padding: 0px 0px 20px 10px;
}



/* ----- 読者になるボタン---- */

.dokusyaninaru {
  padding: 20px 0 10px 0;
}


.button01 {
  display:inline-block;  
  border: 2px solid #333;
  font-size: 15px;
  color: #333;
  width: 150px;
  height: 40px;
  border-radius: 10px;
  font-weight: normal;
  text-align: center;
  transition: .4s;
  padding:13px 0 0 0;
  margin-left: auto;
  margin-right: auto;
}

.button01:hover {
  background-color: #333;
  border-color: #333;
  color: #FFF;
}


/* ----- 読者になるボタン横の吹き出し ---- */


.hatena-follow-button-box .subscription-count {
    text-align: center;
    font-size: 13px;
    padding: 7px;
    width: 25px;
    height:20px;
    border-radius: 5px;
}
.hatena-follow-button-box .subscription-count-box {
    margin: 0 0 0 3px!important;
    top:-2px;
}

.hatena-follow-button-box {
 display: inline-block;
 text-align: center;
 margin-left: auto;
  margin-right: auto;
}



.link1 {
  display: block;
  padding-top: 15px;
  margin-bottom: 3px;
  font-weight: solid;
  font-size: 14px;
  color: #1a0dab;
}


.link2 {
  display: block;
  padding-bottom: 3px;
  font-weight: solid;
  font-size: 14px;
  color: #1a0dab;
}


.link3 {
  display: block;
  padding-bottom: 3px;
  font-weight: solid;
  font-size: 14px;
  color: #1a0dab;
}

HTMLとCSSを貼り付けた後のプロフィール

HTMLとCSSを貼り付けた後のプロフィール

後は、HTMLコード上に自分のブログの情報や、ブログランキングのバーナーを設置していくだけです。