FC2ブログ記事内の「引用」を装飾する方法

ブログが作りたい!FC2ブログのカスタマイズ > FC2ブログ記事内の「引用」を装飾する方法

FC2ブログ記事内の「引用」を装飾する方法

FC2ブログ記事内の「引用」を装飾する方法

FC2ブログのカスタマイズ(13)

前回は、ブログでの引用のお作法と、FC2ブログでの引用の使い方をご紹介しました。

しかし、テンプレートによっては、引用タグ(blockquote)に対するCSSの指定がない場合もあるようです。これでは、せっかく引用を設定しても残念な感じになってしまいます。

そこで今回は、ちょっとしたカスタマイズの方法を書いておこうと思っている次第であります。


「引用タグ(blockquote)の装飾」とは?

1:FC2ブログでの引用タグ(blockquote)って何だ?

FC2ブログのエディタで「引用」という書き方をするときは、[Q]ボタンを使います。(ここまでは、前回の記事『ブログでの引用のお作法と使い方』でもお話しました)

FC2ブログでの引用タグ(blockquote)って何だ?

この[Q]ボタンを使うと、ブログの閲覧上(ブラウザで見たとき)においては分かりませんが、HTMLファイルでは、引用文が blockquote(引用タグ)で囲まれているのです。

例えば仮に、次のような引用文があるとすると・・・。

ちんこ、ちんこ、びろーん。

引用文「ちんこ、ちんこ、びろーん。」は次のように、blockquote(引用タグ)で囲まれています。

ですから、CSSにて blockquoteに対する装飾の指定をしてあげれば良いというわけです。

blockquoteタグについては、記事『引用する 【<blockquote>タグ】:HTML入門』にて書いています。

2:「引用タグ(blockquote)の装飾」とは?

「引用タグ(blockquote)の装飾」とは、次のように引用文を罫線(枠線)で囲ったり、あるいは、背景色を変えることを言います。

「引用タグ(blockquote)の装飾」とは?

CSSにて blockquoteに対する装飾の指定をしてあげれば、引用文であることが分かりやすくなるのです。


FC2ブログ記事内の「引用」を装飾する方法

1:何をするのか?

今回は、blockquoteへの装飾指定がないテンプレートへ、罫線(枠線)を加えてみます。

例えば、次のような状態を・・・。

罫線(枠線)などが表示されないテンプレートもあります

次のようにします。

罫線(枠線)が表示されます

バックアップを取ったら、さぁはじめましょう!

2:blockquoteの記述を探す

(01)

まずは、CSSにて、blockquoteへの指定があるか?確認します。

CSS(スタイルシート編集の方の)コードを、テキストエディタなどに貼り付けて、「blockquote」で検索をかけてみましょう。

CSSにblockquoteへの指定があるか?確認

「blockquote」の検索結果によって、次のどちらかの方法で進めるとよろしいかと思います。

  • 検索に引っかかった場合は、その指定を書き換えます。
  • 検索に引っかからなかった場合は、新規で記述します。

3:CSSを書く

(02)

例えば、CSSにて、次のように書き加えます。

CSSコードを書き加える

paddingは、引用文と罫線との間の余白です。borderは、罫線を引いています。

4:ブログの確認

(03)

CSSを書き換えたら、[更新]ボタンをクリックして、ブログを確認してみましょう。(もちろん、プレビューでも構いません)

罫線(枠線)が表示されます

「引用」タグの装飾サンプル

サンプル 1:右と下の罫線を太くする

(1)サンプル画像
引用:右と下の罫線を太くするサンプル
(2)CSSコード

サンプル 2:引用枠内に背景色

(1)サンプル画像
引用枠内に背景色をつけるサンプル
(2)CSSコード

サンプル 3:罫線を破線にする

(1)サンプル画像
引用の罫線を破線にするサンプル
(2)CSSコード

サンプル 4:罫線を角丸にする

(1)サンプル画像
引用の罫線を角丸にするサンプル
(2)CSSコード

※:この方法だけでは、IEブラウザは角丸になりません。(他の方法も追加する必要があります)

border-radiusによる角丸については、記事『border-radiusを使って角丸を作る:CSS小技』をご覧ください。


おまけ

前述のサンプルでご紹介しているサイトが気になって、パジャマパーティーもそこそこに家路を急ぐ人もいらっしゃるかもしれないので、ご紹介しておきます。

ご紹介しているサイトは「SEOもっと!」さんの記事『SEOと発リンクと隣人への愛』です。

なかなかSEOの成果が出ずに悩んで、そうして難しいことを考えながらサイトの中身をいじり倒している時間があるのであれば、テーマが近 いサイトや、ブログの記事を積極的に紹介するということを検討してみてください。

SEOもっと!「SEOと発リンクと隣人への愛」より

同サイトの小説『SEO失格』シリーズも、必見です。ただただ、一切は過ぎて行くようです。

前の記事へ
次の記事へ

次回予告

次回は、リンク集などを、少し整理(見直し)する予定です。(FC2ブログの作成に役立つサイト(まとめ)


関連記事

カスタマイズに関連する記事を、ご紹介します。

作成日:2010/02/21 更新日:2010/02/21

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

No title

カウンターのつけ方おしえてっ

FC2カウンターかしら?

非通知さん、こんにちは!( ・∀・)ノへろー
コメントありがとうございます。

FC2カウンターでよければ、
↓こちらをご覧いただくと、できるかもしれませぬ。
 http://kumacrow.blog111.fc2.com/blog-entry-34.html

ちょっと古いかもしれませんけれどもー。(´Д`;)

No title

こんにちは 
昔の記事へのコメントですがよろしいんでしょうか...
いつもこのブログ様にはお世話になっています

近頃ブログをつくり始めたんですが

上記のCSSコードをスタイルシートに書き込むと、
・記事を囲む外枠と引用の枠がかぶる
・コメントも引用の枠で囲まれる
などがおきるんですが どうしたらいいんでしょうか

よろしければ 返信お願いします

blockquoteによる問題

名無しさん、こんばんは!( ・∀・)ノぐいぶに
コメントありがとうございます。

うーん、それは・・・、

名無しさんがお使いになっているテンプレートを見てみないと、
具体的には、何とも申し上げられません。(´Д`;)が

「記事を囲む外枠と引用の枠がかぶる」は、
例えば、blockquoteに対して、widthを指定するとか、

あるいは、marginを指定してみるとか、
そんな感じでしょうか。

「コメントも引用の枠で囲まれる」は、
テンプレートのHTMLの方を確認してみてください。

コメントをblockquoteタグで囲んでいるんじゃないですかね。

コメントをblockquoteにしておきたいなら、
classなどを指定して、上書きして指定するとかでしょうか。

そこまでしてコメントをblockquoteタグで囲むことに、
こだわらないのなら、

HTMLの方を、別のタグで囲んじゃえばいいんじゃないかしら。

No title

解決しましたっ!
丁寧な回答、本当にありがとうございました!

かいーけつ!

名無しさん、こんにちは!( ・∀・)ノへろー
コメントありがとうございます。

解決したようでよかったです。
て、丁寧な回答・・・。(´Д`;)あらん

もともとスキルがおありになったのかしら。
何分よかったでござる。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/629-fab11a73
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて