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

2012年4月17日火曜日

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

Original Updated By umjanedoan

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

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

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

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

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

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

そしてググった。

あったー(^▽^)/

ブログ運営ノウハウ集: 引用マーク(コーテーション)を使ってblockquoteをスタイルシートでかっこよく装飾表示させる方法

引用マーク(引用符)は、よくダブルコーテーションでくくられたりしますブログのデザイン的に、かっこよくダブルコーテーションで引用を表示させているブログを見かけます例えば、こんな風にこれらの引 ...
同じBloggerで作られている方なので、そのまま使えました！

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

やってみた

コードは参考元記事から少しアレンジして、当ブログの引用ブロックはこんな感じになりました。

引用されているところ！
2行くらい書いてみようか。

1行でも案外サマになるね！

長文でもいいんじゃないかな。
あれこれ。
あれやこれや。
長文のサンプルって難しい……。
いろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろいろ

いいですねぇ(￣▽￣)

ざっくり手順

それこそ参考元記事に書いてあるのですが、せっかくなので私なりに紹介してみます。

引用符の画像を用意する。
どーにかして、Webにその画像をアップする。
Bloggerの場合は、記事の作成画面を使って、どこでもいいのでその画像を挿入する。
→そのHTMLソースを確認すると、画像のURLゲットー。
ちなみに画像サイトはFlickrでもいけそうでした。
CSSにblockquoteタグの属性を上書きする。

こんなカンジでしょうか。