WordPressテーマSANGOの質問

サイドバーに設置したプロフィール画像と名前を横に並べたい

むしょく

2020/05/12

お世話になっております。
ここを参考にサイドバーウィジェットにプロフィール欄を作成しました。
背景画像なし（コードの削除＋CSS追加）したのですが、プロフィール画像と名前を横並びにして、なおかつその2つの要素の縦は中央に寄せたいです。

いろいろCSSをいじったのですが、知識と能力不足により達成することができませんでした。コードサンプルをいただけると幸いです。

/*サイドバープロフィール*/ .yourprofile .profile-img { width: 80px;/*幅*/ height: 80px;/*高さ*/ margin: 30px auto 0;/*75pxの部分はwidthの半分の値に*/ display:inline-block; width:25%; margin-left: 30px; }


p.yourname.dfont {

	float: right;

	display:inline-block; width:50%;

	margin-right: 30px;

}
.yourprofile .profile-img img {

  border-radius: 50%;

}

.yourprofile { background-color: #f77ba0; }

記事下にプロフィール（この記事を書いた人）を設置する

コメントへの回答

サルワカくん

2020/05/13

サイドバーのプロフィールの背景画像をなしにして、アバター画像と名前を横並びにするということですね。

まず、カスタムHTMLのうち、次の部分を削除します。

<p class="profile-background"><img src="~"></p>

次に以下のCSSをダッシュボードの［外観］⇒［カスタマイズ］⇒［追加CSS］もしくは子テーマのstyle.cssに貼り付けます。

.yourprofile {
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center; /* 画像+テキストを左右中央寄せに */
}
.yourprofile .profile-img {
  margin: 0;
}
.yourname {
  max-width: calc(100% - 100px);
}

よろしくお願いします。