やりました。
もしかしたら、現状のはてなブログ界隈で一番オシャレかもしれないプロフィール欄。
このカスタマイズをパクれば、みなさんのブログも一気にトレンディになっちゃうアルよ。
個人個人でちょっと調整が必要なところもアルけど、実装自体はHTMLとCSSのコピペだけなんで簡単に出来ちゃうアルよ。
それでは、さっそく本題へ。
SANGO風プロフィールの完成イメージ
控えめに言ってもオシャレですね!笑
まさかこれがあの、ダサくて有名なはてなブログのプロフィールだなんて…!そんな声が今にも聞こえてきそうです(耳をすませば…)
PCでご覧の方は、すでにサイドバーに全く同じデザインで置いてあるのでスグに確認できると思います。
背景画像&アイコン被せが今風
これは、WordPressのテーマ「SANGO」がやっている特徴的なデザインですね。ただ、それだけに限らず「背景画像&丸アイコン」というのは、そもそも今のプロフィールのトレンドですね!
たとえばTwitter
ちょっと僕の場合背景画像もアイコンも白で見にくいですがwww
たとえばFacebook
丸アイコンではありませんが、これも背景画像にアイコン被せですね!
たとえばLINE
これは完全に今回のプロフィールと近いカタチですね!
その他にも、SNSやアカウントを要するアプリ、たくさんのところでこの背景画像&アイコン被せが今のトレンドとなっているのはみなさんもお気づきかと!
スポンサーリンク
カスタマイズ概要
はてなブログのサイドバーには、元々プロフィールが備わっております。
が
それはお世辞にもオシャレとは言い難いです。しかも、それをHTMLもろともカスタマイズするのは不可能です。
ですので、ここは伝家の宝刀「自作HTML」でプロフィールを0から構築します。
とは言っても、やることはコピペと微調整だけです。
用意するもの
・背景用の横長画像
(特に縦横比やサイズの指定はなし)
・アイコン用の正方形画像
・「Font Awesome」のアイコン読み込み。(こちらの記事を参考に→【アイコン】はてなブログで「Font Awesome」をサクッと使う方法 - オークニズム)
CSSのコピペ
それでは、まずCSSのコピペをしましょう。
場所は
管理画面より、「デザイン」→「カスタマイズ」→「デザインCSS」です。
コードはこちら
/* サイドバー、自作プロフィール */ | |
/*土台の余白*/ | |
div#custom_html-2 { | |
padding: 0 !important; | |
} | |
/*SANGO風プロフィール*/ | |
.sidebar-profile { | |
width: 100%; | |
font-size: 1.2em;/*自由変更*/ | |
background-repeat: no-repeat; | |
background-size: 100% auto; | |
background-image: url(https://cdn-ak.f.st-hatena.com/images/fotolife/a/a24o92/20180202/20180202170103.jpg);/*ここに背景画像のURL*/ | |
padding-top: 35%;/*ここで、アイコンの被さり具合を調整(上からどれくらい離すか)*/ | |
} | |
/*画面横幅が576px以上、991px以下のサイズ*/ | |
@media (max-width: 991px) and (min-width: 576px){ | |
.sidebar-profile { | |
padding-top: 35%;/*ここで、アイコンの被さり具合を調整(上からどれくらい離すか)*/ | |
} | |
} | |
/*画面横幅が575px以下のサイズ*/ | |
@media only screen and (max-width: 575px){ | |
.sidebar-profile { | |
padding-top: 35%;/*ここで、アイコンの被さり具合を調整(上からどれくらい離すか)*/ | |
} | |
} | |
.profile-center{ | |
text-align: center; | |
margin-bottom: 15px;/*自由変更*/ | |
} | |
.profile-center a { | |
text-decoration: none; | |
} | |
/*プロフィール画像*/ | |
#box2 .profile-center .profileimg{ | |
width: 35%;/*自由変更*/ | |
height: auto; | |
border-radius: 50%; | |
border: solid 3px #F99695;/*自由変更*/ | |
background: #fff;/*自由変更*/ | |
box-shadow: 0 2px 3px rgba(0,0,0,.2), 0 2px 3px -2px rgba(0,0,0,.15); | |
} | |
#box2 .profile-center .profileimg: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: ; | |
} | |
@media only screen and (max-width: 575px){ | |
.profileimg{ | |
width: 80px;/*自由変更*/ | |
} | |
} | |
/*名前*/ | |
.profile-name{ | |
font-size: 1.2em;/*自由変更*/ | |
font-weight: bold;/*自由変更*/ | |
color: #F99695;/*自由変更*/ | |
} | |
/*「詳しいプロフィールを見る」まわり*/ | |
.profile-center.more{ | |
margin: 1em 1em 2em;/*自由変更*/ | |
} | |
.profile-center.more a{ | |
color: #fff;/*自由変更*/ | |
} | |
/*\フォロー/*/ | |
.sns-btn__title { | |
display: inline-block; | |
position: relative; | |
padding: 0 25px; | |
color: #676F74;/*自由変更*/ | |
font-size: 22px;/*自由変更*/ | |
font-weight: bold;/*自由変更*/ | |
line-height: 1;/*自由変更*/ | |
letter-spacing: 1px;/*自由変更*/ | |
} | |
.sns-btn__title:before, | |
.sns-btn__title:after { | |
display: inline-block; | |
position: absolute; | |
top: 50%; | |
width: 20px; | |
height: 3px; | |
border-radius: 3px; | |
background-color: #676F74;/*自由変更*/ | |
content: ""; | |
} | |
.sns-btn__title:before { | |
left: 0; | |
-webkit-transform: rotate(50deg); | |
transform: rotate(50deg); | |
} | |
.sns-btn__title:after { | |
right: 0; | |
-webkit-transform: rotate(-50deg); | |
transform: rotate(-50deg); | |
} | |
/*フォローボタン各種*/ | |
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); | |
} | |
/* ふわっとボタン */ | |
.float-btn { | |
display: inline-block; | |
margin: .5em 0; | |
padding: .4em 1.3em; | |
border-radius: 3px; | |
box-shadow: 0 2px 3px rgba(0,0,0,.2), 0 2px 3px -2px rgba(0,0,0,.15); | |
color: #fff; | |
text-decoration: none; | |
vertical-align: middle; | |
transition: .2s ease-in-out; | |
background-color: #F99695; | |
} | |
.float-btn: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: ; | |
} |
ちょっと長いですが、怯えなくて大丈夫ですw
基本はコピペでおkでして、変更点というと…
12行目:ここに背景画像が入るので、既存のURLを消して自分のURLを挿入。
(背景画像のURLを取得する簡単な方法は、いったん記事作成で画像を挿入し、それをHTML編集モードで見ればURLが生成されてます!)
13,18,24行目:ここで、被さるアイコンが上からどれくらい離れるか調整しています。なお、18行目と24行目は、タブレット/スマホの場合の調整です。
※追記※
173行目:display: inline-block;の場合回り込むケースがあるので、display: block;の方が良いと思います!
大事な変更点はこれくらいですかね!
あとは、色とか文字の大きさとか、余白の調整とかとか、ご自身で確認しながらカスタマイズして頂ければ幸いですm(_ _)m
HTMLの挿入
次に、サイドバーへHTMLの挿入です。
場所は
管理画面より、「デザイン」→「カスタマイズ」→「サイドバー」です。
新規に「モジュールを追加」で「HTML」を選択しましょう。
タイトルは未記入でOK。本文に以下をコピペしましょう。
コードはこちら
<!-- タイトル --> | |
<div class="hatena-module-title hatena-module-title-profile"> | |
プロフィール | |
</div> | |
<div class="hatena-module-body custom-profile"> | |
<div class="sidebar-profile"> | |
<div class="profile-center"> | |
<a href="http://www.okuni.me/about" class="profile-icon-link"> | |
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/a24o92/20180202/20180202174644.png" class="profileimg" /> | |
</a> | |
<br/> | |
<a href="http://www.okuni.me/about" class="hatena-id-link" style="font-weight: bold;font-size: 1.4em;line-height: 1;"> | |
<span data-load-nickname="1"> | |
<span class="user-name-nickname">オークニ<br> | |
<i class="badge-type-pro">はてなブログPro</i><!-- proじゃなければ削除 --> | |
</span> | |
</span> | |
</a> | |
<p>はてなブログでのカスタマイズやブログ運営ノウハウをメインに、オークニが気になったモノ、コトをシェアするブログ。</p> | |
<div class="profile-center more float-btn"><a href="http://www.okuni.me/about" class="">全く詳しくないプロフィール</a></div> | |
<span class="sns-btn__title dfont">フォロー</span> | |
<ul class="sns-follow"> | |
<!-- はてブのボタン --> | |
<li class="hatena-btn"> | |
<a href="http://blog.hatena.ne.jp/a24o92/oretopi.hatenablog.jp/subscribe" target="blank"> | |
<i class="blogicon-hatenablog"></i> | |
</a> | |
</li> | |
<!-- Twitterのボタン --> | |
<li class="twitter-btn"> | |
<a href="https://twitter.com/okuni_jiwaru" target="blank"> | |
<i class="fa fa-twitter "></i> | |
</a> | |
</li> | |
<!-- Feedlyのボタン --> | |
<li class="feed-btn"> | |
<a href="https://feedly.com/i/subscription/feed/http://www.okuni.me/feed" target="blank"> | |
<i class="fa fa-rss fa-1x" aria-hidden="true"></i> | |
</a> | |
</li> | |
<!-- ここまで --> | |
</ul> | |
</div> | |
</div> | |
</div> |
こちらはCSSと違い、URLなどもあるので、注意して変更してください。変更点は以下の通りです。
9行目:aboutページのURL
10行目:アイコン用画像のURL
13行目:aboutページのURL
15行目:名前
16行目:Proじゃなければ丸ごと削除
20行目:プロフィール説明文
21行目:aboutページのURL/ボタンに表示される誘導文
26行目:読者登録URL
32行目:Twitter URL
38行目:Feedly URL
これら全部、デフォルトで僕の情報が入っておりますので、それらをご自身の情報に変更してください。
また、別途オシャレなaboutページについてや、上記と似た箇所のより詳しい変更説明については以下のページを参考にして頂ければ!
【コピペ歓迎】はてなブログのダサいaboutページを見やすくオシャレにカスタマイズ! - オークニズム
管理画面で実際の表示を見ながら調整
最後に、「変更を保存する」を押すまでは実際に反映されませんので、ここで見栄えを調整してもらえれば宜しいかと!
あ!
あと、新規プロフィールが作れたら、最後の最後は既存のプロフィールを消しておきましょう!w
まとめ
どうでしょう?ちゃんとプロフィールがオシャレになりましたか?!
おそらく、テーマや既存のCSSによって再現性が変わってくるかと思います。というか確実にw
もし、なんか変や〜😭 とかありましたら、Twitterにてご連絡いただければわりと即レスでご対応できるかと!
ついでにフォローもしてくれたら嬉しいかなっ😂 w
それでは!本日はこのへんで!