ヘッダー下にプロフィールを追加する

MonoTsuduriテーマはシングルカラムのため、初期状態ではプロフィールもブログの下の方に表示されます。
カスタマイズでヘッダー下にプロフィールを追加することで、書き手が誰なのか閲覧者にわかりやすくなります。

下準備
- プロフィールアイコン画像のURL取得
- 読者になるボタンのコード取得
プロフィールをヘッダー下に設定する手順
- ヘッダー下プロフィール基本ソースコード
- 設置例
グローバルメニューとプロフィールを同時に設置する場合
- グローバルメニューとプロフィールの同時設置例

下準備

プロフィールアイコン画像のURL取得

Chromeの場合はブログのプロフィールのアイコンの上で右クリックをし、「画像アドレスをコピー」をクリックでURLが取得できます*1。

読者になるボタンのコード取得

ブログのダッシュボード→設定→詳細設定タブの下に、「読者になるボタン」のHTMLコードを取得できる欄があります。
そこから自身のブログ専用のコードをコピーしてください。

プロフィールをヘッダー下に設定する手順

管理画面→デザイン→レンチマーク→ヘッダ→タイトル下の欄に、以下の基本ソースコードを自身のものに書き換えたソースコードを貼ってください。

置き換え箇所は、「画像URL」「はてなID」「名前」「読者になるボタンHTMLコード」です。

ヘッダー下プロフィール基本ソースコード

<!-- ヘッダー下プロフィール -->
<div class="header-profile common-width">
  <div class="header-profile-icon">
    <a href="/about" class="profile-icon-link">
      <img src="画像URL" alt="id:はてなID" class="profile-icon">
    </a>
  </div>
  <div class="header-profile-description">
    <div class="header-profile-name">
      <a href="/about" class="hatena-id-link"><span data-load-nickname="1" data-user-name="はてなID"><span class="user-name-nickname">名前</span> <span class="user-name-paren">(</span><span class="user-name-hatena-id">id:はてなID</span><span class="user-name-paren">)</span></span></a>
    </div>
    <div class="header-profile-widget-subscribe-button">
      読者になるボタンHTMLコード
    </div>
  </div>
</div>

設置例

<!-- ヘッダー下プロフィール -->
<div class="header-profile common-width">
  <div class="header-profile-icon">
    <a href="https://kuichi.hatenablog.com/about" class="profile-icon-link">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/tsamplesan.jpg" alt="id:tsamplesan" class="profile-icon">
    </a>
  </div>
  <div class="header-profile-description">
    <div class="header-profile-name">
      <a href="/about" class="hatena-id-link"><span data-load-nickname="1" data-user-name="tsamplesan"><span class="user-name-nickname">サンプルさん</span> <span class="user-name-paren">(</span><span class="user-name-hatena-id">id:tsamplesan</span><span class="user-name-paren">)</span></span></a>
    </div>
    <div class="header-profile-widget-subscribe-button">
      <iframe src="https://blog.hatena.ne.jp/" allowtransparency="true" frameborder="0" scrolling="no" width="150" height="28"></iframe>
    </div>
  </div>
</div>

グローバルメニューとプロフィールを同時に設置する場合

同時に設置する場合は、上にグローバルナビゲーション、その下にプロフィール、の順で設置すると綺麗に収まります。

グローバルメニューとプロフィールの同時設置例

<!-- グローバルメニュー -->
<div class="header-nav">
  <label for="header-nav-switch" class="header-nav-btn">- Menu -</label>
  <input type="checkbox" name="check" id="header-nav-switch" class="header-nav-checkbox">
  <div class="header-nav-box">
    <div class="header-nav-menu">
      <a href="/about" class="header-nav-link"><span class="header-nav-link-txt">About</span></a>
      <a href="/archive" class="header-nav-link"><span class="header-nav-link-txt">記事一覧</span></a>
      <a href="" class="header-nav-link"><span class="header-nav-link-txt">メニュー1</span></a>
      <a href="" class="header-nav-link"><span class="header-nav-link-txt">メニュー2</span></a>
      <a href="" class="header-nav-link"><span class="header-nav-link-txt">メニュー3</span></a>
    </div>
  </div>
</div>

<!-- ヘッダー下プロフィール -->
<div class="header-profile common-width">
  <div class="header-profile-icon">
    <a href="/about" class="profile-icon-link">
      <img src="画像URL" alt="id:はてなID" class="profile-icon">
    </a>
  </div>
  <div class="header-profile-description">
    <div class="header-profile-name">
      <a href="/about" class="hatena-id-link"><span data-load-nickname="1" data-user-name="はてなID"><span class="user-name-nickname">名前</span> <span class="user-name-paren">(</span><span class="user-name-hatena-id">id:はてなID</span><span class="user-name-paren">)</span></span></a>
    </div>
    <div class="header-profile-widget-subscribe-button">
      読者になるボタンHTMLコード
    </div>
  </div>
</div>