1月 182014
 

【追記:2014年01月23日】
所属している会社では、「Internet Explorer 9」を利用しています。セキュリティーの関係で、自分で勝手にアップグレードできませんので、ちょっと不都合もありますが。特に、下記に示した引用符。以下の様になっています。

20140123_quote_IE9

全てのブラウザーで確認しているわけではありませんから、こうしたことも致し方ないとは思うのですが・・・閲覧して下さっている方の中には、かなり迷惑な感触を抱いている方もいらっしゃるんだろうな~何て反省してはいるのですが。

【公開時、投稿記事】
「かっこいい」の定義が不明確ですが・・・ただ、単純に「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 ======= */

いや~素晴らしい!引用符だけで、こんなに長くなるんだ~とちょっと驚きましたが、やっただけの成果があったような気がしています。あくまでも自己満足の世界でしょうけど。


 返信する

(必須)

(必須:アドレスは公開されることはありません)