本ブログの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を参考にした