【ブログカスタマイズ】サイドバーのプロフィール編

プロフィール欄を作ることにした。

なによりもまず自己紹介だろうということで、

サイドバーに自分のプロフィール欄を作ることにしました。

ただ、はてなブログデフォルトの「プロフィール」ってのはあまりに味気ない。

もう少し画像も大きくシュッとスッキリしたものにしたいので、HTMLのパーツ？を使って作ることにしました。

google先生に聞いてもらえれば、あえてココで書く必要もないんじゃないかと思いますが、それでは記事にならないので。

では

はてなブログのデザイン設定にて、サイドバー→モジュールを追加→HTML　を選択。

タイトル欄には好きな名前つけてもらって、ココではaboutとしてます。

でもって、その下の欄に以下を貼っつけて、イメージのところやリンク先を編集してもらえれば終了。

イメージはjpgでもpngでもいけました。 ちなみにココでは「はてなフォトライフ」にアップしたものを使っています。

    <a href=\"http://mcig.hatenablog.com/about\" class=\"profile-icon-link\">
      <img src=\"ここにプロフィール写真のURL\" />
    </a>
    
    <span class=\"id\">
      <a href=\"http://mcig.hatenablog.com/about\" class=\"hatena-id-link\"><span data-load-nickname=\"1\" data-user-name=\"morning_coffee_is_good\">このへんは好きなこと書く</span></a>
      
    </span>
    
    <div class=\"profile-description\">
      <p>ここは自己紹介文</p>

    </div>
    
<aside class=\"social-icons\">
<div>
<a href=\"ここは自分のツイッターページURL\" target=\"_blank\" style=\"font-size: 100%; \"><img src=\"ここはツイッターアイコンURL\" /></a><span style=\" ;font-size:100%;\">
 </span><a 

<div class=\"hatena-follow-button-box btn-subscribe js-hatena-follow-button-box\">

  <a href=\"#\" class=\"hatena-follow-button js-hatena-follow-button unsubscribing\">
    <span class=\"subscribing\">
      <span class=\"foreground\">購読中です</span>
      <span class=\"background\">読者をやめる</span>
    </span>
    <span class=\"unsubscribing\" data-track-name=\"profile-widget-subscribe-button\" data-track-once=\"\" data-track-once-tracked=\"\">
      <span class=\"foreground\">読者になる</span>
      <span class=\"background\">読者になる</span>
    </span>
  </a>
  <div class=\"subscription-count-box js-subscription-count-box\" style=\"display: block;\">
    <i></i>
    <u></u>
    <span class=\"subscription-count js-subscription-count\">3</span>
  </div>
</div>
    

上のHTMLには私のはてなブログのURLが残っているので、自分のものに書き換えてもらえれば良いです。

以上、これでこのブログのサイドバーのようなプロフィールパーツの出来上がりです。