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

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

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

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

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


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

ここに文章を書いてください 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&スタイルシートレイアウトブック―「脱!フレーム&テーブル」で「最新・標準」レイアウトにリメイク!を参考にしました。この本の感想はこちらに書いています。


スタイルシート スタンダード・デザインガイド―SEO/ユーザビリティ/アクセシビリティを考慮した実践的HTML&CSSデザイン術
エ・ビスコム・テック・ラボ
毎日コミュニケーションズ (2004/06)
売り上げランキング: 418
おすすめ度の平均: 4.44
4 日本語CSS本のなかで恐らくこれが一番
4 これはおすすめ!
5 とりあえずこの本を見ながらCSSのサイトを作りました


おしゃれなブログのデザインを勉強したい方は、こちらのランキング上位が参考になります。

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 0

この記事へのコメント

この記事へのトラックバック