2016/10/09

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

 

この記事を書いている人 - WRITER -
さいたま市1975年生まれの男性です。ブログを書いて生活しています。ブログは40個あって、いろいろテストしています。ひとの役に立つブログをかけるように日々勉強しています。よろしくお願いします。

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

「記事内の文字列を装飾枠で囲む方法」CSSのクラスの作り方

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

ブログを書いてると、人のブログからの引用以外で、お客さんからもらった感想文など、自分の書いた文章いがいも、ブログにのせておきたいことありますよね。

昔、習ってたときは、

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

Blockコートだと、引用ってことになっちゃうから、「自分のサイトのオリジナルだよ」って、ことにならないので、”やばいじゃん”

それゆえ、オリジナルのCSSクラスを作ることにした。

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

賢威6.0~の場合

CSSでブログ記事中の一部を四角で囲む方法は、このコードを、外観、テーマ編集、design.cssってところにつけたしておけば、オッケーですよ。

ぼくは、コンテンツ本文ってところにいれていますが、基本的にどこでも大丈夫です。

って、クラスを作ってみた。

design.css ってところに、好きなところに書き込んでおいてください。

賢威7.0~の場合

#main-contents って文字列を省きます。

賢威7.0以降では、base.css ってところに、書き込んでおいてください。

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

で、記事中では、

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

囲みたい文章を、この中に入れる
そうすると、こんな感じで、へんな囲みをだせるようになったよ。

これに、お客様の声とかを書いたら、いいんじゃない。

辰巳さんのサロンに言って超、楽になって、体がほぐれたわよー。的な

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

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

余談ですが
.sikaku { } の { } ←この間にいれるコードを変えて編集すると、自分このみに、角を直角にしたり、中の灰色をピンクなど薄い黄色にしたり、いろやかたちは、自由にアレンジできますよー。

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

.customervoice
.okyakunokoe
.kansou
.kakomi

とか、なんでも、自分でつくれます。いろいろできます。こういうのCSS用語でクラスって言うみたいですね。

あと、もともと、賢威にも、デフォルトの枠囲みが入っているみたいだけど、自分好のみの、こってりした四角を使いたいから作ってみました。

Similar Posts:

この記事を書いている人 - WRITER -
さいたま市1975年生まれの男性です。ブログを書いて生活しています。ブログは40個あって、いろいろテストしています。ひとの役に立つブログをかけるように日々勉強しています。よろしくお願いします。
 

Copyright© 藤田マリオのネットビジネス , 2016 All Rights Reserved.