今回は賢威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はこういったショートコードを、
いちいち自分で打ち込まなくても、
登録しておけばボタン一つで呼び出すことが
できる超〜〜〜便利なプラグインです。
こんな感じで登録をしておくと
囲みたい文章を選択して、
登録したボタン名をクリックするだけで
テキストボックスの装飾することができるようになります。
ワンクリックで装飾タグが使えて
とっても便利ですのでぜひ活用してください。
まとめ
ということで、賢威７の文章をテキストボックスで
囲みたい欲求は解消できましたでしょうか♪
引き続き見やすい装飾カスタマイズをしていきましょう！
自由な働き方を叶えたいあなたへ
