アフィリエイト広告を利用しています

【el plano カスタマイズ】 見出しを角丸にして色合いも統一。-CSS3テクニック-

 WordPressテーマ ”el plano”を使っています。タイトルと見出し(Hタグ)のデザインを変更して、『ものくろっ』 な雰囲気を多め(当社比 256% 増)にしました。

  • el planoで定義されていくスタイルシート(CSS)のクラス名
  • 参考にしたCSSのサンプルコード

これら2つをまとめました。

スタイルシート(CSS)のクラス名

el Planoの記事タイトル部分のCSSクラス名は『.posttitle』です。

見出しはh3・h4タグの2つのみをものくろは使っています。CSSクラス名は、h3・h4タグともに『.entry h3』・『.entry h4』になります。

参考にした記事(感謝)

CSSで角丸などのデザインを作るコードは、これら2つのサイトさんを参考にさせていただきました。感謝です。

吹き出しスタイル(タイトル部分)・影付き角丸(h3タグ)

コピペで出来るCSS3で見出しスタイリング | 3streamer blog

角丸の枠線(h4タグ)

CSSで角丸ボックスを作る方法 | ウェブ担当者になりました

設定したCSSコード

[code]
/* H3 装飾 */

.entry h3 {
margin:0 0 30px 0;
padding:12px 10px;
background: #696969;
color:#FFF;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
text-shadow:1px 1px 2px #333;
box-shadow:inset -1px -1px 2px rgba(0,0,0, 0.6),inset 1px 1px 2px rgba(255,255,255,0.8);
border-bottom:none;
}

/* H4 装飾 */

.entry h4 {
color: #696969 ;
font-size: 15px;
border: solid 2px #333333;
border-radius: 4px;
padding: 7px 5px 7px 7px;
}

/* タイトル装飾 */
.posttitle {
background: #696969;
margin:0 0 30px 0;
padding:12px 10px;
color:#FFF;
text-shadow:1px 1px 2px #333;
position:relative;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border:4px solid #333333;
}

.posttitle:before {
content: ‘ ‘;
position: absolute;
z-index: 2;
width: 0;
height: 0;
left: 14px;
bottom: -27px;
background: transparent;
border-color: #696969 transparent transparent transparent ;
border-style:solid;
border-width:15px;
}
.posttitle:after {
content: ‘ ‘;
position: absolute;
z-index: -1;
width: 0;
height: 0;
left: 5px;
bottom: -43px;
background: transparent;
border-color:#333333 transparent transparent transparent ;
border-style:solid;
border-width:24px;
}
[/code]

この記事を書いた人

大東 信仁

カンパチが好きです。

プロフィールはこちら

10月14日開催 参加者募集中
(画像をタップ→詳細へ)

ミッションナビゲート モニター
(画像をタップ→詳細へ)

広告