綜合

ワードプレス 見出しタグの装飾コード(この記事は自分のメモ帳代わりです。)

更新日:

見出しの装飾コードをまとめていました。

※この記事は自身のメモ帳やマニュアル代わりとして書いております。申し訳ございません。

 

 

 

見出しとは以下のようなものです↓

 

ああああ

 

 

 

 


 

 

下記の↓「テスト 01」の見出しを作りたい場合は【タグコードNo.1】を

CSSテキストファイルに付け加えてください。

 

テスト 01

 

【タグコードNo.1】

 

/* 見出しh2 */
.entry-content h2 {
border-left: 5px solid #1F5E73;
border-bottom: 1px solid #1F5E73;
padding: 0 0 0 15px ;
line-height: 2;
font-size: 18px;
background-color: #fff;}

 

 


 

下記の↓「テスト02」見出しは【タグコードNo.2】

 

テスト 02

 

【タグコードNo.2】

/*見出しh3*/
.entry-content h3 {
border-bottom: 1px solid #000000;
padding: 0 0 0 15px ;
line-height: 2;
font-size: 18px;
background-color: #fff;}

 

 

このように見出しを変えることが出来ます。

 


 

他にもこんな装飾があります。↓

 

 

 

テスト03
【赤付箋】

.box9 {
padding: 0.5em 1em;
margin: 2em 0;
color: #A2462F;
background: #FFEFEF;/*背景色*/ border-top: solid 6px #ff7d6e;
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);/*影*/ }
.box9 p {
margin: 0;
padding: 0;
}

<div class="box9">

</div>

【開始タグ】

<div class="box9">

【終了タグ】

</div>

 

 

 


 

【茶色付箋】

.box8 {
padding: 0.5em 1em;
margin: 2em 0;
color: #804900;
background: #FEF8E0;/*背景色*/ border-top: solid 6px #ffc06e;
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);/*影*/ }
.box8 p {
margin: 0;
padding: 0;
}

【開始タグ】

<div class="box8">

 

【終了タグ】

</div>

 

 


 

【青付箋】

.box10 {
padding: 0.5em 1em;
margin: 2em 0;
color: #2C4F7A;
background: #EFF4FA;/*背景色*/ border-top: solid 6px #1dc1d6;
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);/*影*/ }
.box10 p {
margin: 0;
padding: 0;
}

 

【開始タグ】

<div class="box10">

 

【終了タグ】

</div>

 


 

【見出し付黄色】

 

.box27 {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #FFC107;
}
.box27 .box-title {
position: absolute;
display: inline-block;
top: -27px;
left: -3px;
padding: 0 9px;
height: 25px;
line-height: 25px;
vertical-align: middle;
font-size: 17px;
background: #FFC107;
color: #ffffff;
font-weight: bold;
border-radius: 5px 5px 0 0;
}
.box27 p {
margin: 0;
padding: 0;
}

 

【開始タグ】

<div class="box27"><span class="box-title">ここにタイトル</span>

 

【終了タグ】

</div>

 

 

 


【見出し青】

.box29 {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #62c1ce;
}
.box29 .box-title {
position: absolute;
display: inline-block;
top: -27px;
left: -3px;
padding: 0 9px;
height: 25px;
line-height: 25px;
vertical-align: middle;
font-size: 17px;
background: #62c1ce;
color: #ffffff;
font-weight: bold;
border-radius: 5px 5px 0 0;
}
.box29 p {
margin: 0;
padding: 0;
}

【開始タグ】

<div class="box29"><span class="box-title">ここにタイトル</span>

 

【終了タグ】

</div>

 

 


【灰色で二重線】

.box6 {
padding: 0.5em 1em;
margin: 2em 0;
border: double 5px #A9A9A9;
}
.box6 p {
margin: 0;
padding: 0;
}

【開始タグ】

<div class="box6">

【終了タグ】

</div>

 

 


 

【青二重線】

 

.box5 {
padding: 0.5em 1em;
margin: 2em 0;
border: double 5px #4ec4d3;
}
.box5 p {
margin: 0;
padding: 0;
}

【開始タグ】

<div class="box5">

【終了タグ】

</div>


 

CSSコードに含まれている言語の意味です。

border -top 上に線

border-bottom 下に線

border-left 左に線

border-right 右側に線

 

 

 


カラーコード一覧表

 

http://www.netyasun.com/home/color.html

 

 


 

 

あああ
あああ
あああ
ここにタイトルあああ
ここにタイトルあああ
ここにタイトルあああ
あああ
あああ

 


 

 

ワードプレス ヘッダー画像のサイズ

横が880~1000程、縦が180~300くらい。

 

画像の編集は、

 

画像編集ソフト『Photoscape』を使用する。

 


 

-綜合

Copyright© 生活こむ , 2021 All Rights Reserved Powered by AFFINGER5.