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

シェア大歓迎

この記事が役に立ったり、参考になったり、読んで嬉しいと感じていただけたら、ぜひ下のボタンからシェアしてください。シェア・ツィートしていただけると、飛び跳ねるほど嬉しく、今後の記事作成の原動力になります。

大歓迎です!ぜひシェアしてください。


広告

この記事を書いた人

ものくろ(Webコーチ)

株式会社あみだす 代表取締役 / 博士課程中退(農学) / ブロガー / Web&Blogコーチ / 親指シフト orzレイアウト開発者 / 講師 / フリーランス / 旅人 / 民事裁判経験者 / 毎月どこかに出張

ブログは月間65万PVを記録(2016年1月)。 これまでに250回を超えるワークショップ開催・のべ1,200名のブログサポートに携わる。

WordPressが得意 / 好きなもの(無刻印キーボード・十割蕎麦・湯葉)/ あまり好みでないもの(ブロッコリー・値切り)

開催している講座に参加する

この記事が気に入ったら
いいね!しよう

最新の情報をお届けします

あわせて読みたい

記事のタイトルとURL をコピーする!

広告

Facebookを使うノウハウ公開中

農家・フリーランス・経営者向け SNS使いこなしセミナー (2018年1月版)の内容を全文公開中!

無料 メルマガ発行中

運営しているものくろキャンプの講座・イベント開催情報や、ちょっと役立つ情報をお届けしています。

ほぼ毎日発行しています。

Web・Blogコーチのご依頼はこちら

Web・ブログのコンサルティング・ご相談のご依頼を受け付けております。

  • Webを活用して本気でビジネス・人生を切り開きたい方
  • Webのテクニカルな改善でお悩みの方
  • アイディアはあるのに、記事の文章にするのがうまくいかない方
  • 親指シフトを本気で習得したい方

そんな多様なお悩み、そして、さらに隠れていて見えないお悩みも見つけます。

ダイレクトにアドバイス。そして、ご自身の問題解決力を手にしていただく時間を。このブログ2400記事をアウトプットした経験に基づく良質なノウハウ・スキルを手に入れてください。時間の大切さを感じてるあなたへオススメです。

ものくろキャンプ Web・Blogコーチ セッション

お申し込みはこちらのお問い合わせフォームからお願いします。

お申し込みはこちらのお問い合わせフォームからお願いします。

ものくろキャンプ イベント案内

ものくろキャンプの開催スケジュールはこちら

広告