子-8. スタイルシート

前項で追加加工した[style.css]がスタイルシートです。
大まかに言えば、PHPがページのパーツ毎の設定みたいなもので、CSSはデザインに関する事といった感じです。
 

決まり事

半角英数の『/*』と『*/』で囲まれた部分は出力しません。
/* 説明文 */ という使い方が出来ます。
先ほどの文字サイズ変更は下図のように記述しています。

 

CSSに追加例

以降は採用したいものだけを1行開けて[style.css]に追加して下さい。

フォント変更

Windows、Mac共通のフォント:游ゴシック に変更する場合。

/* フォント変更 */
body {
	font-size:13px;
	font-size:1.3rem;
	font-family:"游ゴシック", "YuGothic", "Yu Gothic", "YuGothic Medium","メイリオ","Meiryo",'ヒラギノ角ゴ ProN W3',"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Helvetica, Arial,"MS Pゴシック","MS PGothic",sans-serif;
	font-weight: 500;
	text-rendering:optimizeLegibility;
	color:#333;
}

 

見出しを変更

下図の見出しがデフォルトです。
タイトルの方が変更したものです。

 

CSS

『●●●●●●』をご自身の色に変更して下さい。

/* === 見出しを変更 === */
/* ---------------------------------------------------------
/ 『見出し(h2)』
--------------------------------------------------------- */
.entry-content h2 {
color: #●●●●●●; background-color: #fff; border: 2px solid #●●●●●●; padding: 10px 5px; margin: 20px 0px;
}

/* ---------------------------------------------------------
/ 『見出し(h3)』
--------------------------------------------------------- */
.entry-content h3 { background-color: #●●●●●●; color: #fff;
padding: 5px 10px;
}

/* ---------------------------------------------------------
/ 『見出し(h4)』
/
/   ・border(2色ライン)
--------------------------------------------------------- */
/* ----- ベースのborder ----- */
.entry-content h4 {
  border-top: none;
  border-bottom: solid 3px #●●●●●●;
  position: relative;
}

/* ----- 2色目のborder ----- */
.entry-content h4:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #939393;
  bottom: -3px;
  left: -3px;
  width: 15%;
}

/* ---------------------------------------------------------
/ 『見出し(h5)』
/
/   ・border+ワンポイント(レクタングル2つ)
--------------------------------------------------------- */
/* ----- border ----- */
.entry-content h5 {
  position: relative;
  padding: 0 0 2px 32px;
  border-bottom: 2px solid #●●●●●●;
}

/* ----- ワンポイント ----- */
.entry-content h5:before, .entry-content h5:after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 12px;
  height: 12px;
  border: 2px solid #●●●●●●;
  margin: auto;
}

.entry-content h5:before {
  top: -20px;
  left: 0px;
}

.entry-content h5:after {
  top: -8px;
  left: 6px;
}

/* ---------------------------------------------------------
/ 『見出し(h6)』
/
/   ・border+ワンポイント(◆)
--------------------------------------------------------- */
/* ----- border ----- */
.entry-content h6 {
  position: relative;
  padding: 0 0 2px 32px;
  border-bottom: 1px solid #●●●●●●;
}

/* ----- ワンポイント ----- */
.entry-content h6:after {
  position: absolute;
  top: 5px;
  left: 4px;
  z-index: 2;
  content: '';
  width: 12px;
  height: 12px;
  background-color: #●●●●●●;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

 

ベーシックデザインブルー(デフォルト)

●●●●●●:1177ba

/* === 見出しを変更 === */
/* ---------------------------------------------------------
/ 『見出し(h2)』
--------------------------------------------------------- */
.entry-content h2 {
color: #1177ba; background-color: #fff; border: 2px solid #1177ba; padding: 10px 5px; margin: 20px 0px;
}

/* ---------------------------------------------------------
/ 『見出し(h3)』
--------------------------------------------------------- */
.entry-content h3 { background-color: #1177ba; color: #fff;
padding: 5px 10px;
}

/* ---------------------------------------------------------
/ 『見出し(h4)』
/
/   ・border(2色ライン)
--------------------------------------------------------- */
/* ----- ベースのborder ----- */
.entry-content h4 {
  border-top: none;
  border-bottom: solid 3px #1177ba;
  position: relative;
}

/* ----- 2色目のborder ----- */
.entry-content h4:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #939393;
  bottom: -3px;
  left: -3px;
  width: 15%;
}

