【ツール】はてなブログのプロフィールをカスタマイズ

はてなブログのサイドバーにあるプロフィール欄をシンプルなデザインに変更したかったので、コピペで作成できるツールを作ってみました。

この方法は、サイドバーのHTML編集を使ってプロフィール欄を自作する方法です。

やりたいこと

• プロフィール欄をシンプルなデザインにしたい
• プロフィール画像を少し大きくしたい
• 画像のピンボケが気になる
• プロフィール欄にSNSのフォローボタンをつけたい
• レスポンシブデザインを利用していてスマートフォン表示にしたときにプロフィール画像と文章を横並びにしたい

出来上がりのイメージはこちら

パソコンで表示した時

スマートフォンで表示した時

SNSのボタンのデザインをいくつか用意しましたので、お好みのものをご利用いただけるとうれしいです。

はてなブログのプロフィールをカスタマイズする手順

• 手順1　CSSを設定する
• 手順2　HTMLを設定する

手順1　CSSを設定する

SNSアイコンの形を変えて全部で6パターン作りました。

「パターンのCSSサンプル」をクリックするとCSSが表示されるので、適応させたいパターンのCSSをコピーして、 「管理画面」→「 デザイン」→「 カスタマイズ」 →「 デザインCSS」へコピペします。

パターン1

パターン1のCSSサンプル

.mo-author a:hover {
    opacity: .5;
}
a.mo-author-img {
    text-align: center;
    display: block;
}
.mo-author img {
    border-radius: 50%;
    box-shadow: 1px 2px 2px 2px rgb(0 0 0 / 20%);
}
a.mo-author-name {
    text-align: center;
    display: block;
    font-size: 1.2rem;
    color: #333;
    font-weight: bold;
    text-decoration: none;
}
.mo-author p {
    margin: 0.3em 0;
}
ul.mo-sns-btn {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
}
ul.mo-sns-btn li {
    margin: 2px;
    line-height: 40px;
    border-radius: 50%;
    height: 40px;
    width: 40px;
}
ul.mo-sns-btn a {
    color: #fff;
    background-color: #dfdfdf;
    display: block;
    padding: 0 10px;
    text-align: center;
}
li.mo-snsbtn-hatena a:hover {
    background-color: #000;
}
li.mo-snsbtn-twitter a:hover {
    background-color: #1DA1F2;
}
li.mo-snsbtn-facebook a:hover {
    background-color: #1877f2;
}
li.mo-snsbtn-insta a:hover {
    background-color: #f13f79;
}
li.mo-snsbtn-rss a:hover {
    background-color: #ee802f;
}
li.mo-snsbtn-mail a:hover {
    background-color: red;
}
@media (max-width: 767px) {
    .mo-author {
        display: flex;
        gap: 10px;
    }
    .mo-author-left {
    padding: 10px;
    }
    .mo-author img {
        border-radius: 50%;
        box-shadow: 1px 2px 2px 2px rgb(0 0 0 / 20%);
        height: 70px !important;
        width: 70px !important;
        max-width: none !important;
        min-width: auto !important;
        max-height: none !important;
        min-height: auto !important;
    }
}

パターン２

パターン2のCSSサンプル

.mo-author a:hover {
    opacity: .7;
}
a.mo-author-img {
    text-align: center;
    display: block;
}
.mo-author img {
    border-radius: 50%;
    box-shadow: 1px 2px 2px 2px rgb(0 0 0 / 20%);
}
a.mo-author-name {
    text-align: center;
    display: block;
    font-size: 1.2rem;
    color: #333;
    font-weight: bold;
    text-decoration: none;
}
.mo-author p {
    margin: 0.3em 0;
}
ul.mo-sns-btn {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
}
ul.mo-sns-btn li {
    margin: 2px;
    line-height: 40px;
    border-radius: 50%;
    height: 40px;
    width: 40px;
}
ul.mo-sns-btn a {
    color: #fff;
    background-color: #dfdfdf;
    display: block;
    padding: 0 10px;
    border-radius: 50%;
    text-align: center;
}
li.mo-snsbtn-hatena a:hover {
    background-color: #000;
}
li.mo-snsbtn-twitter a:hover {
    background-color: #1DA1F2;
}
li.mo-snsbtn-facebook a:hover {
    background-color: #1877f2;
}
li.mo-snsbtn-insta a:hover {
    background-color: #f13f79;
}
li.mo-snsbtn-rss a:hover {
    background-color: #ee802f;
}
li.mo-snsbtn-mail a:hover {
    background-color: red;
}
@media (max-width: 767px) {
    .mo-author {
        display: flex;
        gap: 10px;
    }
    .mo-author-left {
    padding: 10px;
    }
    .mo-author img {
        border-radius: 50%;
        box-shadow: 1px 2px 2px 2px rgb(0 0 0 / 20%);
        height: 70px !important;
        width: 70px !important;
        max-width: none !important;
        min-width: auto !important;
        max-height: none !important;
        min-height: auto !important;
    }
}

