引用のデザイン
アイコンはFont Awesomeを使用。いやー便利な世の中になったね。
まずは <head> 内に以下のリンクをコピペ。
<link crossorigin='anonymous' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' integrity='sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN' rel='stylesheet'/>で、以下のCSSを適用。
blockquote {アイコンの種類はcontentの部分になります。
blockquote {
position: relative;
padding: 10px 15px 10px 60px;
box-sizing: border-box;
font-style: italic;
background: #f5f5f5;
color: #555;
}
blockquote:before {
display: inline-block;
position: absolute;
top: 18px;
left: 15px;
vertical-align: middle;
content: '\f0a4';
font-family: FontAwesome;
color: #c0c0c0;
font-size: 30px;
line-height: 1;
}
blockquote p {
padding: 0;
margin: 10px 0;
line-height: 1.7;
}
Font Awesomeの使い方については以下のサイト「サルワカ」さんの記事「CDNを使う」を参考にさせて頂きました。
ものすごくわかりやすいです。
【サルワカ】
https://saruwakakun.com/html-css/basic/font-awesome
日付のデザイン
CSSは date-header span に適用。フォントはweb fontを使ってます。
.date-header span {
font-size:12px;
background-color: #ffd700;
color: #ffffff;
font-family: 'Nunito', sans-serif;
padding: 0.4em;
letter-spacing: 3px;
margin: inherit;
}
記事タイトルのデザイン
なるべくシンプルなものにしました。
h3 {
padding: 0.5em 0;
border-top: solid 1px #b1aa27;
border-bottom: solid 1px #b1aa27;
}
小見出しのデザイン
編集時は「準見出し」を使ってるのでh4に適用
h4 {
position: relative;
padding: 0.2em 0.2em 0.2em 1em;
margin: 10px 0px 25px 0px;
background: #ff8c00;
color:#ffffff;
}
h4:after {
position: absolute;
content: '';
top: 100%;
left: 10px;
border: 10px solid transparent;
border-top: 15px solid #ff8c00;
width: 0;
height: 0;
}
これでちょっとにぎやかになったかな・・
CSSは楽しいですなー。
0 件のコメント:
コメントを投稿