2017年6月 – 暮らしのハンドノート

2017年6月30日

カビキラーで落ちない風呂のゴムパッキンについた【カビ】を一般家庭にあるもので除去する方法

浴室のゴムパッキンの防カビも効果が保てるのは約２年といわれてます。

新築でない限り、カビの対策や除去は必要となってまきすね。

以前は、カビキラーで落ちていた浴室のゴムパッキンのカビがご覧のとおりとれなくなってしまいました。

そこで試したのが、食器などの漂白にも使うブリーチで試してみることに・・

キッチンペーパーにブリーチをたっぷり浸み込ませて黒かびの部分につけ

その後、乾燥しないようにキッチンペーパーの上からラップで押さえ

１日放置してみました。

今回は、比較しやすいように黒カビの一部分にしか使用しませんでしたが、１日放置した後の画像は下の画像です。

これではちょっとわかりずらいですかね?下に施工前、施工後の写真を並べてみましたので比較しやすいと思います。

格安で、手頃にガビを除去できるので一押しです。

みなさんも色々購入する前に一度試してくださいね。

2017年6月26日2018年5月14日

初心者でも簡単！Twenty Seventeenで画像の上下に文字を重ねて表示する方法をわかり易く説明してみた。No.2

前回の引き続きで今回はCSSのタグなどの使い方を説明したいと思います。

/*サンプル*/
.msample{
    float:none;/*フロートの指定なし*/
    clear:both;/*全ての回り込みを解除する*/    
    position:relative;/*ポジションを相対位置で指定*/
    width:320px;/*幅320pxで表示*/
    height:240px;/*高さ240pxで表示*/
}
.msample1{/*観光スポットのクラス名*/
    position:absolute;/*relativeに対するポジションを絶対位置で指定*/
    display:inline-block;/*ディスプレイをインラインブロックで表示する*/
    top:0px;/*背景が青色で表示する文字の表示の位置を一番上(0px)から表示*/
    left:0px;/*背景が青色で表示する文字の表示位置を一番左(0px)に指定*/
    color:#fff;/*文字の色を白に指定*/
    line-height:1.5em;/*青色で表示する文字の外の余白を1.5emで指定*/
　　 padding: 0 5px 0 5px;/*文字を表示する開始位置と終わりのに5pxの余白を指定「上」「右」「下」「左」*/
    background: rgba(66, 133, 244, 0.9);/*文字を表示する背景(青)にし、透明度を0.9にする*/
    font-size: 15px;/*フォントサイズを15pxで表示*/
}
.msample2{
    position:absolute;/*relativeに対するポジションを絶対位置で指定*/
    bottom:1.7em;/*下から1.7emに表示*/
    left:0px;/*左から0pxに表示*/
    width:320px;/*背景画像を320pxで表示*/
    text-align:center;/*テキストを中央に寄せる*/
    color:#fff;/*文字色を白*/
    line-height:2.5;/*背景が黒で表示する文字の外の余白を2.5emで指定*/
    background: rgba(15, 15, 15, 0.8);/*背景を黒で透明度を0.8*/
    font-size:18px;/*フォントサイズを18px*/
}
.msample img{
    width:320px;/*イメージ画像の幅を320px*/
}

/*サンプル*/

.msample{

float:none;/*フロートの指定なし*/

clear:both;/*全ての回り込みを解除する*/

position:relative;/*ポジションを相対位置で指定*/

width:320px;/*幅320pxで表示*/

height:240px;/*高さ240pxで表示*/

}

.msample1{/*観光スポットのクラス名*/

position:absolute;/*relativeに対するポジションを絶対位置で指定*/

display:inline-block;/*ディスプレイをインラインブロックで表示する*/

top:0px;/*背景が青色で表示する文字の表示の位置を一番上(0px)から表示*/

left:0px;/*背景が青色で表示する文字の表示位置を一番左(0px)に指定*/

color:#fff;/*文字の色を白に指定*/

line-height:1.5em;/*青色で表示する文字の外の余白を1.5emで指定*/

　　 padding: 0 5px 0 5px;/*文字を表示する開始位置と終わりのに5pxの余白を指定「上」「右」「下」「左」*/

background: rgba(66, 133, 244, 0.9);/*文字を表示する背景(青)にし、透明度を0.9にする*/

font-size: 15px;/*フォントサイズを15pxで表示*/

}

