つれづれなる備忘録

日々の発見をあるがままに綴る

ブログデザイン備忘録 ~Aboutページ更新

 本ブログのaboutページhttps://atatat.hatenablog.com/aboutをデザイン含めて更新したので、その方法を紹介する。

1. Aboutページの記述

 Aboutページの編集は、設定からaboutページの編集をクリックし自由記述欄のところに、自己紹介やブログ紹介などを記述していく。記述方法はHTML/はてな記法/Markdownが選択できる。本ブログはMarkdown編集で記事を作成しているのでMarkdown編集を選択。見出しのデザインなどは、ブログ記事用のデザインCSSがそのまま適用される。ただし、ブログ記事のように写真の貼り付けのような右側のナビゲーションがないので、写真など張り付ける場合はダミーで記事を作って、生成されたコードなどをコピー&ペーストするのがよい。ブログの運営状況を表示するためにはプロフィール、ブログ投稿数、ブログ投稿日数、読者の表示のチェックを入れる。

2. 運営状況部分のデザイン

 AboutページのHTMLコードははてなブログのaboutページをカスタマイズしました。 - Minimal Greenによると以下のようになっている。

 <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>

これに基づいてプロフィール、ブログ投稿数、ブログ投稿日数、読者の表示をCSSによりデザイン変更していく。*1

CSSのコードは、通常のブログ記事のデザインと同様にデザイン-カスタマイズ-デザインCSS内に追記していく。デザイン自体はサイドバーの項目と同じになるようにした。

/*aboutページdt、プロフィール等のタイトル*/  
.page-about dt {
text-align: left;
border-bottom:dashed 1px darkseagreen;
font-weight: bold;
font-size: 1.1em;
color: seagreen;
margin-bottom:15px;   
}    
/*aboutページdd*/    
.page-about dd {
 padding: 0.4em 0.5em;
 background: rgba(144, 238, 144, 0.1);
 border: solid 2px #8FBC8F;
 border-radius:8px;
 box-shadow: 0px 3px 5px rgba(85, 107, 47, 0.5);
 font-weight:bold;
 text-align:center;
 font-family: "メイリオ", Meiryo, "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "MS ゴシック", sans-serif;
}    

/*aboutページ、読者数*/  
.about-subscription-count {
display: table;   
position: relative;
padding: 0 30px;
color: #676F74;
font-size: 1.0em;
font-weight: bold;
line-height: 1;
letter-spacing: 1px;
margin: 12px auto;
}

/*aboutページ、読者アイコン*/
.page-about .entry-content img.profile-icon {
height: 2.5em;
width: 2.5em;
border-radius: 50%;
margin: 4px 4px;
transition: .3s;  
}
.page-about .entry-content img.profile-icon:hover {
box-shadow: 0 10px 20px -4px rgba(0,0,0,.25);
transform: translateY(-3px);
}

*1:現在ブログ削除されていて見えないが、 https://www.okuni.me/entry/2018/01/26/191500を参考にした