引用「枠」の常識と常識に負けない「枠」を作る

ワードプレスのエディタには、最初から、「blockquote」という、
引用枠が用意されています。

一般的には、グレーの四角い枠ができて、
引用した文章を囲んで表現するんです。
このサイトでは、色や枠を変更してあります。

Cascading Style Sheets(CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート)とは、HTML や XML の要素をどのように修飾(表示)するかを指示する、W3Cによる仕様の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。~ウィキペディア

こんな感じで、
<blockquote>~~</blockquote>というタグで囲んでやると、
その文章は枠で囲んで表示されるわけです。

この引用タグ「blockquote」なんですけど、
引用、のためのタグなんですね。
つまり、最初から、別のサイトの文章を引用しますよ、という合図なんです。

パクリじゃないよ?リスペクトだよ?といいますか…
「この文章は、引用させてもらった文章ですよ」という合図であり、
引用タグを使わないのは引用先の相手に大変失礼な行為ですね。

それに、そういうふうに、検索エンジンも認識してしまうんですよ。

だから、自分で書いたオリジナルの文章を「強調」させて表示したいとき、
この「blockquote」を使ってしまうと、
「だってこれ、引用だろ?」ということになってしまいますね…( ̄□ ̄;)!!

ただ、強調させたい、とか、
他とは違う書き方をしたい(注意書きなど)というときに、
この引用タグを乱発するのも、使い方が間違っているわけです。

そこで、引用タグとは別に、枠で文字を囲うタグを用意しました。

div.block{
overflow: auto;
margin: 0 10px 1.4em 10px;
padding: 10px;
border: 2px solid #db7093;
background: #ffe4e1;
}

まずは、デザインをつかさどるCSSファイルに、この記述を加えます。
書き加えるCSSファイルは、テーマ(テンプレート)ごとに違うので
ご自分のテーマに合わせて記載されてください。

使い方としては、囲みたい文字列の最初と最後に、
<div class=”block”>~~~~</div>を加えます。

なお、この囲い枠ですが、自分でカスタマイズも可能です。

こんな感じで、「マージン」と「パディング」、
枠の色、太さ、塗りつぶしの色、などを自分で決められます。

さらに、塗りつぶしではなく画像を使うこともできますが、
まずはここでは、CSSとHTMLで作る枠について解説します。

マージンとパディングは、それぞれ、
外枠と枠の距離、枠と文字の距離をつかさどります。

このとき、
padding: 10px;
のように、数字がひとつしかないときには、上下左右ともに同じ距離空きます。

もし、
padding: 20px 10px;
のように、2つ数字が並ぶと、「上下」「左右」となり、

padding: 5px 20px 10px;
のように、3つ数字が並ぶと、「上」「左右」「下」となります。

padding: 15px 5px 20px 10px;
のように、4つ数字が並ぶと、「上」「右」「下」「左」となるんです。

もちろん、ひとつずつ、
margin-top:15px;
margin-bottom:20px;
margin-right:5px;
margin-left:10px;

と記載してもかまいません。

border: 2px solid #db7093;は、
「枠の境界線」が、2pxの太さであり、
solid は実線を意味します。
#db7093 は、線の色、ですね。

solid のほかにも、線をあらわす要素はいろいろあり、
none … 線なし
dotted … 点線
dashed … 破線
double … 2重線

などがあります。

background: #ffe4e1;
は、枠の塗りつぶしの色を指します。

overflow とは、もし、枠からはみ出たときの記載法。
overflow: auto;と、「auto」と記載していれば、
ブラウザの環境によって自動で表示を変えてくれます。

「blockquote」タグはあくまで引用。
目立たせたいなら、別途、枠を用意する必要があるんですが、
このように、自分で好きに組めれば可能性はいろいろ広がりますね。

あわせて読みたい関連記事

コメントは停止中です。

サブコンテンツ

このページの先頭へ