大東 信仁（ものくろ） 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]
