見出しの装飾コードをまとめていました。
※この記事は自身のメモ帳やマニュアル代わりとして書いております。申し訳ございません。
見出しとは以下のようなものです↓
下記の↓「テスト 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;}
このように見出しを変えることが出来ます。
他にもこんな装飾があります。↓
.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』を使用する。