Bloggerのサイドバーのプロフィールをカスタマイズする方法

byNatchan - 2023/09/04

0

Bloggerのサイドバーに載せるプロフィールをカスタマイズする方法を教えます。Bloggerとは言っていますが、はてなブログやFC2などでも多分使えます。ここに載せるHtml＆CSSコードはコピペOK！備忘録として残すので、説明はざっくりです。

Image Credit: Freepik

{tocify} $title={Table of Contents}

無料配布中！当サイトの運営者Natchanが制作したフリー素材を『イラストAC』にて無料でDLできちゃいます( ^o^)⊃―☆{codeBox}

カスタムプロフィールのコード

プロフィールの完成イメージ

まず、完成図はこんな感じ。姉妹サイトの方に実際に載せてるプロフィールです。Bloggerデフォルトのプロフィールはめちゃくちゃ微妙なので、こちらの記事を参考にしてカスタマイズしました。

ダッシュボード→レイアウトからHtmlガジェットを追加して下記のコードをコピペしてください。

Htmlコード

<div class="sidebar-author">
<br />
<img class="author-pic" src="ここにアイコン画像リンク" alt="icon" width="120" height="120" style="display: block; margin: auto; border-radius: 100px;" />

<h3 style="font-size: 17px; text-align: center;" >お名前</h3><br />

<div style="font-size: 14px;">ここに自己紹介文<a href="ここにプロフィールリンク">プロフィール <i class="fa-solid fa-up-right-from-square"></i></a></div>
<br />
<div class="sharethis-inline-follow-buttons"></div>
<br />
</div>{codeBox}

CSSコード

<style>
.sidebar-author{
border: 2px solid #162536;
background-color: #FFFFFF;
text-align: center;
padding: 30px 25px 30px 25px;
border-radius: 10px;
}
/*profile photo */
.author-pic{
background-color: #FFFFFF;
border: 1px;
border-radius: 100px;
}
</style>{codeBox}

※画像リンクの取得には、一旦ダッシュボード→ページからプロフィール用のページを作成してアイコンをアップロードして公開。公開したページの画像上で右クリック→画像アドレスをコピーでOK

※アイコンサイズの変更はwidthやheightの値をお好みに変えてください

※プロフィールリンクの横にあるアイコンはFont Awesomeから取得しました

※フォローボタンというかSNSアイコンはShareThisのコードを設置しています

※Font Awesomeの設置方法については以下の参考記事がわかりやすいです

※CSSはテーマ→カスタマイズ→CSSを追加からコピペして保存します

参考記事：

「Font Awesome 6」をCDNやダウンロードデータでブラウザに表示する

これで完成です！ちなみに、日本語フォントはM Plus1を利用しています。

Bloggerで日本語のGoogle Fontsを使う方法〈ちょいむず〉

Bloggerで日本語のGoogle Fontsを使う方法を教えます。Blogger歴が長い自分でさえ手こずったので、導入方法を解説することにしました。備忘録として残しておきますが、Webの世界は移り変わりが早いのですぐに情報が古くなる可能性あり...。

www.live-to-design.com

最後に｜ShareThisを選んだ理由

以上、Bloggerのサイドバーのプロフィールをカスタマイズする方法を説明しました。

フォローボタンにShareThisを選んだ理由は、アイコンカラーや配置などが比較的自由に設定できるからです。最初は、AddToAnyで設置しようとしたんだけど、フォローボタンは中央寄せ出来ない仕様なので断念。

私はそれに気付けなくて、夜通しコードを書き直す羽目になったよ。ちなみにシェアボタンなら中央寄せできるんだけどね。こんなに時間取られるなら最初からShareThisでやっとくんだった..。

最後までお読みいただきありがとうございました。