Bootstrap で超シンプルなプロフィールボックスを作ってみた

Last Update：2026/02/18

ブログのサイドバーなどのプロフィール。
シンプルで、できれば簡単に作れないかな？と思って試してみました。

なぜプロフィールボックスを自作したかったのか

Blogger にはプロフィールを表示できる標準ウィジェットがあります。
自己紹介ページにリンクされていたり、複数ブログを持っている場合は一覧で表示できたりと、使いようによってはとても便利です。

ただ私の場合は、
・投稿下の紹介文は短くしたい
・サイドバーでは「どんなブログか」を少し詳しく書きたい
・カスタマイズはあまり手間をかけたくない
という理由があって、新しく作ることにしました。

標準ウィジェットをカスタマイズする方法はあまり多くありませんが、読みやすくする方法を紹介している記事を見つけました。

一番多かったのは、HTML ウィジェットにコードを書き、CSS をテーマに追加する方法。
表示内容も見た目も自由に作れるので、もっともオーソドックスなやり方です。

でも私は「もっと簡単にできないかな？」「CSS をテーマに書かずに済む方法はないかな？」と考えていました。
そこでふと思い出したのが、JetTheme には Bootstrap が導入されているということ。

「Bootstrap って、簡単に色々できるんじゃなかったっけ？」
そう思って調べてみることにしました。

まずは Bootstrap の公式サイトを覗いてみました。

Bootstrap

パワフルで拡張性の高い、機能満載のフロントエンドツールキットです。Sassでビルドしてカスタマイズし、あらかじめ用意されたグリッドシステムとコンポーネントを利用し、強力なJavaScriptプラグインでプロジェクトに命を吹き込むことができます。

なんとなく「レスポンシブなサイトを手早く作れるツール」ということはわかったような…？
そんな時に出会ったのが、こちらの投稿でした。

まるで私のための教科書のような投稿で、「あーなるほど、だからこうなるのか！」と色んな断片がつながりました。

JetTheme には Bootstrap が導入されていますし、これから導入したい方も上記の投稿から学べます。
いよいよプロフィールボックスを作ってみることにしました。

まずは入れたい要素を整理してみました。
・画像
・名前
・自己紹介とブログについて
この3つがあれば十分。

全体のイメージを損なわず、シンプルなものを目指すことにしました。
図にするとこんな感じです。

Bootstrap のドキュメントには、サイト構築に使える要素がたくさん掲載されています。
「カード」で検索してみると、イメージに近いものが見つかりました。

Bootstrap-Components-Card

Bootstrap／https://getbootstrap.jp/

このカードが一番イメージに近かったので、ここから必要な部分だけを調整していくことにしました。

画像を円形にするため「rounded-circle」、サイズは「w-25」、中央寄せに「mx-auto」を追加しました。

タイトルには「text-center」、紹介文には「fs-7 text-center」を追加して整えました。

今回はボタンが不要だったので、該当部分のコードを削除しました。

幅が少し窮屈に感じたので「width:auto」に変更し、枠線をなくして背景を透明にしました。これで全体のイメージに馴染むようになりました。

こうして、超シンプルで全体のイメージを損なわないプロフィールボックスが完成しました！

仕組みを知れば意外と簡単にできてビックリ。
やってみるものですね。

Bootstrap なら「難しそう」と思っていたこともできそうな気がしてきました。
理解が深まる楽しさ、自分で作れた達成感。
とても楽しかったです！

ぜひ皆さんも試してみてくださいね。

ではまた次の投稿で。

ライフワークニスト編む・書く・創るなど