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

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

関連記事

ドラゴンボール全巻がYouTubeで無料配信!ページめくりが速すぎる場合のスロー再生方法

つい先日攻殻機動隊S.A.C全26話無料配信でウハウハしたばかりですが、今度は名作漫画ドラゴンボールを全巻配信だそうです! MANGAPOLO Official Manga Channel &#821 …

顔ちぇき!とEXLIMの意外な関係

流行にのって2つも「顔ちぇき!」関連のエントリー書きましたが… ・顔認証システムで遊ぶ、「顔ちぇき!」と「Stars In You」 ・顔ちぇき!の次はパパちぇき!だってさ そうすると、顔認証の仕組み …

エンジニアの時代到来!Startups2010キックオフに行ってきた

インターネットビジネス支援プロジェクト Startups2010 8/3(火)にサイバーエージェント・インベストメント(以下CAI)主催のStartups2010キックオフカンファレンスというのがあっ …

Flickrの引用/転載基準って曖昧じゃない?

タイトルをみて勘の鋭い人はオレがTumblrとFlickrで何かやろうとしている事がわかると思いますがw(それは置いといて) Flickrでは公開/非公開やライセンスの設定が細かくできるようになってい …

「FastIcns」Mac用のアイコンが超簡単にできるちょっと変わったソフト

Gyamblrを作った時に、アイコンの作り方が分からなかったので調べてみたら辿り着いたソフトを紹介します。 ・FastIcns « DigitalWaters.net Projects

スポンサードリンク

スポンサードリンク