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

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

関連記事

ユーザビリティは1日にしてならず「Android Usability Seminar 2010」に行ってきた

11月27日の土曜日に、日経BP主催のAndroid Usability Seminar 2010に参加してきました。Android開発については初心者レベルのボクでしたが、テクニカルな話だけではなく …

大好きなブロガー達もMacBookを使ってました

Appleのサイトでこんな記事を発見。 アップル – Macをはじめた人たちの声: ブロガー編 「カメラと一緒にパリでお散歩*」のアリアパパさんと、「ダカフェ日記」のモリユウジさんがフィー …

twitterの公式Badgesにオレのハックが採用されてない??

先ほど次のエントリーのネタのためにTwitterのBadgesページを覗いたのですが、何かいきなり見慣れたコードだなぁなんて思ってたら、明らかに以前書いたオレのハックだった。 そのエントリー 第4回: …

twitter のロゴに似ているフリーフォント「Pico-alphabet」

twignature で使うために twitter っぽいフォントを探していて見付けたのがこれです。 ポップでキュートな『ピコ-アルファベット(ブラック&ホワイト)』です。ベタ打ちでもあっと言う間にロ …

「二つ名メーカー」で別名を作ってみた

二つ名メーカーというのがあったのでやってみました。

スポンサードリンク

スポンサードリンク