「Bloggerの標準プロフィール、なんだか物足りない…」「InstagramやX（旧Twitter）へのリンクをもっとおしゃれに目立たせたい！」
Bloggerを運営していると、サイドバーのデザインに少しこだわりたくなりますよね。特にプロフィール欄は、読者が「どんな人が書いているんだろう？」と必ず目を通す重要なポイントです。
この記事でわかること
- コピペで使えるプロフィール用のおしゃれなHTML/CSSコード
- 画像内の各要素と、コードの書き換え箇所の対応
- Bloggerサイドバーへの具体的な設置手順
完成イメージと設定のポイントはこちら！スマホで見ても綺麗に配置される設計です。
ここを書き換えるだけ！設定ガイド
「HTMLを触るのが初めてで不安…」という方も大丈夫！上の画像と照らし合わせながら、コード内の以下の4箇所を書き換えるだけで、あなた専用のプロフィールが完成します。
- アイコン画像URL： 110px×110pxの正方形画像がおすすめです。
- 自己紹介テキスト： お好みの文章に。改行したい場所には
<br />を入れます。 - プロフィール詳細リンク： 詳しい自己紹介記事へのURLを設定します。
- SNSリンク： XやInstagramのマイページURLを貼り付けます。
🎨 ワンポイント：SNSアイコンの色を変えたい場合は？
ご自身のブログのテーマカラーに合わせて色を変更することも可能です。
・X（旧Twitter）の黒色を変えたい場合：コード内の
・Instagramのグラデーションを変えたい場合：
ご自身のブログのテーマカラーに合わせて色を変更することも可能です。
・X（旧Twitter）の黒色を変えたい場合：コード内の
background: #000; の「#000」をお好きなカラーコードに変更してください。・Instagramのグラデーションを変えたい場合：
background: linear-gradient(...) の部分を単色（例: background: #e1306c;）などに書き換えるとスッキリしますよ！
【コピペ用】カスタマイズHTMLコード
以下のボタンを押してコピーし、ご自身の情報に書き換えてお使いください。
<div class="profile-container" style="text-align: center; padding: 15px 10px; font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif; background: #fff; border-radius: 15px;">
<!-- 1. アイコン画像 -->
<div style="margin-bottom: 15px;">
<img src="【ここに画像URLを貼る】"
alt="プロフィールアイコン"
style="width: 110px; height: 110px; border-radius: 50%; object-fit: cover; border: 4px solid #fdfdfd; box-shadow: 0 4px 10px rgba(0,0,0,0.08);" />
</div>
<!-- 2. 自己紹介文 -->
<div style="margin-bottom: 20px;">
<p style="font-size: 0.92em; color: #333; line-height: 1.8; margin: 0; font-weight: 500;">
暮らしの「ちょっと面倒」を減らすブログ<br />
<span style="font-size: 1.1em; color: #2874a6; font-weight: bold;">「Petit Useful」</span>を運営しています。<br />
テニス、お金・家計管理、暮らしとレビューの<br />
3つのテーマで、日常に役立つ<br />
小さな工夫や便利ツールを発信中。
</p>
</div>
<!-- 3. プロフィール詳細ボタン -->
<div style="margin-bottom: 25px;">
<a href="【プロフィールのURL】" class="profile-btn" style="display: inline-block; padding: 9px 35px; border: 1px solid #ddd; border-radius: 25px; color: #444; text-decoration: none; font-size: 0.85em; font-weight: bold; background: #fff; transition: all 0.3s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">プロフィールを見る</a>
</div>
<!-- 4. SNSリンクエリア -->
<div style="border-top: 1px dashed #eee; padding-top: 20px;">
<div style="display: flex; justify-content: center; gap: 30px;">
<a href="【XのURL】" target="_blank" rel="nofollow noopener" class="sns-icon x-icon">
<div class="icon-bg" style="width: 46px; height: 46px; background: #000; border-radius: 13px; display: flex; justify-content: center; align-items: center; margin-bottom: 6px;">
<svg width="20" height="20" viewbox="0 0 24 24" fill="#fff"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></svg>
</div>
<span style="font-size: 0.75em; color: #555; font-weight: bold;">X</span>
</a>
<a href="【InstagramのURL】" target="_blank" rel="nofollow noopener" class="sns-icon insta-icon">
<div class="icon-bg" style="width: 46px; height: 46px; background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); border-radius: 13px; display: flex; justify-content: center; align-items: center; margin-bottom: 6px;">
<svg width="24" height="24" viewbox="0 0 24 24" fill="#fff"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"></path></svg>
</div>
<span style="font-size: 0.75em; color: #555; font-weight: bold;">Instagram</span>
</a>
</div>
</div>
<!-- プロフィール用の装飾CSS -->
<style>
.sns-icon { text-decoration: none; display: flex; flex-direction: column; align-items: center; transition: all 0.3s ease; }
.profile-btn:hover { background: #eeeeee !important; border-color: #888888 !important; color: #000000 !important; transform: translateY(-2px); box-shadow: 0 5px 12px rgba(0,0,0,0.15) !important; }
.sns-icon:hover .icon-bg { transform: scale(1.1) translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,0.2) !important; }
.x-icon:hover .icon-bg { background: #333333 !important; }
.insta-icon:hover .icon-bg { filter: brightness(1.1); }
.profile-btn:active, .sns-icon:active .icon-bg { transform: scale(0.96) translateY(0); box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; }
</style>
</div>Bloggerへの設置ステップ
コードの準備ができたら、最後はブログに設置するだけです。わずか3分で完了します！
- Blogger管理画面のメニューから「レイアウト」をクリック。
- サイドバーの「ガジェットを追加」をクリック。
- 一覧から「HTML/JavaScript」を選択。
- タイトルに「プロフィール」と入力し、先ほどのコードを貼り付けて保存！
▼ 無事に設置できると、スマホではこのように表示されます！
まとめ：プロフィールを整えてブログをもっと楽しく！
サイドバーが整うと、ブログ全体のクオリティがグッと上がります。何より、自分のブログを自分で眺めるのが楽しくなりますよね！ぜひ活用してみてください。
