WPメモ

WPの設定、実際に行った事のメモ。

WP 画像の上、中央に文字を配置する方法

WP CSS

PCとスマホは共通指定版。

 

■ページのHTML

<div class="text-on-image">
<img class="aligncenter" src="ここに画像のURLを記入" alt="ここに代替テキストを記入" width="" height="" /><p>表示の文字</p>
</div>

 

 

■CSS
外観＞CSSの編集 カスタムCSSに下記を記入

 

/* 画像の上に文字列を表示 */
.text-on-image {
width: 100%;
margin: 0;
padding: 0;
position: relative; /* 相対位置指定 */
}
.text-on-image img {
width: 100%;
}
.text-on-image p {
width: 100%;
font-size: 100%;
text-align: center;
bottom: 250px;
margin: 0;
padding: 0;
color: #fff;
background: rgba(0,0,0,0.0); /* 帯の透明度 */
position: absolute; /* 絶対位置指定 */
}

 

 これがいい。