1. 管理画面でウィジェットを開く
- WordPress管理画面 → 外観 → ウィジェット
- サイドバー（または表示したい場所）に 「カスタムHTML」ウィジェットを追加します。
2. プロフィール用のHTMLを書く
以下のようなコードを入力します。
html
<div class="profile-box" data-ad-format="none">
<img src="プロフィール画像のURL" alt="プロフィール写真" width="120" height="120">
<h3>管理人：〇〇</h3>
<p>ここに自己紹介文を書きます。<br>
趣味やブログのテーマなどを簡単に紹介すると良いです。</p>
<p><a href="/about">詳しいプロフィールはこちら</a></p>
</div>👉 ポイント
data-ad-format="none"を付けることで、このブロックに自動広告が入らなくなります。class="profile-box"を付けておくと、CSSでデザイン調整しやすいです。
3. CSSでデザインを整える
子テーマの style.css に以下のように追記します。
css
.profile-box {
text-align: center;
padding: 20px;
background: #f9f9f9;
border: 1px solid #ddd;
border-radius: 8px;
}
.profile-box img {
border-radius: 50%;
margin-bottom: 10px;
}
.profile-box h3 {
margin: 10px 0;
font-size: 18px;
}上記のCSSでは、プロフィールボックスのデザインを整えています。
.profile-box：中央寄せ、余白、背景色、枠線、角丸を設定.profile-box img：画像を丸く表示し、下に余白を追加.profile-box h3：見出しの余白と文字サイズを調整
この設定により、プロフィール欄がシンプルで見やすいデザインになります。
4. 表示を確認
- サイトを更新してサイドバーをチェック
- プロフィールが表示され、広告が入らないことを確認します。
💡 メリット
- Cocoonの標準プロフィールウィジェットより 自由度が高い
data-ad-format="none"を付けられるので 広告を完全に除外できる- CSSでデザインを好きに変更可能
コメント