WordPressのサイドバーに魅せるシンプルなプロフと箇条書きスペースを同時に作れるHTMLとCSS

技術備忘録

2026.03.27

元々プロフィール欄を作ろうと思ったのが始まりなのですが、cocoonではユーザーの編集内容をウェジットに表示させてプロフィールとして完成させられます。

しかし、もう少しだけ凝って、それでもシンプルに簡単にウェジットで使えるものが良いと思い、作ってみました。

名前、自己紹介、注目させる見出し、説明文。シンプルに完成する4点セット

注目する点はまず余白です。それぞれの項目に上下の余白を適度に与えます。そして全体は枠で囲っているのですが、自己紹介文を外周の枠より細くして枠で囲います。あまり太くして派手になっては駄目です。

その後は見出しの部分です。左横に縦のボーダーを付け、名前とは別の色にして注目させます。そして、その下の説明文です。

名前と中間の見出しはH3です。SEOにもちゃんと強いです。このプロフィール欄のポイントは、シンプルな構成で作られてるWebサイトほど目を引きます。サイドバーの上に設置し、余白をきちんと付けている事で、まず名前が目立ち、中間の見出しはボーダーが引き立てます。

見出しと説明分は、サイトのコンセプトや、aboutで注目して欲しかった部分を書く事をお勧めします。

設置はサイドバーのカスタムHTMLを使ってください。

中身の文章を変えてすぐに使えます。リンクを付け加えるのも自由ですし、名前の横に画像を置くのも自由です。

ただし、保存をする前に必ずプレビューの確認を。なんならcodepenでテストして問題無かったら貼り付け保存してください。