読者です 読者をやめる 読者になる 読者になる

Minimal Green

はてなブログカスタマイズや、HTML、CSS、サイト制作などについて書いています。

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

ブログカスタマイズ

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

↓↓澄風荘Aboutページ↓↓

blog.syofuso.com

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

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="http://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>

こういう構成になっています。自由記入欄以下のプロフィール項目などは表示・非表示は変更できますが、順番を入れ替えたりHTMLはいじれません。
自由記入欄もこれにあわせて書くといいかも。

aboutページあんまり見る人はいないと思いますが、読者向けの自己紹介に活用してみてください。