「blockquote」を「“”」で囲ったようなデザインにする方法
第12回：引用（blockquote）をCSSと画像でそれらしく見せる方法というエントリーより。
今回はそのblockquoteを、CSSと画像を使ってクリーンなHTMLを維持しつつ「引用符（“”）」で囲ったようなデザインにする方法を紹介します。
ネタフルのエントリーでもやっていますが、「blockquote」つまり引用している部分を「引用符（“”）」で囲ったようなデザインにする方法が紹介されています。
↓こんな感じです。
1）左上に「“」を表示させる
2）左上に「“」、右上に「”」を表示させる
3）左上に「“」、右上に「”」を表示させる（幅固定で画像一つバージョン）
4）左上に「“」、右下に「”」を表示させる
5）左上に「“」、右下に「”」を表示させる（citeタグも絡めたHTML）
画像とHTMLとCSSがありますので、自分のブログに適用するのも難しくないでしょう。
ちなみにネタフルは背景画像1枚で実現する3）の方法です。
関連記事
同じカテゴリ（09:ブログ）の記事を読むトップページに戻る
トラックバック URL
内容への言及のないもの等は削除する場合があります。
スパム判定ですぐに反映されない場合があります。
20218
Re:「blockquote」を「“”」で囲ったようなデザインにする方法＠ネタフル from creazy photograph
光栄な事にネタフルさんに昨日のTipsエントリーを取り上げて頂きました。 ネタフ... [続きを読む]
トラックバック時刻: 2007年9月 5日 20:37
IT、ニンテンドーDS、Wii、デジカメ、Mac、PC、ブログ、ライフハック、お笑い、アイドル、サッカー、育児、音楽、映画など様々なジャンルについて書いているブログです。
ジョブボード（求人情報）
ネタフルで人気の記事
|
|
| generated by レビュー・ポスター |
ネタフルとは
IT、ニンテンドーDS、Wii、デジカメ、Mac、PC、ブログ、ライフハック、お笑い、アイドル、サッカー、育児、音楽、映画など様々なジャンルについて書いているブログです。ネタフルの経験をもとに「クチコミの技術」というブログマーケティングの本を執筆しました。
メールマガジン
コメント
コメント欄実験中につき閉鎖する場合もあります。また必ず返信できるとも限りませんので予めご了承ください。