サイトの表示を高速化するプラグインをいろいろ入れたら、記事内のh3などの見出しタグの装飾が崩れたみたいだ。
もともと、STINGER3では、記事内のh3見出しに画像を使っている。
この際、表示の高速化をかねて記事内の見出しのスタイルシートを作り直そう。
カスタマイズするテーマ
・STINGER3
カスタマイズするphp
・スタイルシート
・smart.css
カスタマイズの目的
・表示速度の改善。
・画像を使わない。
STINGER3の記事内の見出しをスタイルシートだけで再構築
STINGER3のsmart.css.php記事内のh3見出し原型
smart.cssの記述
.kizi h3 {
font-size: 20px;
margin-bottom: 30px;
margin-top: 10px;
padding-top: 15px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 60px;
color: #000;
line-height: 30px;
background-image: url(images/cah3-bk.png);
background-repeat: no-repeat;
background-position: left center;
margin-left: 0px;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #999;
}
スタイルシート.phpの記事内のh3のスタイルシートの記述
スタイルシート.phpの記事内のh3のスタイルシートの記述はpost h3 {の中にある。
スタイルシートの説明
font-size: 20px;
⇒文字の大きさ。
margin-bottom: 30px;
⇒外側下の空間を指定。
margin-top: 10px;
⇒外側上の空間を指定。
padding
⇒内側の空間を指定。
topは空間の上、rightは右、bottomは下、leftは左。
color: #000;
⇒テキストの色。
line-height:
⇒行の高さ、行間。
background-image:
⇒背景画像。
background-repeat: no-repeat;
⇒背景画像の繰り返し、no-repeatは繰り返さないを意味する。
background-position: left center;
⇒開始画像の位置。
border-bottom
⇒下にボーダーラインを入れる。
border-style:
⇒ボーダーの線種。
dottedは点線。
border-color:
⇒ボーダーの色
画像部分をスタイルシートから削除
まずは、スタイルシートから画像部分のスタイルを削除する。
削除するのは以下の部分。
background-image: url(images/cah3-bk.png);
background-repeat: no-repeat;
background-position: left center;
サイト表示高速化を狙ってスタイルシートの記述を短縮
スタイルシートは一括指定できるばあいがある。
一括指定できる部分は一括指定して記述を省略したほうがサイト表示を高速化できるらしいので、一括指定してしまおう。
marginとpaddingの一括指定の法則
値を1つ指定した場合： 指定した値が[上下左右]marginやpaddingになる。
値を2つ指定した場合： 記述した順に[上下][左右]marginやpaddingになる。
値を3つ指定した場合： 記述した順に[上][左右][下]marginやpaddingになる。
値を4つ指定した場合： 記述した順に[上][右][下][左]marginやpaddingになる。
例）
margin-bottom: 30px;
margin-top: 10px;
margin-left: 0px;
padding-top: 15px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 60px;
↓
margin: 10px 0px 30px 0px;[上][右][下][左]
padding: 15px 10px 15px 60px;[上][右][下][左]
見出しの先頭にスタイルシート border-leftで装飾する
例）
border-left: 30px solid #ff99ff;
solid⇒直線、px⇒線の太さ、#⇒線の色。
px以外にも、em、ex、thin（細い）、medium（普通）、thick（太い）が利用できる。
emはフォントの高さを1として表示される大きさを指定する。
exは小文字のxを基準にしている。
ついでにmarginやpaddingの値も少し変えてみた。
.kizi h3 {
font-size: 20px;
margin: 30px 0px 15px 0px;
padding: 0px 0px 0px 5px;
color: #000;
line-height: 100%;
border-bottom: 1px dotted #ff6600;
border-left: 20px outset #ff6666;
}
＊smart.cssの記述は.post h3 {の中。
でも結局画像部分のスタイルシートを削除しただけ。。
なんか普通・・・。
結果、ちょっとだけ表示速度アップ。
ほかにもいろいろと余分なものがありそうだけど。
でも無駄な画像が無くなって表示速度がちょっと上がったのでこれで良いか。
コメント