パターン３

パターン3のCSSサンプル

.mo-author a:hover {
    opacity: .7;
}
a.mo-author-img {
    text-align: center;
    display: block;
}
.mo-author img {
    border-radius: 50%;
    box-shadow: 1px 2px 2px 2px rgb(0 0 0 / 20%);
}
a.mo-author-name {
    text-align: center;
    display: block;
    font-size: 1.2rem;
    color: #333;
    font-weight: bold;
    text-decoration: none;
}
.mo-author p {
    margin: 0.3em 0;
}
ul.mo-sns-btn {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
}
ul.mo-sns-btn li {
    margin: 2px;
    line-height: 40px;
    height: 40px;
    width: 40px;
}
ul.mo-sns-btn a {
    color: #dfdfdf;
    background-color: #fff;
    display: block;
    padding: 0 10px;
    border-radius: 50%;
    text-align: center;
  border: solid 1px #dfdfdf;
}
ul.mo-sns-btn a:hover {
    color: #fff;
    border: none;
}
li.mo-snsbtn-hatena a:hover {
    background-color: #000;
}
li.mo-snsbtn-twitter a:hover {
    background-color: #1DA1F2;
}
li.mo-snsbtn-facebook a:hover {
    background-color: #1877f2;
}
li.mo-snsbtn-insta a:hover {
    background-color: #f13f79;
}
li.mo-snsbtn-rss a:hover {
    background-color: #ee802f;
}
li.mo-snsbtn-mail a:hover {
    background-color: red;
}
@media (max-width: 767px) {
    .mo-author {
        display: flex;
        gap: 10px;
    }
    .mo-author-left {
    padding: 10px;
    }
    .mo-author img {
        border-radius: 50%;
        box-shadow: 1px 2px 2px 2px rgb(0 0 0 / 20%);
        height: 70px !important;
        width: 70px !important;
        max-width: none !important;
        min-width: auto !important;
        max-height: none !important;
        min-height: auto !important;
    }
}

パターン４

パターン4のCSSサンプル

.mo-author a:hover {
    opacity: .7;
}
a.mo-author-img {
    text-align: center;
    display: block;
}
.mo-author img {
    border-radius: 50%;
    box-shadow: 1px 2px 2px 2px rgb(0 0 0 / 20%);
}
a.mo-author-name {
    text-align: center;
    display: block;
    font-size: 1.2rem;
    color: #333;
    font-weight: bold;
    text-decoration: none;
}
.mo-author p {
    margin: 0.3em 0;
}
ul.mo-sns-btn {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
}
ul.mo-sns-btn li {
    margin: 2px;
    line-height: 40px;
    height: 40px;
    width: 40px;
}
ul.mo-sns-btn a {
    color: #dfdfdf;
    background-color: #fff;
    display: block;
    padding: 0 10px;
    border-radius: 50%;
    text-align: center;
    border: solid 1px #dfdfdf;
}
ul.mo-sns-btn a:hover {
    color: #fff;
    border: none;
}
li.mo-snsbtn-hatena a {
    color: #000;
}
li.mo-snsbtn-hatena a:hover {
    background-color: #000;
}
li.mo-snsbtn-twitter a:hover {
    background-color: #1DA1F2;
}
li.mo-snsbtn-twitter a {
  color: #1DA1F2;
}
li.mo-snsbtn-facebook a:hover {
    background-color: #1877f2;
}
li.mo-snsbtn-facebook a {
    color: #1877f2;
}
li.mo-snsbtn-insta a:hover {
    background-color: #f13f79;
}
li.mo-snsbtn-insta a {
    color: #f13f79;
}
li.mo-snsbtn-rss a:hover {
    background-color: #ee802f;
}
li.mo-snsbtn-rss a {
    color: #ee802f;
}
li.mo-snsbtn-mail a:hover {
    background-color: red;
}
li.mo-snsbtn-mail a {
    color: red;
}
@media (max-width: 767px) {
    .mo-author {
        display: flex;
        gap: 10px;
    }
    .mo-author-left {
    padding: 10px;
    }
    .mo-author img {
        border-radius: 50%;
        box-shadow: 1px 2px 2px 2px rgb(0 0 0 / 20%);
        height: 70px !important;
        width: 70px !important;
        max-width: none !important;
        min-width: auto !important;
        max-height: none !important;
        min-height: auto !important;
    }
}

