Creazy!

WEBエンジニア・ヤガーのテック・ガジェットブログ

技術情報

Re:「blockquote」を「“”」で囲ったようなデザインにする方法@ネタフル

投稿日:


光栄な事にネタフルさん昨日のTipsエントリーを取り上げて頂きました。

ネタフルのエントリーでもやっていますが、「blockquote」つまり引用している部分を「引用符(“”)」で囲ったようなデザインにする方法が紹介されています。

via: [N] 「blockquote」を「“”」で囲ったようなデザインにする方法

いつも通り Livedoor Reader でRSS読んでたらいきなり自分のエントリーがでてるんだもん、そりゃ驚くっちゅー話で。
ネタフルさんのエントリーがUPされた13時過ぎくらいから急にアクセスがあがり、はてブもいつもより多め
これが、噂に聞いたネタフル砲か(ネタフルキャノンと読んだ方が格好良いか?)
ああ、ありがたや、ありがたや。

ついでに、余計なお世話だと思いますがネタフルさんの引用(blockquote)を勝手に添削してみます(!)

HTMLは非常にシンプルにblockquoteで囲っているだけ。blockquoteの中にpタグとかは使っていません。
引用元の表記はciteタグは使わずにpタグのみ。以下の感じです。

<p><a href="http://creazy.net/2007/09/blockquote_css.html">第12回:引用(blockquote)をCSSと画像でそれらしく見せる方法</a>というエントリーより。</p>
<blockquote>今回はそのblockquoteを、CSSと画像を使ってクリーンなHTMLを維持しつつ「引用符(“”)」で囲ったようなデザインにする方法を紹介します。</blockquote>

そしてCSSはこんな感じ、

.content blockquote {
color: #333333;
line-height: 160%;
font-size: 14px;
width: 340px;
background-image: url(image2/blockquote_bg.gif);
background-repeat: no-repeat;
padding-top: 20px;
padding-right: 5px;
padding-left: 5px;
background-color: #F5F5F5;
padding-bottom: 10px;
}

ここで気をつけたいのが前のエントリーでも書いたブラウザ依存の問題。

ポイントは横幅が固定じゃないとうまくいかないので注意が必要です。widthとpaddingの組み合わせはブラウザによって動作が異なりますのでHackが必要になるケースがあります。

via: 第12回:引用(blockquote)をCSSと画像でそれらしく見せる方法

どういうことかというと、同じblock要素にwidthとpadding-left(padding-right)を指定した場合に、FirefoxやSafariなどではwidth+padding-left(padding-right)が横幅になるのに、IEではpaddingの幅が無視されwidthが横幅になってしまうという事です。

CSS1/CSS2ではボックスの幅を算出するときにパディングやボーダーのサイズは除外される。しかしWinIEではこれらを含めて幅や高さを算出する。

via: Internet Explorer (Windows) CSSバグリスト

なのでネタフルさんのblockquoteの場合、Firefoxでみると350px、IEでみると340pxになります。
10pxくらいの差なので全然気にならないんですが、無理矢理CSS Hackとかで対応するとこんな感じかと。

.content blockquote {
color: #333333;
line-height: 160%;
font-size: 14px;
width: 340px;
background-image: url(image2/blockquote_bg.gif);
background-repeat: no-repeat;
padding-top: 20px;
padding-right: 5px;
padding-left: 5px;
background-color: #F5F5F5;
padding-bottom: 10px;
}
* html body .content blockquote {
width: 350px;
}

いわゆるスターハックってやつですね。

まとめ

ソースを含む長文エントリーを書いていると本題を忘れる傾向があります。
え〜と、つまりは、ネタフル最高!ってことで。
本当にあざーす。

4822245772 クチコミの技術 広告に頼らない共感型マーケティング
コグレ マサト いしたに まさき
日経BP社 2007-03-29

by G-Tools

-技術情報

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

Photoshop Elements 6 for Macintosh を予約しました

直前にExpress良いよ〜って言っといてなんですが、amazonでElementsを予約しました。 Adobe Photoshop Elements 6.0 日本語版 Macintosh版 adob …

古いHotmailからWindows Live Hotmailに移行する時にイヤが画面が…

近頃はほとんど利用していないのですが、久しぶりにHotmailをのぞいてみたら、いやおうなしにWindows Live Hotmailに移行せよとの画面がでてきた。クリックしていくだけっぽかったので、 …

直感勝負1:iPhotoで複数画像からスライドショーを作ってみようの巻

急に思い立って新しいシリーズを開始します。 その名も「直感勝負」シリーズ! 直感勝負シリーズとは、結構メジャーなのにyagerが使った事のなかったソフトウェアやWebサービスを、なるべく予備知識無しに …

セルクマは堂々とやればいいじゃない

前のエントリーに想像以上のブックマークをいただきました。アザース! ・「はてブ Fans Ranking」であなたのブログをたくさんブクマしてくれてる人を調べよう というわけで、先ほどからブックマーク …

「パケ・ホーダイ」にして使い倒したい携帯サイト

先月、貧乏家族のもとに悲しいお知らせが届きました。 オ、オレの携帯代が1万円超えとるやないか! 電話キライ、メールは相方としかやらないオレは超ライトユーザだったはずが何で?・・・って、実は理由は分かっ …

スポンサードリンク

スポンサードリンク