あなたが初めて訪れたブログ。仮にその記事が魅力的で、いったいどんな人が運営しているのだろうか？と思った時、次にどーゆーページを確認しますか？
私なら、まずaboutページ でその人の詳しいプロフィール等を確認します。
最近のメディアの傾向として、どんなコンテンツ（記事）か？というのと同時に、誰が書いたコンテンツか？というところが非常に重要視されています。
そういった影響からも、記事の末尾に「この記事を書いた人」というaboutエリアが設けられるようになったり、別途aboutページの需要が昨今高まっているのです。
つまり、
aboutページというのは新規ユーザーがあなたのブログのファンになるかどうか、リピーターになるかどうかの非常に重要なページと言っても過言ではありません。
今回は、そんなaboutページを誰でもコピペでオシャレにカスタマイズできる方法をご紹介致します。
- aboutページの確認方法
- ちなみにはてなブログのデフォルトのaboutページ
- 訪問者ははてなブロガーだけじゃない
- まず、CSSで既存エリアの体裁をカスタマイズ
- aboutページ編集ページでHTMLカスタマイズ
- オークニ的aboutページテンプレート
- まとめ
- 最後に
aboutページの確認方法
まさかはてなブログユーザーで、aboutページを知らない人がいるとも考えにくいのですが…一応どーやってaboutページを見るのか確認しておきます。
一番簡単に見る方法は、サイドバーや記事下にある「プロフィール」からアイコンや名前（id）をクリックするパターンですね！
また、カスタマイズでヘッダー下にグローバルメニューを設けている人なら、そこに設置している人もいますね！
ついでに僕のaboutページを覗いてみて、ページセッションを押し上げていただけると喜びます😂
ちなみにはてなブログのデフォルトのaboutページ
だ。だだ。。。ダサすぎるｗｗｗ
はてなブログマジかよ。
これはアカン。。。
ミニマリストもビックリやで。
いくらWordPressと双璧を成す唯一の国産ブログサービスや言うても…これはいただけない。
こんなん、人様に見せる必要あるのか？
もはや見せることすら恥ずかしいレベル。
訪問者ははてなブロガーだけじゃない
いいですか。仮に、他のはてなブロガーも皆だいたいこんなんやし、別にそのままでもいいんじゃね？みたいに考えてるあなた。
大馬鹿野郎です。
現行犯逮捕です。
常に意識して下さい。一番大切なユーザーは、検索からのオーガニックユーザーです。冒頭でも述べましたが、aboutページの最大の役割は新規ユーザーのリピート化です。
想像してみて下さい。検索から訪問した新規ユーザーがあなたの記事に魅力を感じ、さらにあなたの自身のことが気になりaboutページを訪問した時のことを。
ページを開いた瞬間、こんなカッスカスな、さっぶいaboutページ…誰がさらにあなたのことを気になりますか？
考えただけで怖いですｗｗｗ
変えましょう。早急にカスタマイズしましょう！ｗ
まず、CSSで既存エリアの体裁をカスタマイズ
これを目指します。
真ん中ドンッ！
吹き出しフワッ！
読者＼(^o^)／ウェーイ！
です。
これくらいなら、以下のCSSをコピペすれば秒で出来ます。
逆に言うと、残念ながらこのエリアはHTMLの編集が一切できず、CSSでだけカスタマイズ可能なので、これくらいで勘弁してください😂
CSS
コピペ場所
管理画面より、「デザイン」→「カスタマイズ」→「デザインCSS」です。
各エリア、最低限どこの場所かわかるようにコメントを添えております。
もちろん、サイズ、文字色、背景色、余白等、個人の塩梅によって変更してくださいませm(_ _)m
また、がっつりカスタマイズできる人はガンガンオリジナルに変更してくださいませm(_ _)m
初心者の方は…とりあえずそのまま丸パクリでよろしい！ｗ
これを、真っさらなテンプレートにて反映させた状態が以下です。
先ほどの、目標とする状態と2点ほど異なります。1つが、プロフィールの有無。そしてもう1つが、「ブログ運営状況」という見出し。
これらをさらにカスタマイズするには、特定のページへ行かないといけないので、これから改めてご説明致します。
aboutページ編集ページでHTMLカスタマイズ
地味に、はてなブログ内でaboutページのHTMLを編集できるページがあります。はてなブログが公式に発表していたので、ご存じの方も多いかと思います。
ブログのaboutページを自由に編集できるようにしました（ページタイトルについて追記あり） - はてなブログ開発ブログ
編集ページへの行き方
管理画面より、「設定」→「aboutページ」→「aboutページ編集」
ここで、自由にHTMLを付け足したり、また既存のプロフィールとかの表示/非表示が切り替えれたりします！
ではさっそく、プロフィールに関してですが…ぶっちゃけダサいんで非表示にしましょう！ｗ
アイコンを出したいなら、後ほどHTMLで付け足せばOKです。
HTMLカスタマイズ
実は、最後に残った「ブログ運営状況」という見出しが、ここの自由記述欄にて設定できます。
例えば、このように記述する。
HTML
これは、普段記事で使っているh2（僕の場合）やh3の見出しを用いて記述している。よって、表示される形式は個人によって様々なはずです。
ここまでのカスタマイズの結果を見てみよう。
うむ。ちょっと、読者少なすぎて若干気持ち悪い感はあるが、それを除けば目標としたカタチを完璧に再現できた！
特に、現段階ではそれ以上の具体的なプロフィールはまだいいかな。ってゆー人ならカスタマイズはこれでも十分だと思います！
お疲れ様でした！＼(^o^)／
オークニ的aboutページテンプレート
どーせなら、さらにもうちょっと付け加えてみたい！オークニさんのaboutページ素敵っす！私も同じ感じにしたいっす！なんなら私もオークニっす！！！
みたいな溢れる情熱を堪えきれない人のために、一応僕の完コピテンプレート置いておきますｗ
カスタマイズの土台としてでもご利用くださいませm(_ _)m
なお、一々HTMLとCSSを分けるのが面倒くさいので、コピペする際に一回の作業で済むように、というハートフルな図らいのもと、HTMLとCSSを一括で記載しておりますので、悪しからず😏
HTML
正直、めっちゃ長いですｗ
あくまで参考程度に。ガチでパクりたい人は、どうぞご自由に。
一応、注意点ぽいところだけ説明をすると…
7行目：プロフィール画像のURLとは、現状のプロフィール画像を右クリックして、「画像アドレスをコピー」をするとOKです。
9行目：はてなブログProじゃない人は、<i class="badge-type-pro">はてなブログPro</i>という記述丸ごと削除してOKです。
22〜25行目：各カテゴリー名の前にFont Awesomeのアイコンを付けてます。これは人によって変わるはずなので編集してください。
なお、Font Awesomeのアイコンの使い方についてはこちらの記事を参考に
【アイコン】はてなブログで「Font Awesome」をサクッと使う方法 - オークニズム
47行目：はてなID/登録時のはてなブログURLに関して
これ、僕もそうなんですが、今のブログのURLと登録時のはてなブログURLは異なる人がいるので注意です。（独自ドメインの人とか）
一発で簡単に調べる方法は、管理画面から「設定」→「詳細設定」、一番下の「読者になるボタン」を確認。
その中に、iframe src="https://blog.hatena.ne.jp/はてなID/登録時のブログURL/subscribe/iframe"
という記述があるので、上記の赤字の部分を丸ごとコピペすればOK。
51行目：実際のブログURLとは。実際のやつですｗ
僕の場合、トップページのhttp://www.okuni.meこれ丸ごとですね！
だいたいこんなもんかな！ｗ
あとは、実際に触ってみながら調整するなり、わからなかったら僕に聞くなりしてくださいませ！m(_ _)m
まとめ
ちなみに、上記のオークニ的aboutページテンプレを新規のブログにぶち込んだイメージがこんな感じです。
うむ、完全に再現できてますね！ｗ
素晴らしい！！
ちなみに今回のカスタマイズでは、みんな大好きマテリアルデザインっぽいフワっとアニメーションとかも特別に盛り込んでいるので、是非フワフワさせてみて下さい！😂
最後に
冒頭で申し上げた通り、aboutページは新規ユーザー獲得のため、そしてブランディングのために必須のページと言えます。
特に、企業からブロガーへ何かを依頼するなんて時は、確実にaboutページでブログの、そしてあなたの概要をチェックしています。
その他大勢のはてなブロガーはみんな面倒くさがって手を付けない所。
だからこそ！
今のうちにやるべきだと思いませんか？😏
有名なはてなブロガー、ポジ熊さんも大事って言ってたさ〜
プロフィールのこだわりはブログファンを増やすために必要 - ポジ熊の人生記
