【はてブロカスタマイズ】プロフィールを見やすくカスタマイズしてみた

f:id:sasagin:20160424223601j:plain

こんばんわ。佐伯です。

はてなブログのデフォルトのプロフィールってなんか寂しいですよね。
小さい画像と、読者になるボタンしかないのでなんか物足りないです。

なので今日は下の画像のように、ちょっとスタイリッシュにはてなブログのプロフィールをカスタマイズしてみたいと思います。
f:id:sasagin:20160424230804p:plain

参考にした記事

www.keirinbu.com こちらの記事からは全体的なHTMLを引用させていただきました。

www.yukihy.com こちらの記事からはプロフィール欄にツイッターのフォローボタンの設置の仕方を引用させていただきました。

とてもわかりやすい記事ありがとうございます。

プロフィール画像の準備

まずはプロフィール画像を準備する必要があります。
プロフィールの画像ははてなフォトライフにアップロードした画像を使用します。

プロフィール画像のURL抽出は以下の記事で詳しく説明されています。
tar.blogru.me 簡単に説明すると
１．はてなフォトライフにアップロードした画像をブラウザで開く

２．画像をブラウザで開いた状態でブックマークバーに保存した「はてなフォトライフ2HTML」をクリックする

３．URLがポップアップで表示されるのでそれをコピペ

こんな感じのながれとなっています。

HTMLコード

プロフィールの部分のHTMLとフォローボタンの部分のHTML２つに分けて説明させていただきます。
最終的にはこの２つのコードをサイドメニューのHTMLに記述してください。
コピペして少し自分の情報を加えるだけで使えるコードとなっています。

プロフィール

<span class ="id">
<a href="http://www.no-overtime-day.com/about" class = "hatena-id-link"><span data-load-nickname="1" data-user-name="自分のはてなID">id:自分のはてなID</span></a>
</span>

<div class="hatena-module hatena-module-html">

<div class="hatena-module-body">
<p><img src="はてなフォトライフにアップロードしてる画像URL" alt = "ブログのタイトル名" /></p>

<div class="hatena-module-title">プロフィールの説明を書く</div>

２行目のURLやはてなIDは自分のものに改変して使用してください。ちなみに、プロフィールのURLはトップページURLの最後に/aboutをつけます。

７行目の"はてなフォトライフにアップロードしてる画像URL"は先ほど抽出した画像URLを貼り付けます。

これでプロフィールの型枠は完成です。

フォローボタン

フォローボタンのHTMLはこちら

<!--フォローボタン-->
<div class="follow-btn" >
<span style="font-size:80%">フォローする</span><br>
<a class="hatena" href="http://blog.hatena.ne.jp/sasagin/www.no-overtime-day.com/subscribe" onclick="window.open('http://blog.hatena.ne.jp/sasagin/www.no-overtime-day.com/subscribe', '', 'width=500,height=400'); return false;"><i class="blogicon-hatenablog lg"></i>         <span class="text-small">はてな</span></a>
<a class="twitter" href="https://twitter.com/intent/follow?screen_name=sasacamera" target="_blank"><i class="blogicon-twitter lg"></i>         <span class="text-small">Twitter</span></a>
<a class="feedly" href="http://feedly.com/i/subscription/feed/http://www.no-overtime-day.com/feed" target="_blank"><i class="blogicon-rss lg"></i>         <span class="text-small">Feedly</span></a>
</div>

上記のコードをコピペして自分のブログ用に改変をします。
それぞれの改変の仕方は以下で説明をしています。

４行目のhrefの部分のコードは以下のような構成になっています。

<href="http://blog.hatena.ne.jp/はてなID/自分のはてなブログのトップURL/subscribe">

５行目のhrefの部分のコードは以下のような構成になっています。

<href="https://twitter.com/intent/follow?screen_name=自分のツイッターID">

６行目のhrefの部分のコードは以下のような構成になっています。

<href="http://feedly.com/i/subscription/feed/自分のはてなブログのトップURL/feed">

フォローボタンのCSSはこちら（デザインCSSに記述する）

.follow-btn{
    width: 100%;
}
.follow-btn a {
    display: block;
    height: 40px;
    line-height: 40px;
    width: 100%;
    margin-bottom: 6px;
    border-radius: 5px;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
}
.follow-btn .hatena {
    color: #3D3F44;
    border: 2px solid #3D3F44;
    background: #ffffff; 
}
.follow-btn .twitter {
    color: #00ACEE;
    border: 2px solid #00ACEE;
    background: #ffffff; 
}
.follow-btn .feedly { 
    color: #70CA3B;
    border: 2px solid #70CA3B;
    background: #ffffff;
}
.follow-btn .hatena:hover {
    color: #ffffff;
    background: #3D3F44;
    transition: all .3s;
}
.follow-btn .twitter:hover {
    color: #ffffff;
    background: #00ACEE;
    transition: all .3s;
}
.follow-btn .feedly:hover {
    color: #ffffff;
    background: #70CA3B;
    transition: all .3s;
}
.text-small{
    font-size: 10px;
}

フォローボタンのデザインは参考にした記事にいろいろのっていますのでぜひ参照してみてくださいね。

最後に

これでプロフィールがすこしスタイリッシュになりました。
底辺プログラマーに似つかわしくないプロフィールになってすこし焦っています。

個人的に気になるのは、はてなブログのフォローボタンを押すとポップアップ画面が左上に出てしまう点ですね。
ツイッターは画面中央部にポップアップがでるのに…

引き続き調査をしてわかり次第追記をしたいと思います。
また、知っている方いましたらお手数ですけどおしえてもらえれば幸いです…