パターン５

パターン5のCSSサンプル

.mo-author a:hover {
    opacity: .7;
}
a.mo-author-img {
    text-align: center;
    display: block;
}
.mo-author img {
    border-radius: 50%;
    box-shadow: 1px 2px 2px 2px rgb(0 0 0 / 20%);
}
a.mo-author-name {
    text-align: center;
    display: block;
    font-size: 1.2rem;
    color: #333;
    font-weight: bold;
    text-decoration: none;
}
.mo-author p {
    margin: 0.3em 0;
}
ul.mo-sns-btn {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
}
ul.mo-sns-btn li {
    margin: 2px;
    line-height: 40px;
    height: 40px;
    width: 40px;
}
ul.mo-sns-btn a {
    color: #fff;
    display: block;
    padding: 0 10px;
    text-align: center;
}
li.mo-snsbtn-hatena a{
    background-color: #000;
}
li.mo-snsbtn-twitter a {
    background-color: #1DA1F2;
}
li.mo-snsbtn-facebook a {
    background-color: #1877f2;
}
li.mo-snsbtn-insta a {
    background-color: #f13f79;
}
li.mo-snsbtn-rss a {
    background-color: #ee802f;
}
li.mo-snsbtn-mail a {
    background-color: red;
}
ul.mo-sns-btn a:hover {
  opacity: .5;
}
@media (max-width: 767px) {
    .mo-author {
        display: flex;
        gap: 10px;
    }
    .mo-author-left {
    padding: 10px;
    }
    .mo-author img {
        border-radius: 50%;
        box-shadow: 1px 2px 2px 2px rgb(0 0 0 / 20%);
        height: 70px !important;
        width: 70px !important;
        max-width: none !important;
        min-width: auto !important;
        max-height: none !important;
        min-height: auto !important;
    }
}

パターン６

パターン6のCSSサンプル

.mo-author a:hover {
    opacity: .7;
}
a.mo-author-img {
    text-align: center;
    display: block;
}
.mo-author img {
    border-radius: 50%;
    box-shadow: 1px 2px 2px 2px rgb(0 0 0 / 20%);
}
a.mo-author-name {
    text-align: center;
    display: block;
    font-size: 1.2rem;
    color: #333;
    font-weight: bold;
    text-decoration: none;
}
.mo-author p {
    margin: 0.3em 0;
}
ul.mo-sns-btn {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
}
ul.mo-sns-btn li {
    margin: 2px;
    line-height: 40px;
    border-radius: 50%;
    height: 40px;
    width: 40px;
}
ul.mo-sns-btn a {
    color: #fff;
    display: block;
    padding: 0 10px;
    border-radius: 50%;
    text-align: center;
}
li.mo-snsbtn-hatena a{
    background-color: #000;
}
li.mo-snsbtn-twitter a {
    background-color: #1DA1F2;
}
li.mo-snsbtn-facebook a {
    background-color: #1877f2;
}
li.mo-snsbtn-insta a {
    background-color: #f13f79;
}
li.mo-snsbtn-rss a {
    background-color: #ee802f;
}
li.mo-snsbtn-mail a {
    background-color: red;
}
ul.mo-sns-btn a:hover {
  opacity: .5;
}
@media (max-width: 767px) {
    .mo-author {
        display: flex;
        gap: 10px;
    }
    .mo-author-left {
    padding: 10px;
    }
    .mo-author img {
        border-radius: 50%;
        box-shadow: 1px 2px 2px 2px rgb(0 0 0 / 20%);
        height: 70px !important;
        width: 70px !important;
        max-width: none !important;
        min-width: auto !important;
        max-height: none !important;
        min-height: auto !important;
    }
}

