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

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

 

 

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

divとは・・

 

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

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

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

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

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

 

pとは・・・

 

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

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

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

HTML側↓

 

実際の表示↓

これはHTMLのdiv要素です
これはHTMLのdiv要素です

これはHTMLのP要素です

これはHTMLのP要素です

div要素では改行のみですがP要素と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を

<img src=”画像のURL”>

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

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

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

<img class=”alignnone size-full wp-image-2081″ src=”画像のURL alt=”” width=”1289″ height=”799″ />

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

 

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

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

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

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

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

alignnone は画像の配置はなし。

size-largeはサイズ大

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

長くなりましたので下記CSSにコメントとして内容は記載しましたがタグなどの使い方の説明は次回にします。

 

 

 

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)