サイドバーに簡易プロフィールエリアを作成

2026年6月7日 2026年6月8日

管理者

内容

キミマチの簡単なプロフィール作成
記載項目のHTML作成
装飾（CSS）調整

キミマチの簡単なプロフィール作成

簡易プロフィールに載せる項目を決めていきます。

①アイコン画像
②名前
③ 一言プロフィール
④ 発信内容
⑤ SNSリンク
⑥ 詳細プロフィールへのリンク

アイコンや文章の準備

①

②キミマチ

③WordPressを活用した再現開発や個人開発の挑戦中

④
・WordPress
・プログラミング
・エンジニアの学習記録
・ブログ運営

⑤キミマチラボ

⑥キミマチのプロフィール

準備はできたので、形にしていきます。

記載項目のHTML作成

作成している最中に入れたい内容が増えちゃいましたが

<!-- プロフィール全体 -->
<div class="profile-box">

  <!-- ヘッダー部分（画像＋名前＋肩書き） -->
  <div class="profile-header">

    <!-- プロフィール画像 -->
    <img src="画像のURL"
         alt="キミマチ"
         class="profile-image">

    <!-- 名前・肩書き -->
    <div class="profile-info">

      <!-- 名前 -->
      <div class="profile-name">
        キミマチ
      </div>

      <!-- 肩書き -->
      <div class="profile-job">
        個人開発×ブログ運営
      </div>

    </div>

  </div>

  <!-- 自己紹介文 -->
  <div class="profile-text">

    <!-- 職業 -->
    セキュリティ監視業務（SOC）に従事する現役エンジニア<br>

    <br>

    <!-- 活動内容 -->
    WordPressを活用した再現開発や個人開発の挑戦中<br>

    <br>

    <!-- 発信ジャンル -->
    発信内容

    <br>・WordPress
    <br>・プログラミング
    <br>・エンジニアの学習記録
    <br>・ブログ運営

    <br>

    <!-- 想定読者 -->
    IT業界への転職や開発工程へ携わる技能習得をしたい方<br>
    ブログでの収益化を目指す方

    <br>

    <!-- メッセージ -->
    参考・実践の力になれるように頑張ります！

  </div>

  <br>

  <!-- Xアカウントへのリンク -->
  <div class="profile-page">

    Xアカウント▼<br>

    <a href="XアカウントのURL"
       class="profile-link">

      キミマチラボ

    </a>

  </div>

  <br>

  <!-- 詳細プロフィールページへのリンク -->
  <div class="profile-page">

    プロフィール▼<br>

    <a href="プロフィールページのURL"
       class="profile-link">

      キミマチのプロフィール

    </a>

  </div>

</div>

これをウィジェットの サイドバー（共有上部）へ カスタムHTML で書き込み

これで項目は置けたので、ここからは好みの配置にしていきます。

装飾（CSS）調整

①アイコン画像　②名前、肩書きを

こんなイメージで配置したい。

⑤ SNSリンク　⑥ 詳細プロフィールへのリンクは

目立つように中央揃えとアクセントカラーにしたい。

この2つのこだわりを気にしつつ、追加CSSへ書き込んでいきます。

/* =========================
   サイドバープロフィール
========================= */

/* 全体 */
.profile-box {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
}

/* アイコン＋名前 */
.profile-header {
  display: flex;
  align-items: center;
　border-bottom: 1px solid var(--border-color);
  padding-bottom: 15px;
  gap: 15px;
  margin-bottom: 15px;
}

/* アイコン */
.profile-image {
  width: 80px;
  height: 80px;
  object-fit: contain;
  flex-shrink: 0;
}

/* 名前 */
.profile-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--main-color);
  line-height: 1.4;
}

/* 肩書 */
.profile-job {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

/* 本文 */
.profile-text {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-color);
  margin-bottom: 15px;
}

/* プロフィールページ見出し */
.profile-page {
  font-size: 14px;
  text-align: center;
  line-height: 1.8;
}

/* プロフィールリンク */
.profile-link {
  display: inline-block;
  margin-top: 5px;
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 600;
}

.profile-link:hover {
  color: var(--main-color);
  text-decoration: underline;
}

/* スマホ */
@media (max-width: 768px) {

  .profile-header {
    gap: 12px;
  }

  .profile-image {
    width: 70px;
    height: 70px;
  }

  .profile-name {
    font-size: 18px;
  }

}

さて、変な崩れがないか確認