Stinger8のサイドバーにプロフィールを表示する

投稿日：2019年1月2日更新日：2019年1月11日

Stinger8のサイドバーにプロフィールを表示します。

前提

WordPressがインストールされている
Stinger8の子テーマがインストールされている

作業手順

“外観”　＞　”ウィジェット”にテキストを追加し、プロフィール表示のHTMLを記述
CSSで見た目を整える

ウィジェットにHTMLを記述

“外観”　＞　”ウィジェット”と選択し、”サイドバーウィジェット”に”テキスト”を追加する。
テキストに以下のHTMLを記述。

<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>

</div>

<div class="profile-le">赤どーどーです。とりです!</div>

<div class="profile-de"><a href="こちらに詳細URLを入力">詳しくはこちら</a></div>

</div>

CSSで見た目を整える

style.cssに以下のコードを追加します。

.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;
}

.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クラスを以下のように記述します。

.profile-ph {
	float: left;
	width: 80px;
	margin-right:10px;
	height: 80px;
	background-color:#f3f3f3;
	background-image:url("ここに背景画像を指定");
	background-size:cover;
}

.profile-ph {

float: left;

width: 80px;

margin-right:10px;

height: 80px;

background-color:#f3f3f3;

background-image:url("ここに背景画像を指定");

background-size:cover;

}

Stinger8のサイドバーにプロフィールを表示する

目次

前提

作業手順

ウィジェットにHTMLを記述

CSSで見た目を整える