2012年4月17日火曜日

blockquoteタグに画像を仕込んでみた



"Quote It!"

Original Updated By umjanedoan

みなさま、お元気ですか。アベ(@brAin_1980)です。

早速ですが、私は@mehoriさんのブログで使われている、引用ブロックにクォーテーションマークが使われているのが、かっこいーーと思ってました。

そんなわけで、さっそくトライ。

まるまる他の人のブログ記事を参考にw

やりたいコトのイメージはついてました。

どーにかして「blockquoteというHTMLタグに対して、画像を仕込」めばいいと。

そしてググった。

あったー(^▽^)/


ブログ運営ノウハウ集: 引用マーク(コーテーション)を使ってblockquoteをスタイルシートでかっこよく装飾表示させる方法
引用マーク(引用符)は、よくダブルコーテーションでくくられたりします ブログのデザイン的に、かっこよくダブルコーテーションで引用を表示させているブログを見かけます 例えば、こんな風に これらの引 ...
同じBloggerで作られている方なので、そのまま使えました!


これの手法、まるパクリですw

やってみた

コードは参考元記事から少しアレンジして、当ブログの引用ブロックはこんな感じになりました。
引用されているところ!
2行くらい書いてみようか。
1行でも案外サマになるね!
長文でもいいんじゃないかな。
あれこれ。
あれやこれや。
長文のサンプルって難しい……。
いろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろ
いいですねぇ( ̄▽ ̄)

ざっくり手順

それこそ参考元記事に書いてあるのですが、せっかくなので私なりに紹介してみます。
  1. 引用符の画像を用意する。
  2. どーにかして、Webにその画像をアップする。
    Bloggerの場合は、記事の作成画面を使って、どこでもいいのでその画像を挿入する。
    →そのHTMLソースを確認すると、画像のURLゲットー。
    ちなみに画像サイトはFlickrでもいけそうでした。
  3. CSSにblockquoteタグの属性を上書きする。
こんなカンジでしょうか。

まとめ

まだまだ、このブログのデザインには手を入れたいところがあるのですが、まずはできる所からやっていこうと思っています。

最後まで読んでいただき、ありがとうございました。




詳解 HTML & XHTML & CSS 辞典
詳解 HTML & XHTML & CSS 辞典
posted with amazlet at 12.04.17
大藤 幹
秀和システム
売り上げランキング: 58553


3秒でもっとハッピーになる名言セラピー+
ひすい こたろう
ディスカヴァー・トゥエンティワン
売り上げランキング: 7442
0 コメント :
コメントを投稿

Related Posts Plugin for WordPress, Blogger...