【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]

無料メルマガにぜひご登録ください

ブログより日常を書いています。
ものくろキャンプ メルマガ
購読登録フォーム
Eメール  *
お名前(姓)  *
お名前(名)  *

講座・ワークショップ 開催予定

2022-12-08 19:00 – 22:00
木曜夜開催【東京 ブログ】グループセッション 12月8日
詳細・お申し込みはこちら

2022-12-09 19:00 – 20:30
金曜夜:こころの発酵 マインドフルネス瞑想会+軽食
詳細・お申し込みはこちら

2022-12-10 11:00 – 13:30
オンライン・リアル選べます【あみだす発酵アカデミー】本場香港の味 XO醤作りクラス
詳細・お申し込みはこちら

2022-12-10 18:00 – 21:00
2022 あみだす望年会っ
詳細・お申し込みはこちら

2022-12-16 19:00 – 22:00
第4金曜日開催 オンライン【ブログ】グループレッスン 12月16日※12月のみ第3週目となります
詳細・お申し込みはこちら

2022-12-17 11:00 – 13:30
土曜【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2022-12-18 13:00 – 14:30
日曜昼:こころの発酵  マインドフルネス瞑想会+ランチ
詳細・お申し込みはこちら

2022-12-30 10:00 – 18:00
リアル・オンラインどちらもOK!ものくろ流WordPressスタートアップ講座 -第42期- 講師 ものくろ
詳細・お申し込みはこちら

2023-01-07 13:00 – 15:00
大阪【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-01-09 20:00 – 21:30
【あみだす新春スペシャル】運気に乗ろう!暦を味方に付ける講座:オンライン
詳細・お申し込みはこちら

2023-01-11 19:30 – 21:30
【ものくろキャンプ】全5回 第二水曜日・オンライン開催 「情報発信しようとするとなぜか?ブロックがかかってしまう人のためのブログ・SNS講座」
詳細・お申し込みはこちら

2023-01-12 11:00 – 13:30
平日【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-01-12 19:00 – 22:00
木曜夜開催【東京 ブログ】グループセッション 1月12日
詳細・お申し込みはこちら

2023-01-14 11:00 – 13:30
オンライン【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-01-14 15:00 – 17:30
【あみだす発酵アカデミー】白菜キムチ(キムジャン)作りクラス
詳細・お申し込みはこちら

2023-01-15 13:00 – 15:30
日曜【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-01-21 11:00 – 13:30
土曜【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-01-27 19:00 – 22:00
第4金曜日開催 オンライン【ブログ】グループレッスン 1月27日
詳細・お申し込みはこちら

2023-02-18 11:00 – 13:30
土曜【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-02-19 11:00 – 13:30
日曜【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-02-23 11:00 – 13:30
木・祝日【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

  • ブックマーク

【案内板】

このブログをはじめて読んだあなたへ
ぜひ読んでもらいたい記事を用意しました。

オンラインショップあります

↓ 下のバーナーをクリックすると移動します。