【追記:2014年01月23日】
所属している会社では、「Internet Explorer 9」を利用しています。セキュリティーの関係で、自分で勝手にアップグレードできませんので、ちょっと不都合もありますが。特に、下記に示した引用符。以下の様になっています。
全てのブラウザーで確認しているわけではありませんから、こうしたことも致し方ないとは思うのですが・・・閲覧して下さっている方の中には、かなり迷惑な感触を抱いている方もいらっしゃるんだろうな~何て反省してはいるのですが。
【公開時、投稿記事】
「かっこいい」の定義が不明確ですが・・・ただ、単純に「blockquote」を適当するのではなく、ちょっと他のサイトでは利用していないような、それでいて結構目立つ引用符を作成したい・・・
そこで、「CSS3 を使って blockquote をちょっとおしゃれに | Unformed Building」にある例を参考にちょっとやってみました!
実際に適用しているコードは、本投稿記事の後半にアップしておきますが、実際には以下のように表示されるようなります。
引用符(いんようふ)は、約物の一つ。文中において、他の文や語を引用していることを示す役割を果たす記号で、多くの場合一対で引用部分を囲む。コーテーションマーク、クォーテーションマーク、クオーテーションマーク、引用符号ともいう。(出典:「引用符 – Wikipedia」より)
Internet Explorer の古いバージョンでは、上手く表示できないようですが・・・少なくとも CSS 3 をカバーしているブラウザーでは、私の思ったような表示になっているはず!
実際に適用しているコードは以下の通りです。
/* ======= Reseting Blockquote ======= */ blockquote { quotes:none; } /* ======= blockquote要素前後にコンテンツを追加しないように指定しています ======= */ blockquote:before, blockquote:after { content:''; content:none; } blockquote { background: none; /* url(images/blockquote-l.png) no-repeat left top; */ position: relative; margin: 10px 30px 10px 30px; padding:15px 10px 2px 15px; border:1px solid; border-color:#bddcad #eee8aa #eee8aa #bddcad; font-weight: normal; font-style: normal; text-align: left; color: #501616;; background-color:#edffdc; } blockquote:before { position: absolute; top: 20px; left: -75px; z-index: 1; width: 100px; transform: rotate(-25deg); /* 反時計回りに25度回転 */ -moz-transform: rotate(-25deg); -webkit-transform: rotate(-25deg); -o-transform: rotate(-25deg); color: #8fbc8f; content: "Quote"; /* 文字列を生成 */ font-size: 30px; font-weight: 700; font-style: oblique; font-family: Georgia normal, "Times New Roman", Times, serif; text-align: center; text-shadow: 3px 5px 3px rgba(0, 0, 0, .2); /* 文字にドロップシャドウ */ } /* ======= Reseting Blockquote END ======= */
いや~素晴らしい!引用符だけで、こんなに長くなるんだ~とちょっと驚きましたが、やっただけの成果があったような気がしています。あくまでも自己満足の世界でしょうけど。