【はてなブログ】プロフィールのデザインをカスタマイズする方法

今回は、はてなブログでプロフィールをカスタマイズする方法を紹介します。

PC版のカスタマイズ方法とスマホ版のカスタマイズ方法の2種類を紹介します。

プロフィールカスタマイズ

ちょっと、そこのダメガネ！

ダメガネとは聞き捨てならないわね！

それでなんだね？シャルよ

f:id:UrushiUshiru:20180421011219j:plain

私のブログのプロフィールがあんたの画像になってんだけどどういうことなの？

www.charlottehibi.com

デフォルトの設定でこうなってるんですな

仕方ないね

仕方なくないわよ！どうにかしなさいよ！！

どうにかってどういうことなの？

プロフィールを私の画像に直しなさいってことよ！！

PC版のプロフィールカスタマイズ

f:id:UrushiUshiru:20180420213317j:plain

上の画像のようなサイドバーのプロフィールを設定していきます。

<center><div class="shadow"><img src="画像のURL" width="280" height="280"></div></center>
<p><strong><a href="https://charlottehibi.hatenadiary.jp/entry/about">シャル（シャルロッテ）</a></strong></p>
<p>このブログの主人公の金髪碧眼美少女。</p>
<p>天邪鬼な性格で人前な中々素直になれないという典型的なツンデレキャラ。</p>

<!--フォローボタン-->
<div class="follow-btn" >
<span style="font-size:80%">フォローする</span><br>
<a class="hatena" href="https://blog.hatena.ne.jp/UrushiUshiru/charlottehibi.hatenadiary.jp/subscribe" target="_blank"><i class="blogicon-hatenablog lg"></i>         <span class="text-small">はてな</span></a>
<a class="twitter" href="https://twitter.com/intent/follow?screen_name=UrushiUshiru" 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/https://charlottehibi.hatenadiary.jp/feed" target="_blank"><i class="blogicon-rss lg"></i>         <span class="text-small">Feedly</span></a>
</div>

上記のコードを使用します。

① 2,3行目の「～」で囲われた部分は本文ですので、プロフィールに描きたいことを書きましょう。

「～」は増やしても減らしても構いません。

② 9～11行目を以下のように修正します。

9行目の「UrushiUshiru/charlottehibi.hatenadiary.jp」を、「(自分のはてなID)/(自分のブログのURLの「http://」を除いた部分)」に変更
10行目の「UrushiUshiru」を「自分のTwitterアカウントの@を抜いた部分」に変更
11行目の「https://charlottehibi.hatenadiary.jp」を「自分のブログのURL」に変更

③ 以下のサイトの「サイドバーに入れる」の箇所のCSSコードをそのままコピーします。

上記のフォローボタンのコードも以下のサイトを参考にしてます。

www.yukihy.com

f:id:UrushiUshiru:20180416005536j:plain

④ はてなブログの管理画面にアクセスして、「デザイン」⇒「①スパナマーク」⇒「②デザインCSS」に上記のコードを貼り付けます。

貼り付けたら「変更を保存する」をクリックして保存します。

f:id:UrushiUshiru:20180420215736j:plain

⑤ 次に「スパナマーク」⇒「サイドバー」⇒「+モジュール追加」をクリックします。

f:id:UrushiUshiru:20180420215553j:plain

⑥ 「ブログの説明」の枠に先程の修正したHTMLコードを貼り付け、「適用」をクリックします。

※元からある「プロフィール」は削除してください。

f:id:UrushiUshiru:20180420221132j:plain

⑦「変更を保存する」をクリックして設定を保存したら完了です。

スマホ版のプロフィールカスタマイズ（PRO）のみ

f:id:UrushiUshiru:20190316002019j:plain

上の画像のようにスマホ版のプロフィールもカスタマイズしていきます。

ただし、はてなブログPROのみ設定変更が可能です。無料会員の方はカスタマイズできません。

<style type="text/css">
/*プロフィール消す*/
       .hatena-module-title{
               display:none;
        }
       .profile-wrapper{
               display:none;
        }
</style>

① 上記のコードをコピーします。

元からあるプロフィールを消します。

f:id:UrushiUshiru:20180416171142j:plain

② はてなブログの管理画面にアクセスして、「デザイン」⇒「①スマホマーク」⇒「②タイトル下」に上記コードを貼り付けます。

貼り付けたら「変更を保存する」をクリックして保存します。

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

    <div class="profile-description">
       <p><center><div class="shadow"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/U/UrushiUshiru/20180323/20180323190133.jpg" width="280" height="280"></div></center><br />
       <p><strong><a href="https://charlottehibi.hatenadiary.jp/entry/about">シャル（シャルロッテ）</a></strong></p><p>このブログの主人公の金髪碧眼美少女。</p><p>天邪鬼な性格で人前な中々素直になれないという典型的なツンデレキャラ。</p></p>

        <!-- フォローボタン -->
        <center>
        <div class="content-inner-follow-buttons" >
        <div class="follow-title"><span style="font-size: 8px">フォローする</span></div>
        <a class="hatena" href="https://blog.hatena.ne.jp/UrushiUshiru/charlottehibi.hatenadiary.jp/subscribe" onclick="window.open('https://blog.hatena.ne.jp/UrushiUshiru/charlottehibi.hatenadiary.jp/subscribe', '', 'width=500,height=400'); return false;">
        <i class="blogicon-hatenablog lg"></i><br>
        <span class="inner-text">Hatena</span>
        </a>

        <a class="twitter" href="https://twitter.com/intent/follow?screen_name=UrushiUshiru" target="_blank">
        <i class="blogicon-twitter lg"></i><br>
        <span class="inner-text">Twitter</span>
        </a>

        <a class="feedly" href="http://feedly.com/i/subscription/feed/https://charlottehibi.hatenadiary.jp/feed" target="_blank">
        <i class="blogicon-rss lg"></i><br>
        <span class="inner-text">Feedly</span>
        </a>

        </div>
        </center>

    </div>

</div>



<style type="text/css">

SNSフォローボタンのCSS

</style>

③ 上記のコードを以下のように変更します。

4行目の「https://cdn-ak.f.st-hatena.com/images/fotolife/U/UrushiUshiru/20180323/20180323190133.jpg」に表示させたい画像のURL。
5行目の「https://charlottehibi.hatenadiary.jp/entry/about」に表示させたいURL（ブログのaboutページ等）。
5行目の～で囲われた部分にプロフィールに書きたいこと。
11行目の「UrushiUshiru/charlottehibi.hatenadiary.jp」を、「(自分のはてなID)/(自分のブログのURLの「http://」を除いた部分)」に変更
16行目の「UrushiUshiru」を「自分のTwitterアカウントの@を抜いた部分」に変更
21行目の「https://charlottehibi.hatenadiary.jp」を「自分のブログのURL」に変更