.msample2{

position:absolute;/*relativeに対するポジションを絶対位置で指定*/

bottom:1.7em;/*下から1.7emに表示*/

left:0px;/*左から0pxに表示*/

width:320px;/*背景画像を320pxで表示*/

text-align:center;/*テキストを中央に寄せる*/

color:#fff;/*文字色を白*/

line-height:2.5;/*背景が黒で表示する文字の外の余白を2.5emで指定*/

background: rgba(15, 15, 15, 0.8);/*背景を黒で透明度を0.8*/

font-size:18px;/*フォントサイズを18px*/

}

.msample img{

width:320px;/*イメージ画像の幅を320px*/

}

前回のHTMLのおさらいから

HTMLのおさらい

<div class="msample">
<img class="alignnone size-large wp-image-1838" src="https://xn--68j3b2d8le4af20azcz743e.com/wp-content/uploads/2017/05/KIMG0257-1024x576.jpg" alt="" width="525" height="295" />
<p class="msample1">観光スポット</p>
<p class="msample2">つつじ寺</p>
</div>

<p class="msample1">観光スポット</p>

</div>

最初に指定している<div>から最後の</div>までの間をひとつのかたまりとして表してましたね。

それで、CSSで読み込むクラス名を

.msample (クラス名)
.msample1 (クラス名)
.msample2 (クラス名)
.msmple img　(クラス名msampleの中にあるimg要素に適用されます。)

　クラス名の前には「.」を入れる。　クラス名と要素の間は半角スペースを入れる

下記画像を合わせて参考にしてください。

このように指定しスタイリストシートで読み込み可能なようにしてました。

それでは、今回の本題のCSSの記途の仕方について説明します。

最初に指定した.msamplはcssで読み込みを可能にするクラス名でしたね。

.msample {
    float:none;/*フロートの指定なし*/
    clear:both;/*全ての回り込みを解除する*/    
    position:relative;/*ポジションを相対位置で指定*/
    width:320px;/*幅320pxで表示*/
    height:240px;/*高さ240pxで表示*/
}

.msample {

float:none;/*フロートの指定なし*/

clear:both;/*全ての回り込みを解除する*/

position:relative;/*ポジションを相対位置で指定*/

width:320px;/*幅320pxで表示*/

height:240px;/*高さ240pxで表示*/

}

CSSの基本

