はてなブログでオリジナルのプロフィールモジュールを設定する方法について

はてなブログ純正プロフィールモジュールでは満足できない！

はてなブログの純正プロフィールモジュールも悪くはないのですが、人気ブロガーの多くがオリジナルのプロフィールモジュールを使用しています。

つまりHTMLモジュールで直接コードを書いているわけです。

Focusにおいても、一つだけですがデザインを予め用意しています。

是非利用していただければ幸いです。

（なお、CSSさえパクればどのテーマでも使えます）

オリジナルのプロフィールモジュールを設定する方法

それではオリジナルプロフィールモジュールの設定方法をご紹介します。

参考にしたのは「レポログ」さんのモジュールです。

www.sekkachi.com

Focusで使用している完成形見本

念のため完成形は次のようなものです。

上から

画像
ニックネーム(id)
自己紹介
フォローボタン

という構成です。

フォローボタンは

読者になる
ツイッターをフォローする
Feedlyでフォローする

の3つです。

1つだけ、2つというように変えることもできますが、その場合は不要なHTMLコードを削除したうえで、CSSにも少し手を加える必要があります。

① まずは画像を準備する

まずはプロフィール用の画像を用意しましょう。

サイズは幅300px以下となりますが、150～200pxくらいがおススメです。

高さは見た感じ不自然でない範囲で。