/* ---------------------------------------------------------
/ 『見出し(h5)』
/
/   ・border+ワンポイント(レクタングル2つ)
--------------------------------------------------------- */
/* ----- border ----- */
.entry-content h5 {
  position: relative;
  padding: 0 0 2px 32px;
  border-bottom: 2px solid #1177ba;
}

/* ----- ワンポイント ----- */
.entry-content h5:before, .entry-content h5:after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 12px;
  height: 12px;
  border: 2px solid #1177ba;
  margin: auto;
}

.entry-content h5:before {
  top: -20px;
  left: 0px;
}

.entry-content h5:after {
  top: -8px;
  left: 6px;
}

/* ---------------------------------------------------------
/ 『見出し(h6)』
/
/   ・border+ワンポイント(◆)
--------------------------------------------------------- */
/* ----- border ----- */
.entry-content h6 {
  position: relative;
  padding: 0 0 2px 32px;
  border-bottom: 1px solid #1177ba;
}

/* ----- ワンポイント ----- */
.entry-content h6:after {
  position: absolute;
  top: 5px;
  left: 4px;
  z-index: 2;
  content: '';
  width: 12px;
  height: 12px;
  background-color: #1177ba;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

 

ベーシックデザイングリーン

●●●●●●:408080

/* === 見出しを変更 === */
/* ---------------------------------------------------------
/ 『見出し(h2)』
--------------------------------------------------------- */
.entry-content h2 {
color: #408080; background-color: #fff; border: 2px solid #408080; padding: 10px 5px; margin: 20px 0px;
}

/* ---------------------------------------------------------
/ 『見出し(h3)』
--------------------------------------------------------- */
.entry-content h3 { background-color: #408080; color: #fff;
padding: 5px 10px;
}

/* ---------------------------------------------------------
/ 『見出し(h4)』
/
/   ・border(2色ライン)
--------------------------------------------------------- */
/* ----- ベースのborder ----- */
.entry-content h4 {
  border-top: none;
  border-bottom: solid 3px #408080;
  position: relative;
}

/* ----- 2色目のborder ----- */
.entry-content h4:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #939393;
  bottom: -3px;
  left: -3px;
  width: 15%;
}

/* ---------------------------------------------------------
/ 『見出し(h5)』
/
/   ・border+ワンポイント(レクタングル2つ)
--------------------------------------------------------- */
/* ----- border ----- */
.entry-content h5 {
  position: relative;
  padding: 0 0 2px 32px;
  border-bottom: 2px solid #408080;
}

/* ----- ワンポイント ----- */
.entry-content h5:before, .entry-content h5:after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 12px;
  height: 12px;
  border: 2px solid #408080;
  margin: auto;
}

.entry-content h5:before {
  top: -20px;
  left: 0px;
}

.entry-content h5:after {
  top: -8px;
  left: 6px;
}

/* ---------------------------------------------------------
/ 『見出し(h6)』
/
/   ・border+ワンポイント(◆)
--------------------------------------------------------- */
/* ----- border ----- */
.entry-content h6 {
  position: relative;
  padding: 0 0 2px 32px;
  border-bottom: 1px solid #408080;
}

