【コピペ歓迎】はてなブログのダサいaboutページを見やすくオシャレにカスタマイズ！

あなたが初めて訪れたブログ。仮にその記事が魅力的で、いったいどんな人が運営しているのだろうか？と思った時、次にどーゆーページを確認しますか？

私なら、まずaboutページ でその人の詳しいプロフィール等を確認します。

最近のメディアの傾向として、どんなコンテンツ（記事）か？というのと同時に、誰が書いたコンテンツか？というところが非常に重要視されています。

そういった影響からも、記事の末尾に「この記事を書いた人」というaboutエリアが設けられるようになったり、別途aboutページの需要が昨今高まっているのです。

つまり、

aboutページというのは新規ユーザーがあなたのブログのファンになるかどうか、リピーターになるかどうかの非常に重要なページと言っても過言ではありません。

今回は、そんなaboutページを誰でもコピペでオシャレにカスタマイズできる方法をご紹介致します。

aboutページの確認方法

まさかはてなブログユーザーで、aboutページを知らない人がいるとも考えにくいのですが…一応どーやってaboutページを見るのか確認しておきます。

一番簡単に見る方法は、サイドバーや記事下にある「プロフィール」からアイコンや名前（id）をクリックするパターンですね！

また、カスタマイズでヘッダー下にグローバルメニューを設けている人なら、そこに設置している人もいますね！

ついでに僕のaboutページを覗いてみて、ページセッションを押し上げていただけると喜びます😂

ちなみにはてなブログのデフォルトのaboutページ

だ。だだ。。。ダサすぎるｗｗｗ

はてなブログマジかよ。

これはアカン。。。

ミニマリストもビックリやで。

いくらWordPressと双璧を成す唯一の国産ブログサービスや言うても…これはいただけない。

こんなん、人様に見せる必要あるのか？
もはや見せることすら恥ずかしいレベル。

スポンサーリンク

訪問者ははてなブロガーだけじゃない

いいですか。仮に、他のはてなブロガーも皆だいたいこんなんやし、別にそのままでもいいんじゃね？みたいに考えてるあなた。

大馬鹿野郎です。

現行犯逮捕です。

常に意識して下さい。一番大切なユーザーは、検索からのオーガニックユーザーです。冒頭でも述べましたが、aboutページの最大の役割は新規ユーザーのリピート化です。

想像してみて下さい。検索から訪問した新規ユーザーがあなたの記事に魅力を感じ、さらにあなたの自身のことが気になりaboutページを訪問した時のことを。

ページを開いた瞬間、こんなカッスカスな、さっぶいaboutページ…誰がさらにあなたのことを気になりますか？

考えただけで怖いですｗｗｗ

変えましょう。早急にカスタマイズしましょう！ｗ

まず、CSSで既存エリアの体裁をカスタマイズ

これを目指します。

真ん中ドンッ！

吹き出しフワッ！

読者＼(^o^)／ウェーイ！

です。

これくらいなら、以下のCSSをコピペすれば秒で出来ます。

逆に言うと、残念ながらこのエリアはHTMLの編集が一切できず、CSSでだけカスタマイズ可能なので、これくらいで勘弁してください😂

CSS

コードを開く

	/*aboutページ、デフォdl（プロフィール〜読者までを囲うエリア）*/
	.page-about dl {
	text-align: center;
	margin: 0;
	}
	/*aboutページ、デフォdt（プロフィール等のタイトル）*/
	.page-about dt {
	text-align: center;
	font-weight: bold;
	font-size: 1.3em;
	color: #676F74;
	margin-bottom: 15px;
	}
	/*aboutページ、デフォdd→吹き出し風に*/
	.page-about dd {
	text-align: center;
	position: relative;
	display: inline-block;
	margin: 0.5em auto 1.5em;
	padding: 7px 10px;
	min-width: 120px;
	max-width: 100%;
	color: #676F74;
	font-size: 16px;
	background: #FFF;
	border: solid 3px #676F74;
	box-sizing: border-box;
	border-radius: 10px;
	}
	.page-about dd:before{
	content: "";
	position: absolute;
	top: -23px;
	left: 50%;
	margin-left: -15px;
	border: 12px solid transparent;
	border-bottom: 12px solid #FFF;
	z-index: 2;
	}
	.page-about dd:after{
	content: "";
	position: absolute;
	top: -30px;
	left: 50%;
	margin-left: -17px;
	border: 14px solid transparent;
	border-bottom: 14px solid #676F74;
	z-index: 1;
	}
	/*aboutページ、読者数（＼99人／のところ）*/
	.about-subscription-count {
	display: table;
	position: relative;
	padding: 0 30px;
	color: #676F74;
	font-size: 1.5em;
	font-weight: bold;
	line-height: 1;
	letter-spacing: 1px;
	margin: 12px auto;
	}
	.about-subscription-count:before,
	.about-subscription-count:after {
	display: inline-block;
	position: absolute;
	top: 50%;
	width: 20px;
	height: 3px;
	border-radius: 3px;
	background-color: #676F74;
	content: "";
	}
	.about-subscription-count:before {
	left: 0;
	-webkit-transform: rotate(50deg);
	transform: rotate(50deg);
	}
	.about-subscription-count:after {
	right: 0;
	-webkit-transform: rotate(-50deg);
	transform: rotate(-50deg);
	}
	/*aboutページ、読者アイコン（拡大＆円形＆ふわっとアニメーション）*/
	.page-about .entry-content img.profile-icon {
	height: 45px;
	width: 45px;
	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);
	}

