Stinger8のサイドバーにプロフィールを表示します。
前提
- WordPressがインストールされている
- Stinger8の子テーマがインストールされている
作業手順
- “外観” > ”ウィジェット”にテキストを追加し、プロフィール表示のHTMLを記述
- CSSで見た目を整える
ウィジェットにHTMLを記述
“外観” > ”ウィジェット”と選択し、”サイドバーウィジェット”に”テキスト”を追加する。
テキストに以下のHTMLを記述。
1 2 3 4 5 6 7 |
<div class="profile-box clearfix"> <div class="profile-ph"> <img src="プロフィール画像.jpg" /> </div> <div class="profile-le">赤どーどーです。とりです!</div> <div class="profile-de"><a href="こちらに詳細URLを入力">詳しくはこちら</a></div> </div> |
CSSで見た目を整える
style.cssに以下のコードを追加します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
.profile-ph img { border-radius:10px; width:80px; height:auto; } .profile-ph { float: left; width: 80px; margin-right:10px; } .profile-le { overflow: hidden; font-size: 15px; } .profile-de { padding-top: 4px; text-align:center; } .profile-de a { padding: 4px 10px; background:#38b48b; font-size: 12px; color: #fff; text-decoration: none; border: 1px solid #38b48b; border-radius: 5px; } |
もし画像をbackground-image
とbackground-size:cover
で表示させたいときは、imgタグを削除し、profile-phクラスを以下のように記述します。
1 2 3 4 5 6 7 8 9 |
.profile-ph { float: left; width: 80px; margin-right:10px; height: 80px; background-color:#f3f3f3; background-image:url("ここに背景画像を指定"); background-size:cover; } |