【賢威カスタマイズ】テキストボックスを1分でカスタマイズする簡単な方法!

秋田です。

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

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

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

これは賢威に最初から備わっている装飾です。
※もちろん賢威以外でも世界標準的に決められているものです。

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

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

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

今回の記事は

・(わたし流)テキストボックスのパターン
・1分間でできるカスタマイズ
・テキストボックス内での文字入力

についてのご案内します。
[br num=”1″]

目次

(わたし流)テキストボックスのパターン!

一目瞭然、百聞は一見に如かず、まずはどんなイメージか見てください。

テキストボックス
テキストボックス0・・・白い背景に白い囲み線ですから「見えない」と思います。
・・・実質、書き出し位置が下がった感じになるだけ。
テキストボックス1
テキストボックス2
テキストボックス3
テキストボックス4・・・実際どんな感じになるか自分で試してみてください。
テキストボックス5・・・同じく、どんなイメージか自分で試してみてください。

[br num=”1″]
2つほど省略しましたが・・・不親切ですいません。
やりだすとキリがないので興味のある方のみ試してみてください。(課題みたいなものです)

[char no=”2″ char=”ネット王女”]カスタマイズの実際の訓練にもなります。
実際のコードを次の章でご案内します。[/char]

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

賢威テキストボックス1分間カスタマイズ

以下のテキストを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 ;
}

[br num=”1″]
もちろん、html でも WP でもどちらでも可能です。
※上のテキストを範囲指定して、Ctrlキー+C でコピーします。

賢威7のカスタマイズ

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

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

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

賢威6のカスタマイズ

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

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

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

賢威カスタマイズ・テキストボックス

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

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

と入力してください。
実際には・・・

[char no=”2″ char=”ネット王女”]■ テキストエディタなどで用意しておいて、そこからコピペするか
■ AddQuicktag などのプラグインで用意しておくか、という形が効率的です。[/char]

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

以下は応用編です。

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

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

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

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

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

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

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

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

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

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

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

この場合(組み合わせ・2)での記載方法

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

<div class=”textbox2″>
<div class=”textboxgreen al-c”>
ここに文章入力できます。(センタリングしました)
<span class=”white b”>文字色を白色にして太文字にした方が見やすいかも知れません。
</div>
</div>

[char no=”1″ char=”アフィリ王子”]ここまでいかがでしたか?
あまりやりすぎると・・・時間がいくらあっても足りませんね。[/char]

テキストボックスのカスタマイズまとめ

賢威カスタマイズ・テキストボックス

最初で css に記述さえしておけば、文章内・記事内でそれを呼び出して使うだけです。
簡単ですし、組み合わせて使うことでも面白い表現が可能となります。

もちろん最初の定義のところで、自分なりのテキストボックスを用意すればいくらでもインパクトのある装飾での文章がつくれます。
css に記述するだけでいくらでも増やせます。
ぜひ、お試しください。

ただし・・・

【まとめ】
・いくら自分のPCで確認できても・・・すべてのデバイス(スマホ各メーカー・各機種、タブレット、インストールしているブラウザ・アプリ等々)で確認作業ができる人などいません。
・自分が見ている画面と、他の人が見ている画面ではズレがあるのが当たり前です。
・やりだせば・・・キリがない世界であることだけは忘れないでください。

[char no=”3″ char=”秋田秀一”]あまり凝ったものを用意しても、
■ そのページを見てくれる人がどんな人たちで、
■ その人たちの大半がどんな機器でページを見てくれるのかは神のみぞ知る世界です。[/char]
[br num=”1″]
自己満足が成果につながるか、また、凝ったページ作成に費やした時間とそこからの成果の関係については検証できないのが普通です。

ということは・・・あまりカスタマイズを「やり過ぎる」のは・・・もったいないような気がします。
[br num=”1″]

ここまで本当にありがとうこざいました。

[br num=”1″]

スポンサードリンク



よかったらシェアしてね!

この記事を書いた人

秋田秀一と申します。銀行に31年勤務して定年退職後、二足の草鞋を履いています。副業・起業・借金(資金調達と返済)についてお手伝いできましたらうれしい限りです。⇒ プロフィール

目次
閉じる