view raw aboutページ、デフォルトエリア hosted with ❤ by GitHub

コピペ場所

管理画面より、「デザイン」→「カスタマイズ」→「デザインCSS」です。

各エリア、最低限どこの場所かわかるようにコメントを添えております。

もちろん、サイズ、文字色、背景色、余白等、個人の塩梅によって変更してくださいませm(_ _)m

また、がっつりカスタマイズできる人はガンガンオリジナルに変更してくださいませm(_ _)m

初心者の方は…とりあえずそのまま丸パクリでよろしい！ｗ

これを、真っさらなテンプレートにて反映させた状態が以下です。

先ほどの、目標とする状態と2点ほど異なります。1つが、プロフィールの有無。そしてもう1つが、「ブログ運営状況」という見出し。

これらをさらにカスタマイズするには、特定のページへ行かないといけないので、これから改めてご説明致します。

aboutページ編集ページでHTMLカスタマイズ

地味に、はてなブログ内でaboutページのHTMLを編集できるページがあります。はてなブログが公式に発表していたので、ご存じの方も多いかと思います。

ブログのaboutページを自由に編集できるようにしました（ページタイトルについて追記あり） - はてなブログ開発ブログ

編集ページへの行き方

管理画面より、「設定」→「aboutページ」→「aboutページ編集」

ここで、自由にHTMLを付け足したり、また既存のプロフィールとかの表示/非表示が切り替えれたりします！

ではさっそく、プロフィールに関してですが…ぶっちゃけダサいんで非表示にしましょう！ｗ

アイコンを出したいなら、後ほどHTMLで付け足せばOKです。

HTMLカスタマイズ

実は、最後に残った「ブログ運営状況」という見出しが、ここの自由記述欄にて設定できます。

例えば、このように記述する。

HTML

コードを開く

	/*aboutページ、h2見出し*/
	<h2>
	ブログ運営状況
	</h2>
	<style type="text/css">
	.page-about h2 {
	border-bottom: 5px solid #8EDAE5;
	text-align: center;
	}
	</style>

view raw ブログ運営状況 hosted with ❤ by GitHub

これは、普段記事で使っているh2（僕の場合）やh3の見出しを用いて記述している。よって、表示される形式は個人によって様々なはずです。

ここまでのカスタマイズの結果を見てみよう。

うむ。ちょっと、読者少なすぎて若干気持ち悪い感はあるが、それを除けば目標としたカタチを完璧に再現できた！

特に、現段階ではそれ以上の具体的なプロフィールはまだいいかな。ってゆー人ならカスタマイズはこれでも十分だと思います！

お疲れ様でした！＼(^o^)／

オークニ的aboutページテンプレート

どーせなら、さらにもうちょっと付け加えてみたい！オークニさんのaboutページ素敵っす！私も同じ感じにしたいっす！なんなら私もオークニっす！！！

みたいな溢れる情熱を堪えきれない人のために、一応僕の完コピテンプレート置いておきますｗ

カスタマイズの土台としてでもご利用くださいませm(_ _)m

なお、一々HTMLとCSSを分けるのが面倒くさいので、コピペする際に一回の作業で済むように、というハートフルな図らいのもと、HTMLとCSSを一括で記載しておりますので、悪しからず😏

HTML