ちなみに見本はFaceQというアプリで作成しています。Windows8以降の人はPCでも作成できます(アプリストアで探しましょう）。

画像が用意出来たらはてなフォトライフにアップロードしてURLを取得しておいてください。

※URLははてなフォトライフ上で確認できますし、私のように面倒なタイプの人は一度自分のブログ内で画像を使用してそのソースコードを確認すればURLがわかります。

f:id:ganapati55:20171025152857p:plain

② デモサイトコードをコピペする

デモサイトのコードは以下の通りです。

<div class="profile">
<div class="profile-img" style="text-align:center;">
<span itemscope="" itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/g/ganapati55/20170707/20170707142113.jpg" alt="f:id:ganapati55:20170707142113j:plain" title="ganapati55" class="hatena-fotolife" itemprop="image"></span>
</div>
 <div class="id" style="text-align: center;">
<a href="http://focus3.hatenablog.com/about" class="hatena-id-link"><span data-load-nickname="1" data-user-name="ganapati55">id:ganapati55</span></a>
<a href="http://blog.hatena.ne.jp/guide/pro" title="はてなブログPro"><i class="blog-sprite-pro" /></i></a></div>
<div class="profile-description"style="font-size:0.8em;text-align:center;">
<p>起業して失敗⇒サラリーマンで再起<br/>「ワクワクこそ最強のライフハック」を合言葉に<br/>ワクワクするネタ探しの日々。<br/>最近の興味はデザイン思考</p>
</div>
<div id="profile-follow">
<a href="http://blog.hatena.ne.jp/はてなid/サイトURL/subscribe" ><div class="profile-hatena">Hatena</div></a>
<a href="https://twitter.com/intent/follow?screen_name=ツイッターID" target="_blank" ><div class="profile-twitter">Twitter</div></a>
<a href="http://feedly.com/i/subscription/feed/サイトURL/feed" target="_blank"><div class="profile-feedly">Feedly</div></a>
</div>
</div>

へたくそなコードですみません。。。上記コードをいちどテキストエディタに貼り付けてください。

HTMLモジュールに直接貼りつけると、作業がわかりにくいのでテキストエディタの方が良いです。しかもハイライト表示してくれるものだとさらに良いです。

③ 画像のURLを入れ替える

まずは画像のURLを入れ替えます。

見本のコードのなかの3行目にある

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/g/ganapati55/20170707/20170707142113.jpg" alt="f:id:ganapati55:20170707142113j:plain" title="ganapati55" class="hatena-fotolife" itemprop="image">

の中から、http://　以降　ganapati55"の部分を取得したURLと入れ替えます。

記事に画像を貼りつけてURLを確認した場合は上記の見本のコードと似た感じでURL等を取得できるのでわかりやすいかもしれません。

はてなフォトライフから取得した場合は、気にせずURLだけ貼りつけちゃって構いません。ただし必ず " と " の間に配置してください。

④ ニックネーム・id部分を入れ替える

ニックネームやidは見本の６・７行目が該当します。

この部分を入れ替える手っ取り早い方法は、はてなブログの純正プロフィールモジュールからChromeのデベロッパーツールを使ってソースを特定し、そのままコピペしてしまう方法です。

以下の画像を参考にして自分の純正プロフィールモジュールからソースを抜き出し入れ替えてみて下さい。

以下の部分からHTMLソースをコピーする。

f:id:ganapati55:20171025155357p:plain

そのうえで見本と比較しながら似たようなところを入れ替えてみてください。

そんなに難しくないはず。

⑤ 自己紹介文章を入れ替える

自己紹介文章は見本の9行目です。適当に入れ替えてください。

HTMLタグの打ち方がわからないときはやはりブログの記事作成で一度作ってしまってHTMLコードを表示させてコピペすればよいかと思います。

⑥ フォローボタン部分を入れ替える

最後の入替はフォローボタン部分です。見本12～14行目ですが、見れば大体わかるかと思います。

注意事項としては

はてなブログの読者になる方でのサイトURLは「http://」は不要です。ドメインそのものを入力して下さい。

一方Feedlyではhttpからアドレスをしっかり入力して下さい。

⑦ HTMLモジュールにコピペ

入替が完了したらサイドバーの設定画面よりHTMLモジュール内にコードをコピペします。

⑧ 動作検証

最後に実際に読者に慣れるか、フォローできるか検証して、動作が確認できれ場完了です！！

最後にアドバイス

オリジナルプロフィールは見本をじっくり見ながら丁寧にコピペで入替すれば簡単にできます！

オリジナルプロフィールモジュールのCSS

テーマのCSS内に以下記載されています。Focus以外のテーマで使いたい人はどうぞ。

/*はてなニックネーム下線なし*/
.hatena-id-link,.comment-user-id{
    text-decoration:none;
}

/*HTMLサイドバーフォローボタン*/
#profile-follow {
    border-top: 1px solid #dcdcdc;
    border-bottom: 1px solid #dcdcdc;
    font-size: 0;
    margin-bottom: 20px;
}
.profile-hatena {
    border-right: 1px solid #dcdcdc;
    padding: 15px 0 13px;
    font-size: 15px;
    display: inline-block;
    width: calc(33%);
    text-align: center;
}

.profile-hatena::before {
    margin: -5px 0 0;
    font-size: 25px;
    content: "\f000";
    display: inline-block;
    font-family: blogicon;
    font-style: normal;
    font-weight: normal;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-right: 7px;
}
.profile-twitter {
    padding: 15px 0 13px;
    border-right: 1px solid #dcdcdc;
    font-size: 15px;
    display: inline-block;
    width: calc(33%);
    text-align: center;
}
.profile-twitter::before {
    margin: -5px 0 0;
    font-size: 25px;
    content: "\f035";
    display: inline-block;
    font-family: blogicon;
    font-style: normal;
    font-weight: normal;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-right: 7px;
}
.profile-feedly {
    padding: 15px 0 13px;
    font-size: 15px;
    display: inline-block;
    width: calc(32.5%);
    text-align: center;
}
.profile-feedly::before {
    margin: -5px 0 0;
    font-size: 25px;
    content: "\f04e";
    display: inline-block;
    font-family: blogicon;
    font-style: normal;
    font-weight: normal;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-right: 7px;
}
#profile-follow a {
    color: #454545;
}

.profile-hatena:hover,.profile-twitter:hover,.profile-feedly:hover{
    color: #977d3b;
}