2005.07.19

付箋紙をブログに貼り付ける　コピペでできるブログカスタマイズ講座

幸せになろう！一日一学！でペタペタと貼り付けている、付箋紙の作り方を紹介します。

簡単にできるわりに、見栄えがよいのでおすすめです。

スタイルシートがわからない方向けに、コピペ用のソースを用意しておきます。

ブログに貼り付けるだけで、画像を使わずに付箋紙風の見出しを作成することができます。

■コピペでできるブログカスタマイズ講座

ここに文章を書いてください by BOKU笑太郎

黄色の付箋紙コピペ用ソース

<div style=”border-right:1px solid #aaaaaa;
border-bottom: 1px solid #aaaaaa;
border-left: 15px solid #FFFF00;
background-color: #fffaf4;
padding: 2px 5px;
width:100%;”>
ここに文章を書いてください by BOKU笑太郎
</div>

ここに文章を書いてください by BOKU笑太郎

黄緑色の付箋紙　コピペ用ソース

<div style=”border-right:1px solid #aaaaaa;
border-bottom: 1px solid #aaaaaa;
border-left: 15px solid #33FF00;
background-color: #fffaf4;
padding: 2px 5px;
width:100%;”>
ここに文章を書いてください by BOKU笑太郎
</div>

ここに文章を書いてください by BOKU笑太郎

赤色の付箋紙　コピペ用ソース

<div style=”border-right:1px solid #aaaaaa;
border-bottom: 1px solid #aaaaaa;
border-left: 15px solid #FF0000;
background-color: #fffaf4;
padding: 2px 5px;
width:100%;”>
ここに文章を書いてください by BOKU笑太郎
</div>

長さの変更は、width:100%の数値を変えればできます。

半分の長さにしたい場合は、50％にすればできます。

<div style=”border-right:1px solid #aaaaaa;
border-bottom: 1px solid #aaaaaa;
border-left: 15px solid #FF0000;
background-color: #fffaf4;
padding: 2px 5px;
width:50%;”>
ここに文章を書いてください by BOKU笑太郎
</div>

このように表示されます。

半分の長さになりました by BOKU笑太郎

※スタイルシートだけでサイト作りをしていこうとしている人向けのHTML&スタイルシートレイアウトブック―「脱!フレーム&テーブル」で「最新・標準」レイアウトにリメイク!を参考にしました。この本の感想はこちらに書いています。