俺流!バラとラン栽培

バラとランと WordPress に魅せられて!

引用符(blockquote)の CSS、content プロパティーを使いこなす!

本ブログでは、表(table)や引用符(blockquote)を多用しています。表に関しては自己満足ではありますが、そこそこ完了していますが、引用符(blockquote)に関しては、単純な装飾しか施していませんでした!

そこで、引用符に content プロパティーってやつがあることを知り、更に以前単純にコピペで利用させて頂いた引用符に関する装飾を思い出し、本ブログでも採用してみることにしました!

PAK86_codeing_700x200

参考にした投稿記事は以下の 2 つです!

重要なのは、content プロパティーと、それをどうやって表示させるかということです。本ブログでは、引用符(blockquote)のボックスの最初に「Quote」と表示させたい!結論からすると、以下のようになります。

content プロパティーは、要素の前後に、:before または :after という擬似要素を使ってテキストや画像などのコンテンツを挿入する際に使用します。擬似要素とは、HTMLなどの文書には記述されていない要素をCSSによって新たに作り出された架空の要素です。出典:「CSSの content プロパティーを使いこなそう! | Webクリエイターボックス」より

本当に自己満足の世界ですが・・・かなりかっこ良くなったと思っているのですが・・・どうでしょうね~「Quote」という content をローテーションさせることもできるのですが、以前、その調整でかなり時間を費やしてしまって、そこまでやる必要があるのかな~ってなことを考えていたので、単純に引用符のボックスの上にちょっとだけ突き抜けるように設定しました。

コードは以下の通り。

これだけできると本当に嬉しくなりますね~

ちょっと苦労したのは、「Quote」のポジション。blockquote に position プロパティーを設定しないと content プロパティーの表示が上手くできないようです。また、z-index プロパティーを指定することで、本文を最前面に表記できるようにします。

なが~いコードを一人で書くって・・・大変なことですが一度完成すると本当に満足感がありますね!

Posted by “WordPress for Android” in Xperia Z3 Compact.

関連する投稿記事リスト

下記に、本投稿記事と関連する投稿記事リストを自動生成しています。

自動生成は、投稿記事間の内容(80%)、カテゴリー(10%)、タグ(10%)を基準にして実施され、日付は公開日を示しています。ご興味があれば、是非、ご覧下さいませ。

Updated: 2015年04月12日 — 19:30

気楽にコメントして頂けますように!コメントは承認後の公開です。

* Copy This Password *

* Type Or Paste Password Here *

2,180スパムコメントは、これまでのところでブロックされたSpam Free Wordpress

「俺流!バラとラン栽培」Copyright © 2015-2016 by Zero Cool. All rights researved. Frontier Theme