MS Access Tips/Sample and VBA and Blog customize etc...

引用タグをCSSとFont Awesomeでデザインしてみた

テンプレートを変更していろいろ気になるところをいじっているのだか、引用タグ(blockquote)のCSSデザインがちょっとありきりだったので、ちょっと遊んでみた。画像は使わずにIcon Font(Font Awesome)を使ってみました。

CSSblockquotedesignby
icon font

難易度:

疑似要素 before after を使う

WEB検索すればいろいろサンプルが見つかりますが、今回は下記のサイトを参考にさせていただきました。

blockquoteタグをCSSだけで格好良いデザインにする【画像不要】| おーとえすとさいと

ポイントは疑似要素の before と after を使うということですね。上記のサイトにはいくつかのサンプルがありますが、左上に引用符(引用文の背景に) というのを元に変更しました。これにafter要素で閉じ引用符も追加してみました。

閉じ引用符は全角の ”を使っているので bottom:0 だと位置が上のほうになってしまうので、bottom:-0.5em; とするのがポイントですね。

サンプル1

引用文 引用文 引用文 引用文 引用文 引用文
引用文 引用文 引用文 引用文 引用文 引用文
引用文 引用文 引用文 引用文 引用文 引用文
引用文 引用文 引用文 引用文 引用文 引用文

これで結構いい感じなんですか、フォントに "MS Pゴシック" を指定しているので環境によっては同じように表示されないかもしれません。(Mac OS にはないですよね?)

Font Awesome を使ってみる

Font Awesome はもうみなさんご存じだと思いますが、サイト上で使われる様々なアイコンをWebフォントとして簡単に利用できるようにしたものです。公式ページは下記。

Font Awesome, the iconic font and CSS toolkit

ダウンロードして使うこともできますが、CDNにも対応してますので、html のhead内に下記の1行を挿入するだけ使えます。

公式ページのサンプルにも引用のがあります。

引用文の前に下記のタグを挿入するだけです。

サンプルAwesome

引用文 引用文 引用文 引用文 引用文 引用文
引用文 引用文 引用文 引用文 引用文 引用文
引用文 引用文 引用文 引用文 引用文 引用文
引用文 引用文 引用文 引用文 引用文 引用文

簡単ですね。でも、ブログに投稿した全ての記事の編集画面を開いて、このタグを挿入するのは大変です。

最初のサンプルのようにCSSで使いたいですね。これも簡単です。font-familyに"FontAwesome"を指定して、content に文字コード(Unicode)を指定します。Unicodeは公式ページのアイコン一覧のページFont Awesome Iconsの希望のフォントをクリックすると表示されます。

サンプル2

引用文 引用文 引用文 引用文 引用文 引用文
引用文 引用文 引用文 引用文 引用文 引用文
引用文 引用文 引用文 引用文 引用文 引用文
引用文 引用文 引用文 引用文 引用文 引用文

これでどの環境では同じに表示されるはずです。

アニメーションで遊んでみる

引用符以外は、背景色のみの設定というシンプルなデザインですので、お好みに合わせて、境界線を表示するとか変更してください。

テンプレートはシンプルなのでデザイン的にはこれで十分なのですが、もうちょっと引用だということをアピールするために、マウスを乗せたら(hover要素)、引用符の色を変えるなどするのもいいかもしれません。

transformを使って回転させてみるのも面白いかも。ということで、当ブログの引用デザインは下記のようになりました。

サンプル3

引用文 引用文 引用文 引用文 引用文 引用文
引用文 引用文 引用文 引用文 引用文 引用文
引用文 引用文 引用文 引用文 引用文 引用文
引用文 引用文 引用文 引用文 引用文 引用文

上のサンプルにマウスを乗せてみてください。引用符がクルクル回ります。

拍手する

Leave a reply






Trackbacks

trackback URL
http://hatenachips.blog34.fc2.com/tb.php/442-8cd060d7
該当の記事は見つかりませんでした。