/* ----- ワンポイント ----- */
.entry-content h6:after {
  position: absolute;
  top: 5px;
  left: 4px;
  z-index: 2;
  content: '';
  width: 12px;
  height: 12px;
  background-color: #408080;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

 

ベーシックデザインオレンジ

●●●●●●:f28534

/* === 見出しを変更 === */
/* ---------------------------------------------------------
/ 『見出し(h2)』
--------------------------------------------------------- */
.entry-content h2 {
color: #f28534; background-color: #fff; border: 2px solid #f28534; padding: 10px 5px; margin: 20px 0px;
}

/* ---------------------------------------------------------
/ 『見出し(h3)』
--------------------------------------------------------- */
.entry-content h3 { background-color: #f28534; color: #fff;
padding: 5px 10px;
}

/* ---------------------------------------------------------
/ 『見出し(h4)』
/
/   ・border(2色ライン)
--------------------------------------------------------- */
/* ----- ベースのborder ----- */
.entry-content h4 {
  border-top: none;
  border-bottom: solid 3px #f28534;
  position: relative;
}

/* ----- 2色目のborder ----- */
.entry-content h4:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #939393;
  bottom: -3px;
  left: -3px;
  width: 15%;
}

/* ---------------------------------------------------------
/ 『見出し(h5)』
/
/   ・border+ワンポイント(レクタングル2つ)
--------------------------------------------------------- */
/* ----- border ----- */
.entry-content h5 {
  position: relative;
  padding: 0 0 2px 32px;
  border-bottom: 2px solid #f28534;
}

/* ----- ワンポイント ----- */
.entry-content h5:before, .entry-content h5:after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 12px;
  height: 12px;
  border: 2px solid #f28534;
  margin: auto;
}

.entry-content h5:before {
  top: -20px;
  left: 0px;
}

.entry-content h5:after {
  top: -8px;
  left: 6px;
}

/* ---------------------------------------------------------
/ 『見出し(h6)』
/
/   ・border+ワンポイント(◆)
--------------------------------------------------------- */
/* ----- border ----- */
.entry-content h6 {
  position: relative;
  padding: 0 0 2px 32px;
  border-bottom: 1px solid #f28534;
}

/* ----- ワンポイント ----- */
.entry-content h6:after {
  position: absolute;
  top: 5px;
  left: 4px;
  z-index: 2;
  content: '';
  width: 12px;
  height: 12px;
  background-color: #f28534;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

 

ベーシックデザインピンク

●●●●●●:fe4444

/* === 見出しを変更 === */
/* ---------------------------------------------------------
/ 『見出し(h2)』
--------------------------------------------------------- */
.entry-content h2 {
color: #fe4444; background-color: #fff; border: 2px solid #fe4444; padding: 10px 5px; margin: 20px 0px;
}

/* ---------------------------------------------------------
/ 『見出し(h3)』
--------------------------------------------------------- */
.entry-content h3 { background-color: #fe4444; color: #fff;
padding: 5px 10px;
}

/* ---------------------------------------------------------
/ 『見出し(h4)』
/
/   ・border(2色ライン)
--------------------------------------------------------- */
/* ----- ベースのborder ----- */
.entry-content h4 {
  border-top: none;
  border-bottom: solid 3px #fe4444;
  position: relative;
}

/* ----- 2色目のborder ----- */
.entry-content h4:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #939393;
  bottom: -3px;
  left: -3px;
  width: 15%;
}

/* ---------------------------------------------------------
/ 『見出し(h5)』
/
/   ・border+ワンポイント(レクタングル2つ)
--------------------------------------------------------- */
/* ----- border ----- */
.entry-content h5 {
  position: relative;
  padding: 0 0 2px 32px;
  border-bottom: 2px solid #fe4444;
}

/* ----- ワンポイント ----- */
.entry-content h5:before, .entry-content h5:after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 12px;
  height: 12px;
  border: 2px solid #fe4444;
  margin: auto;
}

.entry-content h5:before {
  top: -20px;
  left: 0px;
}

.entry-content h5:after {
  top: -8px;
  left: 6px;
}

/* ---------------------------------------------------------
/ 『見出し(h6)』
/
/   ・border+ワンポイント(◆)
--------------------------------------------------------- */
/* ----- border ----- */
.entry-content h6 {
  position: relative;
  padding: 0 0 2px 32px;
  border-bottom: 1px solid #fe4444;
}

/* ----- ワンポイント ----- */
.entry-content h6:after {
  position: absolute;
  top: 5px;
  left: 4px;
  z-index: 2;
  content: '';
  width: 12px;
  height: 12px;
  background-color: #fe4444;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}