賢威カスタマイズイメージ画像

ブログなどの記事作成において、文章途中で強調したり、目立たせるために罫線枠で
囲うことがありませんか?

俗にいう『テキストボックス』というヤツです。
下のような枠囲い(背景も色付き)は見たことがあるかと思います。

まあ、これも一種のテキストボックスと言えないこともないですけど・・・『引用』です。

これは賢威に最初から備わっている装飾です。

これと同じように簡単・便利なテキストボックスをいくつか用意しました。
サイトやブログにアップするテンプレートのcssにコピペするだけです。

設置(準備)は1分間でOKです。
簡単にできてしまいます。

あとは実際の記事内に記載するだけです。
さあ、それでは早速チャレンジしてみませんか?

次のようなテキストボックスを用意!

テキストボックス
テキストボックス0・・・白い背景に白い囲み線・・・実質、書き出し位置が下がった感じになるだけ。
テキストボックス1
テキストボックス2
テキストボックス3
テキストボックス4
テキストボックス5
テキストボックス6(テキストボックス0と同じく背景も囲み線も白色)
※ただ、見た目、文字の書き出し位置がズレる形。

1分間でできるカスタマイズ(事前準備)・・・cssを加筆・修正する

以下のテキストをcssにコピペするだけです。
たったの1分間で終了!です。

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

/*テキストボックス0*/
.textbox0 {
border: solid 1px #fff ;
background: #fff;
margin:30px 30px ;
padding:20px 15px ;
}

/*テキストボックス1*/
.textbox1 {
border: solid 3px #ccc ;
box-shadow: 0 0 3px 3px #ccc;
margin:30px 30px ;
padding:20px 15px ;
}

/*テキストボックス2*/
.textbox2 {
border: solid 2px #ccc ;
margin:30px 30px ;
padding:20px 15px ;
}

/*テキストボックス3*/
.textbox3 {
position: relative;
margin: 2em 2em;
padding: 20px 30px;
background: #efefef;
box-shadow:0px 0px 5px 5px rgba(0,0,0,0.1);
}

/*テキストボックス4*/
.textbox4s {
border: solid 3px #ccc ;
box-shadow: 0 0 3px 3px #ccc;
margin:30px 50px ;
padding:20px 0px 0px 0px ;
}

/*テキストボックス5*/
.textboxgreen {
border: solid 1px #07d34f ;
background: #07d34f;
margin:0px 0px 0px 0px ;
padding:0px 0px 0px 0px ;
}

/*テキストボックス6*/
.textboxs {
border: solid 1px #fff ;
background: #fff;
margin:0px 70px ;
padding:0px 70px ;
}



もちろん、htmlでもWPでもどちらでも可能です。

※上のテキストを範囲指定して、Ctrlキー+C でコピーします。

賢威7のカスタマイズ

賢威7なら、cssフォルダの中にあるbase.cssをカスタマイズします。

base.cssファイルを開いて、いちばん最後の行の後に
上で範囲指定してコピーしたものを、Ctrl+Vでペーストしてください。

もちろん編集(E)からコピー・ペーストでも構いません。

賢威6のカスタマイズ

賢威6の場合は、design.cssファイルを開いて、同じようにいちばん最後の行に
上で範囲指定してコピーしたものをペーストします。

あとは、実際に記事の作成をする場合の表記方法です。
以下のようになります。

実際にサイト内での文章作成またはブログでの記事投稿の際の書き方

テキストボックスを挿入したい場所に、

<div class=”textbox”>
ここに文字を入力します。
</div>

※もちろん、textbox ⇒ textbox1 に変更できます。
お好みのテキストボックスを使ってください。

テキストボックスの組み合わせで変化をつける場合・1

ここでは、テキストボックス0の中に、テキストボックス5を入れる形にしてみます。

イメージはこんな感じです。

ここに文章入力できます。
文字色を白色にして太文字にした方が見やすいかも知れません。

この場合・組み合わせ1での記載方法

以下のように記載します。

<div class=”textbox0″>

<div class=”textboxgreen”>
ここに文章入力できます。
<span class=”white b”>文字色を白色にして太文字にした方が</span>見やすいかも知れません。