【はてなブログ】プロフィールレイアウトをカスタマイズ

はじめに

はてなブログのプロフィール画像を変更しました。
プロフィールアイコンのそばに紹介文を簡単に載せたかったのですが方法がわからず、
自分でカスタマイズをしてみました。

追記：本記事執筆時点から本ブログの画像は変わっていますが、やり方は同じです。

デフォルトだと以下のようになっているはずです。
少し長く紹介文を入れた場合、利用しているテンプレートによっては3行目から崩れてしまいます。

そこで、カスタマイズを行い変更した結果が以下になります。

デフォルトの方が見栄えが良かった気もしますが… とりあえず紹介文はスッキリ収まるようになりました。

カスタマイズの流れ

カスタマイズの流れは以下の通りです。 ブログ上部のメニューから「デザイン」> 「カスタマイズ」>「サイドバー」>「モジュールを追加」を選択

表示されたダイアログのリストから「HTML」を選択し、必要なコードを記述します。

記述したコードは以下の通りです。
ひとまずコード全体を載せました。詳しい構成は以降の章で紹介します。

<!-- ### プロフィールのボックス ### -->
<div class="design-profile-wrap">
  <!-- ### アイコン画像と名前・肩書 ### -->
  <div class="design-profile-top">
    <figure class="design-profile_icon"><img
        src="./aa.jpg" alt="まる">
    </figure>
    <div class="design-name-title">
    <div>まる</div>
    <div class="design-title">30代 会社員</div>
    </div>
  </div>
  <!-- ### 紹介文 ### -->
  <div class="design-profile-body">
    例のウィルスの影響でおウチ時間が長くなり、<br>ブログを初めてみました。
    <br>気ままに更新してゆこうと思います。
  </div>
  <!-- ### 読者になるボタン ### -->
  <div>
    <iframe style="margin-left: 4px;"
      src="https://blog.hatena.ne.jp/marumaruchanmaru/marumaruchanmaru.hatenablog.com/subscribe/iframe"
      allowtransparency="true" frameborder="0" 
      scrolling="no" width="150" height="28"></iframe>
  </div>
  <!-- ### このブログについて ### -->
  <div>
    <a style="margin-left: 4px;" href="https://maru-note.net/about">
    <span>このブログについて<span></a>
  </div>
</div>

<!-- ### CSSでスタイルを設定 ### -->
<style>
/* ### プロフィールのボックス ### */
.design-profile-wrap {
  padding:0;
  border-radius:10px;
  max-width:350px;
  background:#fff;
}
/* ### アイコン画像と名前・肩書 ### */
.design-profile-top {
  display:flex;
}
/* ### アイコン画像 ### */
.design-profile_icon {
  width: 80px;
  height: 80px;
  margin: 0;
  padding: 0;
}
.design-profile_icon img {
  border-radius: 15%;
}
/* ### 名前・肩書 ### */
.design-name-title {
  margin-top: 15px;
  margin-left: 5px;
  font-weight: bold;
  font-size: 18px;
  color: #555;
}
.design-title {
  font-size: 14.5px;
}
/* ### 自己紹介 ### */
.design-profile-body {
  font-size: 11px;
  max-width: 350px;
}
</style>

あとは「適用」ボタンを押せば、 今回追加したプロフィールが増えているはずなので、
元々あった「プロフィール」は削除してOKです。（また復活できます）

プロフィール欄の構成

上記のコードを用いたプロフィール欄の構成は以下のようになっています。
赤枠の所の箇所がプロフィール欄に埋め込まれる仕組みになっています。

以降、順番に構成要素を紹介してゆきます。

プロフィールのボックス

まずはプロフィールのボックス部分。ここで作成した要素内に自己紹介やプロフィールなどを埋めてゆくことになります。

<div class="design-profile-wrap">
  <!-- ### この中に他の構成要素を記載してゆく ### -->
</div>

.design-profile-wrap {
  padding:0;
  border-radius:10px;
  max-width:350px;
  background:#fff;
}

アイコン画像と名前・肩書

ボックス内の最初の構成要素はアイコン画像と名前・肩書を記載するdiv要素になります。
アイコン画像と名前・肩書を横並びに表示するためにCSSにdisplay: flexを適用することがポイントです。
float: left;でもいいですが、display: flexの方が簡単ですね。

<div class="design-profile-top">
    <!-- ### この中にアイコン画像と名前・肩書を記載する ### -->
</div>

.design-profile-top {
  display:flex;
}

アイコン画像

アイコン画像には、はてなフォトライフにアップロードした画像のURLを記載します。
右クリックメニューから画像のアドレスをコピーして、src=以降に貼り付けます。

<figure class="design-profile_icon"><img
    src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/marumaruchanmaru/20220324/20220324191806.jpg" alt="まる">
</figure>

.design-profile_icon {
  width: 80px;
  height: 80px;
  margin: 0;
  padding: 0;
}
.design-profile_icon img {
  border-radius: 15%;
}

名前と肩書

名前と肩書は以下の通りです。

<div class="design-name-title">
<div>まる</div>
<div class="design-title">30代 会社員</div>
</div>

.design-name-title {
  margin-top: 15px;
  margin-left: 5px;
  font-weight: bold;
  font-size: 18px;
  color: #555;
}
.design-title {
  font-size: 14.5px;
}

自己紹介

自己紹介は以下の通りです。

<div class="design-profile-body">
  例のウィルスの影響でおウチ時間が長くなり、<br>ブログを初めてみました。
  <br>気ままに更新してゆこうと思います。
</div>

.design-profile-body {
  font-size: 11px;
  max-width: 350px;
}

読者になるボタン

読者になるボタンのアドレスは、はてなブログの設定 > 詳細設定 の下部からコピーできます。
ここで取得したアドレスをHTMLのsrc=の所に貼り付ければOKです。

<div>
  <iframe style="margin-left: 4px;"
    src="https://blog.hatena.ne.jp/marumaruchanmaru/marumaruchanmaru.hatenablog.com/subscribe/iframe"
    allowtransparency="true" frameborder="0" 
    scrolling="no" width="150" height="28"></iframe>
</div>

このブログについて

こちらは標準の「このブログについて」のアドレスを利用します。

<div>
  <a style="margin-left: 4px;" href="https://maru-note.net/about">
  <span>このブログについて<span></a>
</div>

以上が自分が作成したプロフィール欄の構成になります。
ある程度構成がわかれば、一部変更したい時にも応用が効くようになると思います。