コピペのみでOK!引用タグ(blockquote)のCSSを変更して見やすく装飾する方法

コピペのみでOK!引用タグ(blockquote)のCSSを変更して見やすく装飾する方法

ブログで、他の人の文章などを引用したいときには、「引用タグ(blockquoteタグ)」を使います。

「引用タグ」で囲んで、引用部分を明確に示す必要があるのですが、当ブログで使っているテンプレートの初期状態では、左側に空白が空くだけで全く装飾がなく、どこが引用なのか見た目にわかりにくくなっていました。

引用CSS変更-7

今日は、CSSを変更して、引用部分を見やすく装飾する方法をご紹介します。CSSなどに全く詳しくない私にでもできたので、その方法を詳しくお伝えしていきますね^^

 

引用タグ(blockquote)を使う理由

他の人の文章などをブログで引用したいときには、「引用」のボタンを押すか、「blockquote」のタグで囲みます。

引用タグ(blockquoteタグ)を使うのは、どの文章が引用している箇所なのか、ブログを読んでいる人にも、検索エンジンのロボットにもわかってもらうためです。

詳しくはこちらの記事をご覧ください
引用と転載の違いとは?知っておくべき著作権の知識とブログ記事の引用方法

著作権法では、どこからどこまでが引用であるのかを、「明確に」示さなくてはならないというルールになっています。また、検索エンジンのロボットにも、勝手にコピーしてきたのではなく、正しい手順で引用しているのだということを認識してもらう必要があるんですね。

タグで囲むことによって、検索エンジンのロボットは引用部分を把握してくれますが、人間にとってはわかりにくい状態だったので、パッと見てわかりやすいようにカスタマイズしました。

 

参考にさせていただいたブログ

こちらの記事を全面的に参考にさせていただきました。ありがとうございます!

参考記事:賢威カスタマイズ研究所「引用タグ(blockquote)をCSSのみで装飾する」
http://www.keni-customize.net/blockquote-css-design-587/

 

CSSを変更して、引用タグ(blockquote)を装飾する

テンプレートによって、名前が異なるかもしれませんが、スタイルシート(style.css)を開きます。

編集に失敗することもあるので、念のためバックアップをとっておきましょう。「Ctrl」+「A」で全選択して、メモ帳などに貼り付けて置いておきます。

引用CSS変更-1-2

もし、今回の編集作業で変になってしまったら、このメモ帳に貼り付けておいたものをコピペしなおせば、元に戻せます。

スタイルシート(style.css)の一番後ろなどに、参考記事の通りにコードをペタッと貼りつけます

↓これを全選択して、コピー。

/*引用タグ装飾*/
blockquote{
position: relative;
margin: 0 1em 1.5em;
padding: 1em;
border: 3px solid #d7d7d7;
background-color: #e0e0e0;
z-index: 1;
}

blockquote p{
position: relative;
z-index: 3;
}

blockquote:before{
content: "“";
font-size: 1000%;
line-height: 0.8em;
font-family: 'Times New Roman' ,"MS Pゴシック" ,sans-serif;
color: #F0F0F0;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}

blockquote:after{
content: "”";
font-size: 1000%;
line-height: 0em;
font-family: 'Times New Roman' ,"MS Pゴシック" ,sans-serif;
color: #F0F0F0;
position: absolute;
right: 0;
bottom: 0;
z-index: 2;
}

引用:賢威カスタマイズ研究所

一番最後の部分にペーストしたら、「ファイルを更新」をクリックします。

引用CSS変更-2

すると、こんな感じに。

引用CSS変更-4

これで、はっきり引用部分がわかるようになりました。

 

背景の色と、ダブルクォーテーションの色とサイズを変えてみる

でもちょっと、当ブログの場合だと、色合いが濃すぎると感じたので、背景の色とダブルクォーテーション「”」の色を変更してみることに。

6行目:border: 3px solid #d7d7d7; →#e3e3e3 /枠の縁線の色
7行目:background-color: #e0e0e0; →#f3f3f3 /枠内の背景の色
21行目&33行目:color: #F0F0F0; →#fff /「”」マークの色

さらに、ダブルクォーテーション「”」と文字がかぶって、読みにくく感じたので、「”」のサイズを小さくしました。

18行目&30行目:font-size: 1000%; → 700%

上記を変更したものがこちら↓

/* 引用タグ装飾 */
blockquote{
position: relative;
margin: 0 1em 1.5em;
padding: 1em;
border: 3px solid #E3E3E3;
background-color: #F3F3F3;
z-index: 1;
}
blockquote p{
position: relative;
z-index: 3;
}
blockquote:before{
content: "“";
font-size: 700%;
line-height: 0.8em;
font-family: 'Times New Roman' ,"MS Pゴシック" ,sans-serif;
color: #fff;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}

blockquote:after{
content: "”";
font-size: 700%;
line-height: 0em;
font-family: 'Times New Roman' ,"MS Pゴシック" ,sans-serif;
color: #fff;
position: absolute;
right: 0;
bottom: 0;
z-index: 2;
}

コード変更後はこんな感じになります↓

引用CSS変更-5

わーい、できました(^o^)♪
ほぼ、コピペだけとは言え、無事にカスタマイズできてうれしいです。

さらに、色を変えたい場合は、こちらのサイトが、お役にたちますよ♪

⇨ http://www.colordic.org

 

まとめ

これで、著作権法に書かれている通り、引用部分をはっきりと区別することができるようになりました。

デザインにこだわりすぎて、肝心の記事を書くのがおろそかになってしまってはいけませんが(まさしく私のことだったり^^;)、コピペだけで簡単にできるので、よかったらやってみてくださいね。


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

ブログ記事一覧へ

***

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

まかろんのプロフィール



ハンドルネーム:まかろん
2児を子育て中の主婦兼アフィリエイターです。

このブログでは、知識も実績もゼロの初心者がアフィリエイトで稼ぐための情報をお伝えしていきます。
少しでもあなたのお役に立てたら幸いです。

詳しくはこちらから

ブログランキングに参加しています


人気ブログランキングへ
ポチっと応援クリックしてもらえるとうれしいです♪

当ブログで使用しているテンプレート

初心者でも、ブログの作成が簡単にできる工夫がいっぱいのテンプレート

詳しくはこちらから

アーカイブ

こちらのサイトの素材を使わせていただいてます

Re:vre