記事内に囲み罫線を設定する方法

こんにちは、かーずです。

記事内に囲み罫線を付けたいと思ったことありませんか？

こんな感じです。

罫線で囲まれた文字

強調したいことやニュース記事などの引用をする場合は、他の文章と区別することができるので便利ですよね。
そして、ただ囲むだけじゃなく太字設定やインデントなんかも設定されているので、とても簡単に強調された感じを出すことができます。

今日はこの方法を紹介します。

方法は2つあるのですが、いずれにしても予め準備しておくことがあるのでそちらから先に説明します。

まず、CSS編集画面に入ります。アメブロならマイページから「クイックリンク」⇒「スキンCSSの編集」でOKです。（CSS編集ができないスキンをお使いの方はスキップ）

そこに以下の記述を追加してください。

.con01{
border:dashed 1px gray; /*罫線の設定　種類　大きさ　色*/
font-weight:bold; /*太字の設定*/
padding:10px; /*罫線から内側の文字までの余白*/
margin:10px; /*罫線から外側の境界までの余白*/
}

con01というのは好きな名前をつけてOKです。
後で自分で呼び出すときに覚えてさえいれば良いので、覚えやすい名前にしましょう。
僕は、conditionの省略という意味でcon01～con05と名前をつけて設定を分けて使い分けています。

あとは、記事を書くときにこれらの設定を呼び出すだけです。

その方法は、記事のHTML編集画面で過去見たい部分の文章を以下のタグで囲むだけです。

<div class="con01">この中に文章が入ります</div>

又は

<blockquote class="con01">この中に文章が入ります</blockquote>

赤文字部分に先程付けた名前を入れればいいんです。<blockquote>タグは、特に"他の記事を引用している"ことを明示するためのもので、見かけ上はどちらでもかわりません。

ちなみに僕はタイピングが楽な<div>しか使いません


なお、CSSの編集ができないスキンの場合、これらの方法は使えませんが、その場合は単に

<blockquote>ここに文章が入ります</blockquote>

だけでも、とりあえず罫線やインデントが設定（予めスキンに設定されている書式になります）されますのでこちらをお試しくださいね。