コードを開く

	<h2>
	ブログ名について
	</h2>
	<div class="profile-center"><!--真ん中寄せ-->
	<div style="margin-bottom: 20px;"><!--bottom余白用囲い-->
	<img src="プロフィール画像のURL" width="200" height="200" class="profileimg" style="max-width: 100%;height: auto;" /><!--画像の調整はここでもCSSでも可-->
	<br/>
	<span data-load-nickname="1"><span class="user-name-nickname">プロフィール名<br><i class="badge-type-pro">はてなブログPro</i></span></span><!--名前とPROアイコン-->
	</div><!--bottom余白用囲いここまで-->
	<p class="about-blog">ブログの説明</p><!--ブログの説明（ピンクの囲い）-->
	</div><!--真ん中寄せここまで-->
	<h3>
	ブログ名の由来
	</h3>
	<p>由来の説明</p>
	<h3>
	主なカテゴリー
	</h3>
	<div style="margin-bottom: 20px;"><!--bottom余白用囲い-->
	<ul class="widget-menu">
	<li> <a href="カテゴリー１のURL"><i class="fa fa-wrench" style="color: #ff9191"></i>カテゴリー１</a></li>
	<li> <a href="カテゴリー２のURL"><i class="fa fa-graduation-cap" style="color: #ffb776"></i>カテゴリー２</a></li>
	<li> <a href="カテゴリー３のURL"><i class="fa fa-line-chart" style="color: #92ceff"></i>カテゴリー３</a></li>
	<li> <a href="カテゴリー４のURL"><i class="fa fa-thumbs-up" style="color: #77d477"></i>カテゴリー４</a></li>
	</ul>
	</div>
	<br/>
	<h2>
	あなたについて
	</h2>
	<p>説明</p>
	<h3>
	小見出し
	</h3>
	<p>説明</p>
	<h3>
	小見出し
	</h3>
	<p>説明</p>
	<br>
	<div class="profile-center"><!--真ん中寄せ、フォローエリア-->
	<span class="sns-btn__title">◯◯が気になる方<br>フォローはこちら</span>
	<ul class="sns-follow">
	<!-- はてブのボタン -->
	<li class="hatena-btn"><a href="http://blog.hatena.ne.jp/はてなID/登録時のはてなブログURL/subscribe" target="blank"><i class="blogicon-hatenablog"></i></a></li>
	<!-- Twitterのボタン -->
	<li class="twitter-btn"><a href="https://twitter.com/TwitterID" target="blank"><i class="fa fa-twitter "></i></a></li>
	<!-- Feedlyのボタン -->
	<li class="feed-btn"><a href="https://feedly.com/i/subscription/feed/実際のブログURL/feed" target="blank"><i class="fa fa-rss fa-1x" aria-hidden="true"></i></a></li>
	<!-- ここまで -->
	</ul>
	</div><!--真ん中寄せ、フォローエリアここまで-->
	<br>
	<h2>
	ブログ運営状況
	</h2>
	<!-- 以下、CSS -->
	<style type="text/css">
	.entry-content dd, .entry-content ol, .entry-content ul {margin: 0;padding: 0;}
	.entry-content a {text-decoration:none;}
	/*プロフィールエリア、全体真ん中寄せ*/
	.profile-center {
	text-align: center;
	margin-bottom: 15px;
	}
	.page-about h2 {
	border-bottom: 5px solid #8EDAE5;
	text-align: center;
	padding: 1em 4% 5px 4%;
	margin: 1em -2% 1em -2%;
	}
	.page-about h3 {
	border-left: 5px solid #8EDAE5;
	padding: 0.5rem;
	margin: 1.5em 0 1em 0;
	}
	/*ピンクで囲ったブログの説明箇所*/
	.page-about .about-blog {
	background-color: #fff;
	padding: 10px 12px;
	border-radius: 6px;
	border: 2px solid;
	color: #F99695;
	font-size: 1.2em;
	}
	/* 主なカテゴリーエリア */
	.entry-content .widget-menu {
	text-align: center;
	list-style-type: none;
	margin: 0;
	overflow: hidden;
	padding: 5px;
	}
	.widget-menu li {
	float: left;
	width: 46%;
	border: solid 2px #676F74;
	font-size: 12px;
	vertical-align: middle;
	background: #FFF;
	list-style-type: none;
	padding: 10px;
	}
	.widget-menu li:hover{
	box-shadow: 0 10px 15px -5px rgba(0,0,0,.15),0 0 5px rgba(0,0,0,.1);
	transform: translateY(-3px);
	transition: 0.3s;
	background: rgba(238,238,238,.4);
	}
	.widget-menu li:nth-child(even) {
	border-left: solid 0px #676F74;
	}
	.widget-menu li:last-child, .widget-menu li:nth-last-child(2) {
	border-top: 0;
	}
	.widget-menu .fa {
	display: block;
	font-size: 3em;
	} .widget .follow_btn {
	margin-top: 0;
	text-align: center;
	}
	/***aboutページ、フォローボタンまわり***/
	/*＼フォローはこちら／タイトルまわり*/
	.page-about .entry-content .sns-btn__title {
	display: inline-block;
	position: relative;
	color: #676F74;
	font-size: 22px;
	font-weight: bold;
	letter-spacing: 1px;
	margin-bottom: 20px;
	line-height: 1.3;
	padding: 0px 30px;
	}
	.page-about .entry-content .sns-btn__title:before,
	.page-about .entry-content .sns-btn__title:after {
	display: inline-block;
	position: absolute;
	top: 50%;
	width: 45px;/*＼／の長さ調整*/
	height: 3px;/*＼／の太さ調整*/
	border-radius: 3px;
	background-color: #676F74;
	content: "";
	}
	/*左の＼の角度調整*/
	.page-about .entry-content .sns-btn__title:before {
	left: 0;
	-webkit-transform: rotate(50deg);
	transform: rotate(50deg);
	}
	/*右の／の角度調整*/
	.page-about .entry-content .sns-btn__title:after {
	right: 0;
	-webkit-transform: rotate(-50deg);
	transform: rotate(-50deg);
	}
	/*要らないモノ削除*/
	.page-about .entry-content ul li::before, .entry-content ul ul li::before {
	display: none;
	}
	/*フォローボタンエリア*/
	ul.sns-follow {
	text-align: center;
	padding: 0;
	}
	ul.sns-follow li{
	display: inline-block;
	height: 45px;
	vertical-align: middle !important;
	margin-bottom: 0;
	padding: 0 5px 0 5px !important;
	}
	ul.sns-follow li a {
	display: block;
	width: 45px;
	height: 45px;
	border-radius: 50px;
	color: #FFFFFF;
	}
	/*Twitterボタン*/
	ul.sns-follow li.twitter-btn a{
	background: rgba(29,161,242,0.7);
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	line-height: 47px;
	transition: .3s;
	font-size: 160%;
	}
	ul.sns-follow li.twitter-btn a:hover {
	opacity: 1;
	box-shadow: 0 10px 20px -4px rgba(0,0,0,.25);
	transform: translateY(-3px);
	}
	/*Facebookボタン*/
	ul.sns-follow li.facebook-btn a{
	background: rgba(59,89,153,0.7);
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	line-height: 47px;
	transition: .3s;
	font-size: 160%;
	}
	ul.sns-follow li.facebook-btn a:hover {
	opacity: 1;
	box-shadow: 0 10px 20px -4px rgba(0,0,0,.25);
	transform: translateY(-3px);
	}
	/*hatenaボタン*/
	ul.sns-follow li.hatena-btn a{
	background: #676F74;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	line-height: 47px;
	transition: .3s;
	font-size: 160%;
	}
	ul.sns-follow li.hatena-btn a:hover {
	opacity: 1;
	box-shadow: 0 10px 20px -4px rgba(0,0,0,.25);
	transform: translateY(-3px);
	}
	/*Feedlyボタン*/
	ul.sns-follow li.feed-btn a{
	background: rgba(108,198,85,0.7);
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	line-height: 47px;
	transition: .3s;
	font-size: 160%;
	}
	ul.sns-follow li.feed-btn a:hover {
	opacity: 1;
	box-shadow: 0 10px 20px -4px rgba(0,0,0,.25);
	transform: translateY(-3px);
	}
	/*スマホでの制御*/
	@media screen and (max-width: 480px){
	.page-about .entry-inner {
	background: ;
	padding: ;
	margin: 0px auto 3em;
	width: 92%;
	}
	.widget-menu li {
	width: 40%;
	}
	}
	</style>

view raw オークニaboutページテンプレ hosted with ❤ by GitHub

正直、めっちゃ長いですｗ
あくまで参考程度に。ガチでパクりたい人は、どうぞご自由に。

一応、注意点ぽいところだけ説明をすると…

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ページテンプレを新規のブログにぶち込んだイメージがこんな感じです。

画像を開く

うむ、完全に再現できてますね！ｗ
素晴らしい！！

ちなみに今回のカスタマイズでは、みんな大好きSANGOっぽいフワっとアニメーションとかも特別に盛り込んでいるので、是非フワフワさせてみて下さい！😂

最後に

冒頭で申し上げた通り、aboutページは新規ユーザー獲得のため、そしてブランディングのために必須のページと言えます。

特に、企業からブロガーへ何かを依頼するなんて時は、確実にaboutページでブログの、そしてあなたの概要をチェックしています。

その他大勢のはてなブロガーはみんな面倒くさがって手を付けない所。

だからこそ！

今のうちにやるべきだと思いませんか？😏

 

有名なはてなブロガー、ポジ熊さんも大事って言ってたさ〜
プロフィールのこだわりはブログファンを増やすために必要 - ポジ熊の人生記