HTML,CSS,PHP,ワードプレスカスタマイズ 技術情報資料

単純な、タイトル飾り

簡単なCSSで h2 , h3 ,h4 の飾り。

左側に棒をつけるタイプのCSS。

h4 {
border-left:#F4CAD0 5px solid;
border-bottom:#F4CAD0 1px dotted;
padding: 5px 10px !important;
color:#DE5565 !important;
}


これは、ピンクのバーをつけて、中の文字がちょっと濃いピンク。

border-left:#F4CAD0 5px solid; ピンクで幅5pxの縦棒を書く。

border-bottom:#F4CAD0 1px dotted; タイトルの下にピンクで下線を書く。

padding: 5px 10px !important; 上下に5px余白を開ける。左右に10px余白を開ける。

color:#DE5565 !important; 文字の色を濃い目のピンクにする。


多くのテーマの場合、h1、h2、h3ぐらいまでは、飾りがついているものが多いですけど、

h4、h5ぐらいになると特になにもしていないテーマも結構あります。


今回、使ったテーマが、ページタイトルがH2、投稿タイトルがh3。

そしたら、記事の段落は、h4にならざるをえないではないですか?!

ところが、h4にはなんの飾りも入っていない・・・って、あーた(--;


ほんと、身勝手なテーマです。

でも、文句を言っていてもしかたがない。

でも凝ったデザインを作るのは本末転倒。

記事を入れることが最優先。


って、ことで簡単なよくあるCSSでごまかしましたさ。


この今回使おうと思ったテーマは、ここ以外は結構シンプルでいい感じなので使いまわしたい。

ってことで、このテーマを使うときは、いちいちそのサイトにログインしてCSSを持ってくるのは、めんどうなので、このサイトに張っておくことにしたと言うわけです(笑)

楽でいいね?と思ったらご利用ください。






スポンサーリンク

関連記事

スポンサーリンク

カテゴリー