はてなブログのプロフィール欄をシンプルなデザインに変えてみる

はてなブログのサイドバーにあるプロフィール欄ですが、少し画像を大きくしたいと思って簡単にHTMLが吐き出せるツールを作ってみました。

手順1　スタイルシートをコピペする

スタイルシートのサンプルはこちら「管理画面」→「デザイン」→「カスタマイズ」 →「デザインCSS」へコピペ。

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;
}

手順2　HTMLをコピペする

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

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

ニックネーム：

説明文：

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

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

入力項目について補足

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

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

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

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

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

プロフィールの画像URLを変更します。

画像は「はてなフォトライフ」に利用したいプロフィールの画像をアップロードして、その画像のURLを入力します。

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

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

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

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

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

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

※画像は利用したいサイズの少し大きめぐらいにしておくとピンボケせずに綺麗に表示されます。

3. ニックネーム

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

4. ブログの説明文

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

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

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

読者登録のボタンは、

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

追記

プロフィール欄は今回と次回の2回に分けてお送りしています。

次回はプロフィール欄にSNSのボタンをつけるです。

次回の記事：サイドバーのプロフィール欄にSNSのアイコンを作る - monoのメモ帳

雑感

Javascriptを勉強中で、テキストを取得して吐き出すだけなのにちょっと難しかったです。

手順1 スタイルシートをコピペする

手順2 HTMLをコピペする