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

最近の散財はこちら!

出張に便利そうなコンセントを買った!塩は、ぬちまーす。

【WordPressブログ スタートアップ講座 開催決定しました】

11月3日 祝日 水曜日
・10時から19時
・Kitchen Bee(4名)とオンライン(4名)のハイブリッド開催です。

オンラインのスタートアップ講座、気になっていたけど、4日間に分かれていて、スケジュールが、、というあなた。オンラインでも1日でOKなスケジュールを作りました。

ぜひ、この機会に、情報発信の母艦を一緒に作りましょう。

また、「ブログをスタートしたい」という方に、すごく良い講座あるよっと、ご紹介いただけると、飛び上がって喜びます。

よろしくお願いします。

(なお、リアルの会場は、Kitchen Beeにて人数を制限し、感染症対策を行って開催します。)

追伸、

また、3日の19時から20時の1時間、ものくろキャンプ交流会を開催します。こちらは、少人数ですが、Kitchen Beeのお席もご用意できる予定です。

オンラインとハイブリッド開催しますので、オンライン参加も大歓迎です。イベントを立ち上げますが、まずは、カレンダーに丸印を!

ブログスタートアップ講座のお申し込み告知ページを見逃したくない!という方は、下のメールマガジンにご登録ください。

お申し込み開始時にご案内をお送りします。

無料メルマガ発行中

メルマガも2021年は頑張って書いています。ぜひ登録して読んでくださいね。(無料です)

メールマガジン
無料で購読
メールアドレス *
* 必須項目

【案内板】

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

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

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


Youtube

  • ブックマーク

この記事を書いた人

テストテスト