記事内で文章を四角で囲むCSSのカスタマイズ

『文章 四角 囲む』とかいう検索クエリで、結構、この記事がみられているので、アップデートしておきます。

ブログ記事中の一部を四角で囲む方法をご紹介します。

ブログを書いてると、”お客さんからもらった感想文”など、自分の書いた文章ではない文章を、四角くで囲って読みやすくしたいですよね。

CSSというものをいじくるとできます。

こういうカスタマイズを、CSS用語で『クラスを作る』って言うみたいですね。

「記事内の文字列を装飾枠で囲む方法」CSSのクラスの作り方を、紹介します。

この手法をつかったら、割とかっこよくかこめましたので、ご紹介します。

やっちゃいけない文章の囲み方

余談

昔、習ってたときは、

で囲んだらいいよ。て、教えてもらったんだけど、最近、知ったのは

Blockqouteだと、人のブログからの引用ってことになっちゃいます。

「人のサイトに書いてあったところによると・・・こう書いてある」って、ときに使うタグなので、

自分のブログの文章には、Blockquote は使いません。

四角で囲む正しい方法

CSSでブログ記事中の一部を四角で囲む方法

とりあえず、四角で囲むタグの呼び方を、自分の中でわかりやすいように決めます。ちなみに、ぼくは sikaku って、呼び方(呼び方=クラスといいます)を作ってみました。

また、 .sikaku って、呼び名も、用途に合わせて、

.customervoice
.okyakunokoe
.kansou
.kakomi

とか、自分の好きなものでつくれます。

この下のコードを、外観、テーマ編集、style.cssってところに、つけたしておけば、オッケーですよ。

実際に記事中での文章を囲み方

記事中での文章を囲みたいときは

って書いておけば、囲まれます。

囲みたい文章を、この中に入れる

そうすると、こんな感じで、囲みを記事の中にだせるようになります。

これに、サロンを運営されていて、”お客様の声”とかをブログに載せたい方は、この四角の中にお客さんからの感想を書いたら、いいんじゃないでしょうか?。

辰巳さんのサロンに行って、超楽になって体がほぐれた。ありがとうございます!

みたいな感じで、使ったら、どうかしら?

色や文字の太さのアレンジも可能

色、形はアレンジできます

.sikaku { } の { } ←この間にいれるコードを変えて編集できます。

border: solid 3px #ffb6c1;

border: solid 3px #b6c1ff;

などに変えると、色を青に変えられますし。

色の見本は、こちらのページなどを参考にされるといいと思います。

色の見本のサイト

『16進数 カラーチャート』とか、『HTML カラーチャート』などいれると、似たようなサイトがたくさんでてきますよ!

ピンクの枠を薄い黄色にしたり、色は、自由にアレンジできます。

もういっこ、クラスというものをつくるので、今回は、.sikaku2 にしました。

そうすると、このような青で囲まれた枠をつくることができます。

字を太字にせずに、普通の細さにしたいばあいは、太字にしますよ。という指定を削除すれば、普通の書体になります。

font-weight: bold;

この指定を1行削除してしまえばOKですね。

他にも、自分のこのみに、角を直角にしたり、形もアレンジできます。

サルワカさんのサイトで、いろいろな見本がありますので参考にするといいですね。

メルマガもやってます。

フォローする