忍者ブログ
SOLID DAYS
カウンター

開設から 日が経過しましたよ
おすすめ
最新コメント
無題 名無しさん@そりっどでいず。 [06/19]
上信越道の甘楽PA上下線 ぴよ子彦 [02/26]
オンライン うぃーく(weak) [02/21]
無題 ショウ [02/21]
無題 名無しさん@そりっどでいず。 [02/19]
無題 名無しさん@そりっどでいず。 [02/19]
久しぶりに 名無 [02/18]
管理人 うぃーく(weak)
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

最近、存在を知ってから、<blockquote></blockquote>のHTMLタグを頻繁に使うようになりました。
<blockquote>は、比較的長めの文章を引用する際に使用し、このタグに囲まれた文章は「引用」であることを示します。

ちなみに短い文章は<p>タグ、引用元の書籍著者名は<cite>タグを使います。
引用文
<blockquote>タグで囲むと、普通は文章が右にずれて表示されるだけです。
しかしスタイルシートCSSでデザインを設定すれば、上のようなデザインにすることが出来ます。

今回は、デザインのサンプルと、ブログでの使用方法を紹介したいと思います。

648a86f16e9929f99ffa847bf8e86955.png
Blockquote Examples by CSS-Tricks
数種類のデザインサンプル集が公開されています。

FC2ブログのテンプレート工房 引用部分(blockquote)のデザインを変える
CSSデザインは1つですが、分かりやすいです。



自分でも少し作ってみました。

画像使用バージョン

【表示サンプル】
9e6f1236.png

【使用画像】
block.gif
(ダウンロードしてから使ってね)

【CSS】
blockquote{
background-image: url("背景画像のURL");  /*背景画像*/
padding: 5px 5px 5px 5px;  /*パディング幅(上・右・下・左)*/
border: #bbbbbb 1px solid;  /*まわりの枠(色・太さ・スタイル)*/
margin: 3px 15px 3px 15px;  /*マージン幅(上・右・下・左)*/
}


画像未使用バージョン

【表示サンプル】
827c3763.png

【CSS】
blockquote{
background-color: #ededed;  /*背景色*/
padding: 5px 5px 5px 5px;  /*パディング幅(上・右・下・左)*/
border: #bbbbbb 1px solid;  /*まわりの枠(色・太さ・スタイル)*/
border-left: #bbbbbb 5px solid;  /*左の枠(色・太さ・スタイル)*/
margin: 3px 15px 3px 15px;  /*マージン幅(上・右・下・左)*/
}


ブログへの設定方法

(例:FC2ブログ)
FC2ブログ管理画面の[テンプレートの設定]→[編集]を選択します。
どこでもいいので<blockquote>のデザインCSSをスタイルシートに追加します。
はじめからテンプレートに、<blockquote>のデザインが設定されている場合もありえます。
[Ctrl]+[F]で
blockquoteを検索するとみつかると思います。
sguos.png



記事の編集画面で、引用文にしたい文字を選択して、「Q」ボタンを押します。
d033c1b0.png








記事をプレビュー/投稿した際に、反映されていれば成功です。
マージンやパティングってなに?と思った方は、CSS マージンと余白をみると分かりやすいです。
自分なりに編集して、自分だけの<blockquote>を作ってみてください!
 
PR
RSS Feed Widget
この記事にコメントする
お名前
タイトル
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
無題
ブレビューってそういうやり方でできるとは知らなかったなー
カイト 2009/02/04(Wed)21:50:24 編集
無題
ブレビューってなーに
weak weak★ URL 2009/02/07(Sat)19:30:38 編集
RSS Feed Widget
ブログ内検索
プロフィール
[HN]
うぃーく(weak)
[性別]
男性
職業:
学生
[趣味]
ゲーム、ランニング、WEBデザイン、動画編集、音楽鑑賞
お問い合わせ
ブログランキング
にほんブログ村 スマホ・携帯ブログ iPhoneへ


人みている。
管理
Respect Links
相互リンク
Twitter
RANK
ページランク
Copyright © 2008 SOLID DAYS All rights reserved.
忍者ブログ [PR]