投稿日:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

 

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

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

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

 

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

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

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

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

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

これまでのまとめ

観光スポット

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

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

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

これまでのそうまとめ↓

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

観光スポット

つつじ寺

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

投稿日:

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

wordpress-popuular-postsでサイドバーに人気記事を表示しているのですが、なかなか自分の思うように表示されないので、CSSのお勉強を兼ねての備忘録です。

 

1.overflow

 

overflowプロパティは、はみ出た内容の表示方法を、どう処理するかを指定するプロパティ。

overflow:visible; 領域をはみ出して表示する
overflow:hidden; はみ出た部分を表示しない
overflow:scroll; スクロールで表示する
overflow:auto; 自動

 

2.float

 

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

注意：floatプロパティは、positionプロパティで static以外の値が指定されている要素には適用されない。

float:left; 指定した要素を左に寄せます。後に続く内容はその右側に回り込みます。
float:right; 指定した要素を右に寄せます。後に続く内容はその左側に回り込みます。
float:none; 初期値。フロートの指定はなし。
float:inherit; 親要素のフロートの値を継承する。

 

3.clear

 

clearプロパティは、floatプロパティで左寄せ、 または右寄せを指定された要素に対する回り込みを解除する際に使用する。

clear:left; 左寄せされた要素に対する回り込みを解除する。
clear:right; 右寄せされた要素に対する回り込みを解除する。
clear:both; 左寄せ・右寄せされた全ての要素に対する回り込みを解除する。
clear:none; 初期値。回り込みを解除しない。

 

4.display

 

displayとは、要素の表示形式を指定するプロパティで、主にblock、inline、inline-block、noneの4つで他にも、list-item、run-in、tableなど色々とありますが今回使うのは、block、inline、inline-blockなので、この要素についてまとめます。

 display block inline inline-block
並び 下に置かれる要素 横に並ぶ要素 横に並ぶ要素
幅・高さの指定 できる できない。(文字の大きさ・長さなどで決まる) できる
余白の設定 marginとpaddingを指定できる ・左右のmarginとpaddingは指定できる

・上下のmarginは指定できない。

・上下のpaddingを指定すると表示がかぶってしまう。

 marginとpaddingを指定できる
text-align 要素の中身に適応される。 親ブロックに付けることで指定できる。 親ブロックに付けることで指定できる。
vertical-align 指定できない 指定できる 指定できる

 

4-1.wordpress-popuular-postsのウィジェットを使って表示するのによく使われるhtmlタグ

要素 開始タグ 終了タグ 用途
ブロックレベル要素のタグ <div> </div> <DIV>～</DIV>で囲んだ範囲をひとかたまりとして定義する。 align属性で位置を指定したり、スタイルシートを適用するのに用います。
<p> </p> <P>～</P>で囲まれた部分がひとつの段落であることを表します。
<ul> </ul> 順序のないリストを表示するタグでリスト項目は<li>タグで指定します。
<ol> </ol> 順序のあるリストを表示する際に使用します。 リストの各項目は<li>タグを用いて記述します。
<li> </li> リストの項目を記述する際に使用します。 リスト表示したい項目に<li>タグをつけて<ul>～</ul> または<ol>～</ol>の間に記述します。
<h1>～<h6> </h1>～</h6> 見出しを付けるタグで<h1>が最上位の見出しで<h6>が最下位の見出し(小見出し)となります。

 

5.marginとpadding

 

marginは、borderを境に外側の余白を指定するプロパティです。

paddingは、borderを境に内側の余白を指定するプロパティです。

5-1.marginの指定の仕方

marginとは上下左右のマージンを一括で指定するプロパティです。上下左右を異なるマージン幅にすることができ、その場合は、スペースで区切って複数の値を指定します。負の値を指定することもでき、複数の領域を重ねて表示させるような表現も可能です。

主に使われる指定方法は次のように、個別で４タイプショートハンドで４タイプがあります。それぞれの値は、半角スペースで区切って記述します。

長さ（初期値は0）数値＋単位（px, %, pt, emなど）で指定します。Auto自動でマージンを指定します。

個別 margin-top: ○px; borderより外側に上の余白を指定
margin-right: ○px; borderより外側に右の余白を指定
margin-bottom: ○px; borderより外側に下の余白を指定
margin-left: ○px; borderより外側に左の余白を指定
ショートハンド margin: ○px; borderより外側に「上下左右」共通に余白を指定
margin: ○px ○px; borderより外側に「上下」「左右」の順に余白を指定
margin: ○px ○px ○px; borderより外側に「上」「左右」「下」の順に余白を指定
margin: ○px ○px ○px ○px; borderより外側に「上」「右」「下」「左」の順に余白を指定(時計回り)