手順2　HTMLを設定する

プロフィールのURL(https://ブログのURL/about)：

画像URL(はてなフォトライフにアップロードしたURL)：

ニックネーム：

説明文：

読者登録のボタン(設定→詳細設定→読者になるボタン)：

はてなブログURL※「https://」は不要です：

はてなID：

Twitter：
https://twitter.com/intent/follow?screen_name=Twitterユーザー名

Facebook：
https://www.facebook.com/facebookページのユーザーネーム

Instagram：
https://www.instagram.com/ユーザーネーム

RSS：
https://ブログのURL/rss

Mail：
https://ブログの問い合わせフォームのURL

HTMLタグ：

入力欄をすべて記入した後に「click」を押すとHTMLタグが表示されます。表示されたHTMLタグを「管理画面」→「 デザイン」→「 カスタマイズ」 →「サイドバー」→「モジュールを追加」→「HTML」にコピペします。

入力項目について補足

1. プロフィールページのURL

プロフィールページのURLをコピーして「プロフィールページのURL」のところにペーストします。

aboutページを編集されていらっしゃる方はaboutページのURLをコピペします。(https://サイトURL/about)

aboutページを編集されていらっしゃらない方は、MyはてなのプロフィールURLをコピーして貼り付けます。

2. プロフィールの画像URL

ピンボケさせたくないので、プロフィール画像で利用する画像は「はてなフォトライフ」にアップロードした画像を利用します。

【はてなフォトライフについて】 はてな には、画像ファイルをアップロードできる「はてなフォトライフ」というのがあります。

無料プランだと毎月300MBまで、有料プラン「はてなブログPro」に加入すると、毎月3GBまで保存できます。

はてなフォトライフにアクセスしてログインします。

右上の「アップロード」をクリックしてドロップアンドドラッグでファイルをアップロードします。

マイフォトに戻って画像がアップロードされたかどうか確認します。

保存された画像をダブルクリックして開き、さらに画像を右クリックして「画像リンクをコピー」をクリックして、画像のURLをテキストエディタにメモしておきます。

※画像は利用したいサイズの少し大きめぐらい（150px × 150px）の正方形を用意してください。そうするとピンボケせずに綺麗に表示されます。

画像入りの解説はこちら→はてなフォトライフで画像をアップロードする方法

3. ニックネーム

ニックネームを入力します。

4. ブログの説明文

「ブログの説明文」を編集します。

5.読者の登録ボタンを追加する

はてなブロガーの方はお馴染みだと思いますが、はてなの読者を登録するボタンをプロフィールの中に設置できるようにしています。

設置する場合は、チェックボックスにチェックを入れてからコードを入力します。

読者登録のボタンは、

「管理画面」→「 設定」→「詳細設定」→「読者になるボタン」に表示されている記述をコピーして、先程の編集した記述の最後に追記します。

一応、SNSフォローボタンにもはてなの読者登録ボタンは作ったのですが、あまり気づいてもらえないので、デフォルトのボタンを設置できるようにしました。

いつものところにいつものボタンがあるのが一番クリックしてもらえるのですが、デザイン性は落ちてしまいます。

デザインを重視するのか、読者登録してもらえるのを重視するのか悩ましいところですね。

6.SNSアイコンの作成

アイコンを表示させたいSNSのチェックボックスにチェックを入れてURLを入力します。

はてなの読者登録のアイコンを作るためには、ブログのＵＲＬ（http://不要で最後のスラッシュも不要）とはてなIDが必要です。

はてなIDはプロフィールページのURLの/以降になります。

私の場合であれば、プロフィールページhttps://profile.hatena.ne.jp/lifelogtan/のlifelogtanがはてなIDになります。

以上です。