はてなブログのaboutページをカスタマイズしました。

シロマティ (id:shiromatakumi) さんのaboutページが素敵だったので真似してみました。
shiromatakumi.hatenablog.com
1カラムにするアイデアいただきました。ありがとうございました。

ガッツリポートフォリオサイト風にすると確かに重くなるし、元々のテーマのCSSが効いてるので被ってる要素を直すのがめんどくさかったですｗ
タイトルヘッダーのデザイン的にもあまり幅が広いと合わない…
なので、元々のデザインの残して普通のブログっぽいデザインになりました。

aboutページの編集はダッシュボード＞設定＞aboutページからできます。
f:id:syofuso:20160909171706j:plain

HTMLで自由に書けるので、やろうと思えばリッチなサイトもできますよ。
staff.hatenablog.com

aboutページのcssは

<style>
</style>

で囲ってインライン化しています。

f:id:syofuso:20160909172806j:plain
自由記述欄以下のプロフィールや投稿日数などの部分は.page-about dl,.page-about dt,.page-about ddでスタイル指定できます。

例としてこのブログのデフォルトのaboutページは

 <div class="entry-content">
  <!--自由記入欄ー-->

  <!--/自由記入欄ー-->

<dl>
    <dt>プロフィール</dt>
    <dd>
      <a href="http://profile.hatena.ne.jp/syofuso/">
        <img src="https://cdn1.www.st-hatena.com/users/sy/syofuso/profile.gif" width="16" height="16" alt="" class="profile-icon"/>
        <span data-load-nickname="1" data-user-name="syofuso">id:syofuso</span>
      </a>
      <a href="http://blog.hatena.ne.jp/guide/pro" title="はてなブログPro"><i class="blog-sprite-pro" /></i></a      
    </dd>
    <dt>ブログ投稿数</dt>
    <dd>26 記事</dd>
    <dt>ブログ日数</dt>
    <dd>19 日</dd>
    <dt>継続期間</dt>
    <dd>8 週間</dd>    
    <dt>読者</dt>
    <dd>
      <div class="info">
        <span class="about-subscription-count">
          24 人
        </span>   
        <a href="http://blog.hatena.ne.jp/ユーザーid/" class="subscriber" rel="nofollow" ><img src="ユーザーのアイコン.gif" width="16" height="16" alt="ユーザー" title="" class="profile-icon" /></a>
</div>
    </dd>
  </dl>
</div>