【賢威7】テキストボックスの作り方ー文章を四角く囲う装飾方法

今回は賢威7で、文中の文字を四角いテキストボックスで
装飾するカスタマイズを行っていきたいと思います！

CSSだけのカスタマイズなので３分程度で完了です！

ソースコードもそのままコピペで使えます。

文章をテキストボックスで四角く囲みたい！

今回行いたいカスタマイズはこんな感じです。

ブログなどで文章を書いていると、
こんな感じで要素をまとめたくなることってありますよね。

「引用タグ」や「テーブルタグ」なんかで囲うことはできますが、
他サイトからの引用文でもないし、リストを作りたいわけでもない。

ただ四角くテキストボックスで囲えればイイんじゃ〜！
という人のためのカスタマイズです。

賢威７で文章をテキストボックスで囲う方法

CSSファイルにソースを追記する

カスタマイズするのはCSSファイルです。

賢威７ではbase.cssファイルに下記のソースを追記します。

/*テキストボックス*/
.textbox {	
	border: solid 1px #5bc2d9 ;
	margin:10px 10px ;
	padding:20px 15px ;
}

四角い囲みの線の太さを変えたい時は
border: solid 1px #5bc2d9
の1pxの部分を2pxなり3pxなりに変えてください。

色を変えたい時は同じ箇所の
#5bc2d9の部分をお好きなカラーコードに変更してくださいね。

カラーコードはこちらのサイトが見やすいです。

テキストボックスで文章を囲みたい時

で、CSSに上記のソースコードを追記したら、
テキストボックスで囲みたい文章にこのタグを付けます。

<div class="textbox">この間に囲みたい文章を書く</div>

テキストモードの方ですね。
そうするとこんな感じで表示することができます♪↓

めんどくさい人はAdd Quicktagを活用する

そんなタグ、いちいち覚えらんないよ、
面倒くさい、という人は
「Add Quicktag」プラグインに登録しておいてください。

Add Quicktagはこういったショートコードを、
いちいち自分で打ち込まなくても、
登録しておけばボタン一つで呼び出すことが
できる超〜〜〜便利なプラグインです。

こんな感じで登録をしておくと
囲みたい文章を選択して、
登録したボタン名をクリックするだけで
テキストボックスの装飾することができるようになります。

ワンクリックで装飾タグが使えて
とっても便利ですのでぜひ活用してください。

まとめ

ということで、賢威７の文章をテキストボックスで
囲みたい欲求は解消できましたでしょうか♪

引き続き見やすい装飾カスタマイズをしていきましょう！

自由な働き方を叶えたいあなたへ