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

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