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

賢威7,カスタマイズ

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

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

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

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

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

文章を四角く囲みたい。
テキストボックスで囲みたい。
ただそれだけ。

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

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

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

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

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

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

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

賢威7,テキストボックス,四角,囲む

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

賢威7,テキストボックス,四角,囲む

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

まとめ

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Scroll Up