.msample { ←この括弧は ” { ” 開始を宣言するもので、こから.mampleに対しては、次のプロパティ(値)を適用しますよ!と宣言しており、最後にプロパティ(値)を宣言し終えた後にはここで終わりですよ!!と ” } “で宣言します。

下記画像を合わせて参考にして下さい。↓

.msample

.msampleはクラス名でしたね最初のおおもととなるクラス名とプロパティ(値)を宣言するために指定します。「.mampleにはこの値を適用すると宣言をします。」

float:none;

float:none;は、floatを指定しない。ときに使います。

float:プロパティは、指定された要素を左または右に寄せて配置する際に使用し、後に続く内容は、その反対側に回り込みを設定するプロパティです。

今回は配置を指定しないのでfloat:none;で指定しています。

clear:both;

左寄せ・右寄せされた全ての要素に対する回り込みを解除するときに使います。

何故この設定が必要か?といいますと、画像や文字などを使って、CSSなどの読み込みに設定していたりすると、必然と回り込んだりしているときがあるので、設定をする前にこの設定をすることで、新たに、CSSの適用がスムーズにできるよう設定しています。

position:relative;

ポジションを指定することにより画像などの開始位置が指定できるプロパティで、相対位置指定で、基準が「現在の位置」が基準となります。

これに対し、absoluteは絶対的な位置指定です。そのため他の要素があろうと表示位置は親要素にぴったりくっき重なって表示されます。

この特性を生かして親要素をrelativeを設定しています。

width＆ height:

これは、説明するまでもなく、widthは、幅320px でheightは240pxで表示するように設定しました。

この幅と高さは、単純に4:3の比率で設定しているだけで私のサイドバーの幅に合うように設定していますので、お好みに合わせて設定してください。

次に.msample1のクラス名の内容を説明します。

.msample1

この.msample1は「観光スポット」を表示するためのクラス名です。

position:absolute;

まずは、この「観光スポット」の文字をpositionプロパティを使って親要素の「relative」にぴったりとくっつけて表示するために「absolute」を使って絶対位置を指定します。「top:0px;」「left:0px;」

内容は、親要素の一番上の一番左を基点として表示するように指定しています。

「posisition」と「top」・「left」はセットで使用します。

display:inline-block;

ここでなぜ「display:inline-block;」を指定するのかといいますと、

横に並ぶ要素。

幅や高さの指定ができる。

marginやpaddingを指定できる。

上記3点から選びました。

続いて、文字の色の指定をします。

color:fff;

文字の背景をブルー系の色で表示していますので、文字の色を白で表示するように「color:#fff;」を指定しています。

line-height:

line-heightプロパティは、通常、行の高さを指定する際に使用しますが、今回は、文字の上下に適度な余白が欲しかったのでt設定しています。

「1.5em」=「150%」=「1.5」です。

この数値は、「font-size: 15px」に対して適用されます。

padding:

「padding: 0 5px 0 5px;」は文字を表示する開始位置と終わりの左右に5pxの余白を指定しています。

「上」「右」「下」「左」の順になります。

ここで指定したpaddigの詳細は下記画像を参照してください。

paddigを指定しない場合は下の画像のようになります。

background:

「background: rgba(66, 133, 244, 0.9);」は、文字の背景をブルー系の色に指定し、透明度を0.9で指定しています。

.msample2

この.msample2は「つつじ寺」を表示するためのクラス名です。

ここでも.msample1と同様に「position:absolute;」を指定しますが今回は、一番下の左に合わせて表示しますので「bottom:1.7em」と「left:0px;」と指定しています。

ここで「bottom:1.7em」になるのか?といいますとp要素とp要素の間にできる空白行の調整部分になります。

<p style="background-color: #ffff99; color: green; position: relative; line-height: 1.5em;">これはrelativeのp要素です</p>
<p style="background-color: #ffff99; color: blue; position: absolute; line-height: 2.5em;">これはabsoluteのp要素です</p>

1 2	<p style="background-color: #ffff99; color: green; position: relative; line-height: 1.5em;">これはrelativeのp要素です</p> <p style="background-color: #ffff99; color: blue; position: absolute; line-height: 2.5em;">これはabsoluteのp要素です</p>

以下は、実際に上記を指定して表示しているのですが、p要素とp要素の間には空白ができてますね。↓

ちなみに、relativeはline-heightを1.5emで指定し、 absoluteは2.5emで指定しているので行間の高さの違いもはっきりわかると思います。

実際の表示↓

これはrelativeのp要素です

これはabsoluteのp要素です

bottomを指定しない場合の表示は、下の画像のようにp要素の空白行が挿入されで位置がずれ文字の部分画像の下よりはみ出してしまいます。

次につつじ寺の背景には、幅320pxを適用することにより画像の横幅とぴったりなのがわかると思います。

text-align:center

これは文字を中央に表示するときに使うタグです。

つつじ寺の文字が中央に表示されてますね。

つつじ寺の文字の背景に対しては文字間を2.5で表示しフォントサイズも少し大きめの18pxで指定しています。

それから、最後にimgの幅の設定をします。

.msample img

「.msample img」にwidth(幅)をmsampleと同じ320pxで指定します。

2017年6月25日2017年6月26日

驚くほど効いたムカデカダンと【百足】ムカデに噛まれたときの応急処置方法

ある日の早朝、まだ夜が明けきれていないときに灯りをつけようとしたときのことでした。

何か踏んだ!!と思った瞬間に指に巻きつきズキーンと激痛がはしりました。

ムカデだったんです!!

その時すぐ、毒を洗い流さないと・・・と思い浴室のシャワーで洗い流したのですが、みるみるうちに激痛がひどくなっていき、これはもうダメだ!!と思い姉妹へ電話をし救急病院へ連れていってもらい処置をしてもらいましたが、１日なにもできず、足を上げて寝ていました。

後日調べてみると、ムカデに噛まれた時の対処方は水ではなく43℃～46℃くらいのお湯で洗い流すのが効果的らしく、私がとった行動は間違っていたんですね。

・・・とその後、ムカデに対してはかなり慎重になってしまったのですが。。

ムカデを殺すのも至難の業じゃありませんよね？たたいたりしても死なないし、ムカデがいくら熱にに弱いからって家の中では、火は使えません。それで本当に効くか試してみようとムカデカダンを購入しておきました。

そして、一昨日やっとムカデカダンを使う瞬間が現れました。

ムカデカダンに１秒でノックダウンと記載がありますが、これはちょっぴり大げさかもしれません。実質30秒ほどはかかったと思います。

でも、ご覧のとおり確実に死にました。

ほっと一安心です。

でも、ムカデやゲジゲシは実はゴキブリなどを食べてくれる益虫なんですね。

ムカデの好物であるゴキブリや小動物が家屋の中にいる場合には、それらの獲物を求めて、ムカデが屋外から家屋の中に入ってくることもあるそうです。

５月～６月は産卵期なので、特に注意が必要です。

ムカデに噛まれたときの応急処置

45℃前後の温かいお湯でシャンプーや石鹸など途中つけながらシャワーなどの流水で5分以上洗い流します。(弱酸性のものはよくありません)

ムカデも蜂に刺されたときと同じようにアナフィラキシーショクを引き起こすことがありますので注意しましょう!!

それから、毒を絶対に口で吸い出したりしないでください。

2017年6月19日2018年5月25日

初心者でも簡単！Twenty Seventeenで画像の上下に文字を重ねて表示する方法をわかり易く説明してみた。No.1

前回、Twenty Seventeenの「追加CSS」の使い方を説明した際に画像と文字を重ねたのですが、今回はそのhtmlとcssを詳しく説明します。

<div class="msample">
<img class="alignnone size-large wp-image-1838" src="https://xn--68j3b2d8le4af20azcz743e.com/wp-content/uploads/2017/05/KIMG0257-1024x576.jpg" alt="" width="525" height="295" />
<p class="msample1">観光スポット</p>
<p class="msample2">つつじ寺</p>
</div>

<p class="msample1">観光スポット</p>

</div>

htmlに指定した「div」「ｐ」「class」について説明します。

divとは・・

<div>～</div>の間に記途した部分をひとかたまりの範囲として定義するブロック要素です。

ここから<div>～ここまで</div>はひとつのかたまりですよ!!と宣言しているのです。

div要素の特徴は、前後に改行が入りますが、空白行は入りません。

ブロック要素に関して定義できる詳細は下記の4.displayを参照して下さい。

wordpress-popular-posts/style/wpp.cssでcssのお勉強

pとは・・・

<p>～</p>の間に記途した部分をひとつの段落であることを表す際に使用するブロック要素です。

p要素の特徴は、改行された後に1行の空白が入ります。

文章で説明してもわかりづらいと思いますので、実際に記途してみますね。

HTML側↓

<div style="background-color: #d1e9ed;">/*div要素の全体がわかりやすいように背景に色をつける*/
<div style="color:green;">これはHTMLのdiv要素です</div>
<div style="color:blue;">これはHTMLのdiv要素です</div>
<p style="color:red;">これはHTMLのP要素です</p>
<p style="color:black;">これはHTMLのP要素です</p>
</div>

<div style="background-color: #d1e9ed;">/*div要素の全体がわかりやすいように背景に色をつける*/

<div style="color:green;">これはHTMLのdiv要素です</div>

<div style="color:blue;">これはHTMLのdiv要素です</div>

<p style="color:red;">これはHTMLのP要素です</p>

<p style="color:black;">これはHTMLのP要素です</p>

</div>

実際の表示↓

これはHTMLのdiv要素です

これはHTMLのP要素です

div要素では改行のみですがP要素とＰ要素の間下に空白行が入って表示されているのがこれでわかると思います。

P要素とP要素の間には、空白行が入る。

cssで表示位置を指定する際にP要素の空白部分が必要になってきますので、覚えておきましょう。

classとは・・

class属性で、要素に対してクラス名（分類名）を付けて特定のクラス名に対して、cssを適用する場合に使います。

今回実際に使用したのは、div classですが、div id

　div class とdiv id の違い

今回指定したdiv classの他にも div idがありますが、

div class=1ページ内で何度も使える。

div id=1ページ内で一度しか使えない。

と上記の違いがあります。

div classを指定した場合のHTMLとCSS書き方

HTML側　<div class=msample>

CSS側　.msample{ }　とクラス名の前に「.」を付けます。

div idを指定した場合のHTMLとCSSの書き方

HTML側　<div id=msample1>

msampe名は同じページで一度しか使えないので

msample1

msample2

などのように記途します。

CSS側　#msample{ } とクラスIDの前に「#」を付けます。

#msample1{ }

#msample2{ }

class名やid名の付け方

今回私は「msample」を名前に付与したのですが、CSSなどで指定していない(かぶらない)名前を任意でつけることができます。

これで、htmlとcssの記途の仕方は理解できたと思います。

今回表示するのに当ブログで使用したclass名は

.msample
.msample1
.msample2
.msmple img

上記の4点です。

それでは、最後にimgについて説明したいと思います。

WordPressでは、画像の挿入方法が2通りあります。

1.メディアファイルから画像のURLをコピーして挿入する

例・・・https://xn--68j3b2d8le4af20azcz743e.com/wp-content/uploads/2017/06/画像のURL.pngを

の中にいれてテキストモードで投稿記事を編集すると・・下記のように画像が表示されます。メディアからも画像のURLがわかりますね。

2.投稿記事からメディアを追加する

投稿記事のメディア追加から画像を選んで投入すると画像がビジュアルモードでは、そのまま画像が表示され、テキストモードでは

上記のような感じでclass名や画像のURL サイズの指定が自動でされているのがわかると思います。

最後にimg画像を挿入すると自動で付与されるclassを簡単に説明したいと思います。

WordPressで記事に画像を挿入すると自動的に付与されるclassについて

WordPressでは記事に画像を挿入すると自動的に下記のようなタグが出力されますね。

<img src="https://xn--68j3b2d8le4af20azcz743e.com/wp-content/uploads/2017/05/KIMG0257-1024x576.jpg" alt="" width="525" height="295" class="alignnone size-large wp-image-1838" />

1	<img src="https://xn--68j3b2d8le4af20azcz743e.com/wp-content/uploads/2017/05/KIMG0257-1024x576.jpg" alt="" width="525" height="295" class="alignnone size-large wp-image-1838" />

まずこの上記のタグについて説明します。

<img src=は画像を表示するhtmlタグ
“https://xn--68j3b2d8le4af20azcz743e.com/wp-content/uploads/2017/05/KIMG0257-1024×576.jpg”は画像のURLで.jpgはファイルの拡張子
alt=””は画像の説明文
width=”525″ height=”295″は横幅と高さのサイズ
class=”alignnone size-large wp-image-1838″ />は、投稿画面左上のメディアを追加した際に出力される画像の配置位置です。

alignnone は画像の配置はなし。

size-largeはサイズ大

wp-image-数値は画像のidを表します。

長くなりましたので下記のCSSの使い方の説明は次回にします。

/*サンプル*/
.msample{
    float:none;/*フロートの指定なし*/
    clear:both;/*全ての回り込みを解除する*/    
    position:relative;/*ポジションを相対位置で指定*/
    width:320px;/*幅320pxで表示*/
    height:240px;/*高さ240pxで表示*/
}
.msample1{/*観光スポットのクラス名*/
    position:absolute;/*relativeに対するポジションを絶対位置で指定*/
    display:inline-block;/*ディスプレイをインラインブロックで表示する*/
    top:0px;/*背景が青色で表示する文字の表示の位置を一番上(0px)から表示*/
    left:0px;/*背景が青色で表示する文字の表示位置を一番左(0px)に指定*/
    color:#fff;/*文字の色を白に指定*/
    line-height:1.5em;/*青色で表示する文字の外の余白を1.5emで指定*/
　　 padding: 0 5px 0 5px;/*文字を表示する開始位置と終わりのに5pxの余白を指定「上」「右」「下」「左」*/
    background: rgba(66, 133, 244, 0.9);/*文字を表示する背景(青)にし、透明度を0.9にする*/
    font-size: 15px;/*フォントサイズを15pxで表示*/
}
.msample2{
    position:absolute;/*relativeに対するポジションを絶対位置で指定*/
    bottom:1.7em;/*下から1.7emに表示*/
    left:0px;/*左から0pxに表示*/
    width:320px;/*背景画像を320pxで表示*/
    text-align:center;/*テキストを中央に寄せる*/
    color:#fff;/*文字色を白*/
    line-height:2.5;/*背景が黒で表示する文字の外の余白を2.5emで指定*/
    background: rgba(15, 15, 15, 0.8);/*背景を黒で透明度を0.8*/
    font-size:18px;/*フォントサイズを18px*/
}
.msample img{
    width:320px;/*イメージ画像の幅を320px*/
}

/*サンプル*/

.msample{

float:none;/*フロートの指定なし*/

clear:both;/*全ての回り込みを解除する*/

position:relative;/*ポジションを相対位置で指定*/

width:320px;/*幅320pxで表示*/

height:240px;/*高さ240pxで表示*/

}

.msample1{/*観光スポットのクラス名*/

position:absolute;/*relativeに対するポジションを絶対位置で指定*/

display:inline-block;/*ディスプレイをインラインブロックで表示する*/

top:0px;/*背景が青色で表示する文字の表示の位置を一番上(0px)から表示*/

left:0px;/*背景が青色で表示する文字の表示位置を一番左(0px)に指定*/

color:#fff;/*文字の色を白に指定*/

line-height:1.5em;/*青色で表示する文字の外の余白を1.5emで指定*/

　　 padding: 0 5px 0 5px;/*文字を表示する開始位置と終わりのに5pxの余白を指定「上」「右」「下」「左」*/

background: rgba(66, 133, 244, 0.9);/*文字を表示する背景(青)にし、透明度を0.9にする*/

font-size: 15px;/*フォントサイズを15pxで表示*/

}

.msample2{

position:absolute;/*relativeに対するポジションを絶対位置で指定*/

bottom:1.7em;/*下から1.7emに表示*/

left:0px;/*左から0pxに表示*/

width:320px;/*背景画像を320pxで表示*/

text-align:center;/*テキストを中央に寄せる*/

color:#fff;/*文字色を白*/

line-height:2.5;/*背景が黒で表示する文字の外の余白を2.5emで指定*/

background: rgba(15, 15, 15, 0.8);/*背景を黒で透明度を0.8*/

font-size:18px;/*フォントサイズを18px*/

}

.msample img{

width:320px;/*イメージ画像の幅を320px*/

}

2017年6月15日2018年5月25日

Twenty Seventeenの「追加CSS」はＣＳＳ初心者でもわかりやすい!ちょっと本気で説明してみた。

ＣＳＳのカスタマイズ機能が備わったTwenty Seventeen

ＣＳＳ初心者でもわかりやすい、Twenty Seventeenの「追加ＣＳＳ」の使い方をword press初心者の方向けに解説します。

※ウィジェットにカスタマイズしたい画像などを使って「追加CSS」を使用すると、保存をしない状態でも、表示が変わるので、リアルタイムに変更が表示されてとても便利です。

ＣＳＳ初心者の方には、特にオススメです。

1.Twenty Seventeenの「追加ＣＳＳ」の使い方

wordpressの「ダッュボード」→「外観」→「カスタマイズ」の順にクリックします。

すると次のように左下に追加ＣＳＳがありますので「追加ＣＳＳ」をクリックします。

すると左側次の画面になりＣＳＳがカスタマイズでるるようになります。初期状態では以下のように表示されていると思います。

CSSでは、/*○○○○○ */間に記載する文字はコメントと認識され、ＣＳＳの表示には影響ありませんので、自分のわかりやすい説明などを記入することをお勧めします。

/*=コメントの開始を表します。

*/=コメントの終了を表します。

補足・・・” { ” が足りなかったりして、記途が間違っていれば下記のように表示されますので、そのときは再度確認してください。

訂正すると上記のメッセージの表示はなくなります。

それでは、実際に追加ＣＳＳに記途してみます。

まずは、下記のコードをそのままコピペしてください。

/*サンプル*/
.msample{
    float:none;
    clear:both;    
    position:relative;
    width:320px;
    height:240px;
}
.msample1{
    position:absolute;
    display:inline-block;
    top:0px;
    left:0px;
    color:#fff;
    line-height:1.5em;
　　 padding: 0 5px 0 5px;
    background: rgba(66, 133, 244, 0.9);
    font-size: 15px;
}
.msample2{
    position:absolute;
    bottom:1.7em;
    left:0px;
    width:320px;
    text-align:center;
    color:#fff;
    line-height:2.5;
    background: rgba(15, 15, 15, 0.8);
    font-size:18px;
}
.msample img{
    width:320px;
}

/*サンプル*/

.msample{

float:none;

clear:both;

position:relative;

width:320px;

height:240px;

}

.msample1{

position:absolute;

display:inline-block;

top:0px;

left:0px;

color:#fff;

line-height:1.5em;

　　 padding: 0 5px 0 5px;

background: rgba(66, 133, 244, 0.9);

font-size: 15px;

}

.msample2{

position:absolute;

bottom:1.7em;

left:0px;

width:320px;

text-align:center;

color:#fff;

line-height:2.5;

background: rgba(15, 15, 15, 0.8);

font-size:18px;

}

.msample img{

width:320px;

}

コピペが終わりましたら、保存して公開をクリックします。

2.Twenty Seventeenの追加ＣＳＳで画像に文字を重ねて表示してみる。

2-1.クラス名を指定する。

「ダッシュボード」→「投稿」→「新規追加」の順にクリックすると新規の投稿ができるようになりますね。

テキストモードにして下記のコードをコピペします。

<div class="msample">
</div>

1 2	<div class="msample"> </div>

2-2.表示したい画像を追加する

<div class="msample">
<img src="https://xn--68j3b2d8le4af20azcz743e.com/wp-content/uploads/2017/05/KIMG0257-1024x576.jpg" alt="" width="525" height="295" class="alignnone size-large wp-image-1838" />
</div>

</div>

</div>の直前に画像を追加します。

投稿画面左上にある「メディア追加」から追加します。

一度ビジュアルモードにし、その後テキストモードに変更すると下記のように表示が変わっていると思います。

imgのクラス名の位置がかわってますね。　これでOKです。

次に画像に重ねる文字を入力します。

2-3.画像の左上に重ねる文字を入力する

まず画像の左上に表示させる文字を</div>の前に入力します。

<p class="msample1">観光スポット</p>/*←観光スポットの文字を任意の文字にしてください。*/

1	<p class="msample1">観光スポット</p>/←観光スポットの文字を任意の文字にしてください。/

これまでのまとめ

観光スポット

次に画像の下に重ねる文字を入力する

2-4.画像の下に重ねる文字を入力する

先ほどの2-3.のまとめの</div>の前に下記を入力します。

<p class="msample2">つつじ寺</p>

1	<p class="msample2">つつじ寺</p>

これまでのそうまとめ↓

最終仕上がりはこんな感じです。↓

観光スポット

つつじ寺

次回は、この記事のCSSの内容を説明します。