ブログに初めて引用符を入れてみた!CSS編集のみの簡単な方法とは?

何でも書きますがブログアクセスアップの仕方(主にFC2ブログ)を模索したり、気になったニュースに対してコメントします!

 

ブログに初めて引用符を入れてみた!CSS編集のみの簡単な方法とは?

引用符デビューをしました!

 

ブログを書く上で引用したい事ってありますよね?いろいろなブロガーさんの記事を読むと引用部分にカッコよく引用符を付けて枠で囲んでいる方はたくさんいます。そこで私もいつかは引用符を付けたいと思いいろいろと調べたらこの方法なら割と簡単に出来ると思ったやり方を紹介します。

以下の物です。

サンプル




基本的にCSS編集を出来るブログなら可能の様です。私はFC2ブログを利用していますがその他のブログでもCSS編集が可能なら参考にしてみて下さい!


流れとして

 

まず文章引用するときには引用部分を<blockquote><p>~</p></blockquote>というタグで囲みます。


何の為かと言うと

・検索エンジンに引用部分である事を伝える。こうする事によってコピーコンテンツ扱いにされづらくなりSEO的に不利になりづらくなる。

・CSSから引用符を引き出す。


では説明していきます。


手順1



まずはCSS編集で以下のコードを挿入します。

blockquote {
background-color:#f5f5f5;
padding:3em 1em;
position:relative;
}
blockquote:before{
content:"“";
font-size:600%;
line-height:1em;
font-family:"MS Pゴシック",sans-serif;
color:#999;
position:absolute;
left:0;
top:0;
}
blockquote:after{
content:"”";
font-size:600%;
line-height:0em;
font-family:"MS Pゴシック",sans-serif;
color:#999;
position:absolute;
right:0;
bottom:0;
}




ここで注意点ですがテンプレートの種類(特にFC2ブログの場合)によってはあらかじめこの「blockquote { ~ }」という部分が入力されているものがあります。こういった場合はこの部分消してコピペして書き換えます。

この「blockquote { ~ }」の部分をCSS画面から探すのはもの凄く大変です。自力で探すのもいいですがテキストエディターにCSSの内容をそのままコピペして「blockquote」で検索するのも1つ手段です。こういうの「無料テキストエディター一覧 - フリーソフト100」です。ちなみに私の場合はAndroidタブレットなのでこちらのアプリ「QuickEditorテキストエディター」を使用しました。

検索にかからなければ上のコードをそのままコピペします。色は原色大辞典から好きな物を選んで下さい。

この作業が済んだら次にいきます。


手順2



引用したい文章等は以下のタグで囲みます。

<blockquote><p>引用する文章</p></blockquote>



このタグをそのまま使用しても良いのですがFC2ブログの方は記事の入力画面の中に便利なボタンがあります。
(下画像参照)

FC2ブログの記事入力画面での操作説明


※リアルタイムプレビューには普通の枠が表示されますが実際の記事には引用符と枠は表示されます!

これであとは実践のみです。


引用例とポイント

 

引用(いんよう、英語:citation, quotation[1])とは、広義には、他人の著作を自己の作品のなかで紹介する行為、先人の芸術作品やその要素を自己の作品に取り入れること。報道や批評、研究などの目的で、自らの著作物に他の著作物の一部を採録したり、ポストモダン建築で過去の様式を取り込んだりすることを指す。狭義には、各国の著作権法の引用の要件を満たして行われる合法な無断転載等[2]のこと。

引用は権利者に無断で行われるもので、法(日本では著作権法第32条)で認められた合法な行為であり、権利者は引用を拒否することはできない[3]。権利者が拒否できるのは、著作権法の引用の要件を満たさない違法な無断転載等に限られる。

出典:「引用 - Wikipedia



こんな感じになります。

ありがちなパターンとして引用元を1番下にして右寄せにする人が多いですね。
ついでに右寄せデビューもしました(^-^;
以下のタグを使用します。

<div align = "right">右寄せ</div>



引用元の示し方として


出典:~

引用:~

「~」より引用


この様な書き方が多いですが1番見るのが出典なので今回の例は出典を使いました。


引用のポイント


・引用と分かる様に示す事(引用符等)

・引用元のリンクを貼る

・全文を丸々写さない



1番大事な事は引用元をはっきりと示してさえおけばよっぽど事ではない限り揉めないと思います。1番ダメなのは本文をそのままコピペしてあたかも「これは自分が書いたんだよ」とする事ですね!


引用符デビューをしてみてはいかがでしょうか?


アクセスアップ・ブログ豆知識の目次はこちら
関連記事


 アクセスアップ豆知識

4 Comments

がちょー  

引用符カッコイイですよね

こんにちわ。黒猫さま^^

引用符って付けると記事もカッコよく見えてきましたv-290

丁寧な解説、説明等 参考になりましたね☆

2017/05/28 (Sun) 18:05 | EDIT | REPLY |   

黒猫  

がちょーさんへ

引用符はどうしても入れてみたかったんですよ(^^)

これを入れるだけで見栄えが変わってくるものですよね(^^)

2017/05/28 (Sun) 18:11 | REPLY |   

えいしん  

「引用符」ですね!

えいしんです。

引用符は、やはり必要なのですね。
色々な資料を基に作成されている
ことが、記事に重みを与える感じ
ですね。
素晴らしいです。

それでは、お疲れさまでした。

2017/05/28 (Sun) 22:48 | REPLY |   

黒猫  

えいしんさんへ

いろいろな記事を読んでいいとこ取りをした感じです。

これでやっと引用符が使える様になりました(^_^;
まだまだ取り入れたい事はありますね(^^)

2017/05/28 (Sun) 22:57 | REPLY |   

Leave a comment