2017年05月19日

(7)個別記事タイトルを装飾する(吹き出し)


 f-f_object_173-s512_f_object_173_0nbg.png   
使用デザイン
 Seesaaブログの「ライトグレー(両サイドバー)」


個別記事タイトルを装飾する前に…チョット前処理!

装飾する前に、テンプレートデザインの個別記事見出し(h3)に、少し気になる箇所があるので前処理を施しました。
左上に小さな丸印がついています。
これを取ります。

スタイルシートの47行目あたりに↓の記述があるので赤い部分を含んだ1行をまるごと削除。

background-image:url(http://blog.seesaa.jp/img/bg/lightgray_1/title.gif);

カスタマイズ個別記事見出しマル付き.jpg
 ↓
カスタマイズ個別見出しシンプル.jpg



いよいよ、個別記事タイトルを装飾!

Webparkの「CSSの擬似要素を使った見出しデザイン」を参考にして、個別記事タイトル(h3)を装飾してみました。

前回の記事「(6)個別記事タイトルの背景色を変える/サイドバーのタイトルを装飾する」では、個別記事タイトルのフォントサイズが24ピクセルで、タイトルの背景を薄い水色にしただけのシンプルなものでしたが、もう少しオシャレにカッコヨクしてみました。


フォントサイズ24ピクセルから21ピクセルに変更し、以下の記述をスタイルシートの最後に追加。

h3 {
position: relative;
background: #afeeee;
font-size: 21px;
line-height: 1;
border :1px solid #afeeee;
margin: 30px -10px 10px -10px;
padding: 15px 5px 12px 10px;
border-radius: 3px;
}
h3:after {
content: "";
position: absolute;
top: 100%;
left: 30px;
height: 0;
width: 0;
border: 10px solid transparent;
border-top: 10px solid #afeeee;
}



完成
カスタマイズ個別見出しふきだし.jpg

スポンサーリンク

 
posted by スピカ at 22:01| シーサーブログのカスタマイズ | 更新情報をチェックする