※ブロックボックスが上下に並ぶ場合は、隣接する垂直方向のマージンが相殺されます。

上下に隣接する要素のmarginが同じ場合、相殺されてしまい、20pxの場合40pxではなく20pxになります。

margin: 20px 0px 20px 0px;だと上と下にそれぞれに20pxの余白を設定の場合は20pxの空白がブラウザで表示されます。(20px+20px=40px)にはなりません。

margin: 20px 0px 40px 0px;だと値の大きい40pxの空白がブラウザの表示となります。

 

5-1-1.ブラウザのデフォルトの余白を取り除く方法

一般的なブラウザでは、リストの周囲に適度な余白が設定されていますので、ブラウザで設定されている余白を取り除きたい場合は、ul要素（またはol要素）に対して次のスタイルを設定します。

  • ul要素に設定する場合 … 1em 程度
  • ol要素に設定する場合 … 1.5em ～ 2em 程度が目安

5-2.paddingの指定の仕方

paddingとは上下左右のパディングをまとめて指定するプロパティです。

幅（初期値は0）数値＋単位（px, %, pt, emなど）で指定します。パーセンテージによる指定の場合、幅は包含ブロック（親要素など）の大きさ比例します。

paddingには負の値やautoを指定することはできません。

個別 padding-top: ○px; borderより内側に上の余白を指定
padding-right: ○px; borderより内側に右の余白を指定
padding-bottom: ○px; borderより内側に下の余白を指定
padding-left: ○px; borderより内側に左の余白を指定
ショートハンド padding: ○px; borderより内側に「上下左右」共通に余白を指定
padding: ○px ○px; borderより内側に「上下」「左右」の順に余白を指定
padding: ○px ○px ○px; borderより内側に「上」「左右」「下」の順に余白を指定
padding: ○px ○px ○px ○px; borderより内側に「上」「右」「下」「左」の順に余白を指定(時計回り)

 

6.border

 

6-1.ボーダーのスタイルを指定する

borderプロパティでは、ボーダーのスタイル・太さ・色について上下左右バラバラの指定をすることはできません。 上下左右のボーダーを異なったものにする場合には、 border-top、 border-bottom、border-left、 border-right、 または、 border-style、 border-width、 border-color、 で指定します。

borderスタイルの値 borderスタイルの内容
border: none ボーダーは表示されません。表のセルなどのボーダーが重なり合う場合は他の値が優先されます。これが初期値です。
border: hidden ボーダーは表示されません。表のセルなどのボーダーが重なり合う場合はこの値が優先されます。
border: solid 1本線で表示されます。
border: double 2本線で表示されます。
border: dashed 破線で表示されます。
border: dotted 点線で表示されます。
border: groove 立体的に窪んだ線で表示されます。
border: ridge 立体的に隆起した線で表示されます。
border: inset 上と左のボーダーが暗く、下と右のボーダーが明るく表示され、ボーダーで囲まれた領域全体が立体的に窪んだように表示されます。上下左右の一部だけに指定しても立体感は出ません。
border: outset 上と左のボーダーが明るく、下と右のボーダーが暗く表示され、ボーダーで囲まれた領域全体が立体的に隆起したように表示されます。上下左右の一部だけに指定しても立体感は出ません。

※補足・・・border-radiusプロパティでは、角を丸くしたりできます。

6-2.borderの太さと色を指定する

borderの太さの指定は、数値やキーワードを使って指定します。

キーワードで指定した場合はブラウザにより表示が異なります。

borderの色は、#000fffなどの記述やカラーネームで色指定をします。

数値 px 1ピクセルを1とする単位で、実際に表示されるサイズはモニタの解像度により変化します。
em フォントの高さを1とする単位です
ex 小文字の｢x｣の高さを1とする単位です。
キーワード thin 細い
medium 普通
thick 太い

 

6-2-1.wordpressの段落で見出し3を指定した場合のcssの記途例

6-2-2.wordpressで投稿記事に反映させたい場合の記途例

 

html側(投稿記事のテキストに記入)

css側

ブラウザでの実際の表示

反映させたい文字をここに記入

↑これをブラウザで表示する際に重要なことに気がつきました。

cssを追加するのにSimple Custom CSSを使っていたのですが・・どうやら、このカスタムcssで、うまく読み込めていなかったことを発見 💡 ！！

Twenty Seventeenにある追加ｃｓｓで無事解決しました 🙂