人気ブログランキングへ

 

テキストボックス

 

マロン
ねぇりょうちゃん。
涼すけ
うん?
マロン
りょうちゃんがたまに使ってるこれ(下図)ってどうやってやってるの?

 

これ。

 

涼すけ
あー。「テキストボックス」のことだね。
フトシ
僕も知りたい!聞こうと思ってたの!

 

けっこう便利。「テキストボックス」

 

涼すけ
「テキストボックス」は記事本文の中で「ちょっとだけ強調したい文節」とか、「注意点」なんかを読者さんに伝えるために大活躍するんだよね。僕もかなり重宝してるんだ。
マロン
読者さん側も読みやすくなって記事内容がわかりやすくなるもんね。
フトシ
ほんと!わかりやすくなるし、記事がシマるよね!
涼すけ

そうだね。

僕らがやるべきことは、

 

有益で新鮮な情報と

普遍的で信頼できる情報。

 

「わかりやすく」そして「丁寧に」伝えることだからね。

正直、僕と同レベルや遙か上の知識で、詳しく有益な情報を発信してる人ってたくさん居るんだけど、残念なことに表現自体が難解だったり、逆に文章が稚拙すぎてわかりづらかったり、わざわざ作った図解説明(画像の質や加工技術も含む)がイマイチだったり、誤字脱字の嵐だったりするんだよね。

そんな人たちと自分を差別化するには「わかりやすく」そして「丁寧に」webサイトを作るべきなのかなって。

っていうかそれしか無いんじゃないかなってこのブログを立ち上げるときに思ったんだよね。

だから使えるものは全部使ってさ、やれることは全部やりたいんだよね。

マロン
りょうちゃんっぽいなー!りょうちゃんが昔やってたお店もそんな印象だった!
フトシ
すっごいわかるわ〜!笑
涼すけ
そう?笑
涼すけ

この「涼blog」の大切なコンセプトの中のひとつに

「難しい書籍をマンガのように」って考え方があるんだよね。

どんなに素晴らしい内容のコンテンツでもさ、その内容がユーザーさんに伝わらなかったらまったく無意味でしょ?

情報は受け手がすべてなんだよね。受け手がどう受け取るかで、その情報の価値は決定されるんだ。

マロン
ほんとその通りね!発信者の独りよがりな情報なんてダメだもん!
フトシ
涼blogは僕でも理解出来てるんだから頼もしいよ!

 

テキストボックスを使うには難しい知識は要りません。

 

涼すけ
ちょっと話が脱線しちゃったけど、実際にどうやってこの「テキストボックス」を使っていくかを解説するね。

上述したことと多少重なってくるけど、例えば…

 

「下図のコードを貼り付け、style.cssにclassを定義します。」

textalign: left;
border: 1px solid #ccc;
padding: 20px 0 10px 20px;
backgroundcolor: #ffffff;
lineheight: Normal;
margin: 0;
overflow: hidden;
}
.imgtxtimage{
float: left;
margin: 0 15px 10px 0;
}
.imgtxtbody{
fontsize:19px;  /* 文字の大きさ */
display: tablecell;
verticalalign: middle;
height: 80px;
}

 

涼すけ
なんて言われても、初心者はチンプンカンプンなわけじゃん。(もちろんwebサイト自体のペルソナによって変わります。誤解がないように一応。)
フトシ
???
涼すけ
だからフトシくんにもちゃんとわかるように解説していくね。こんな難しい方法じゃなくてもぜんぜん出来るから安心して大丈夫だよ。
フトシ
はい!
マロン
お願いします!

 

「Simple Custom CSS」というプラグインを使います

 

マロン
プラグインを有効化するとごく稀に不具合が発生することがあります。

大切なブログを守る為にも必ず事前にバックアップをとるか、ローカル環境で試してみてから使ってくださいね❤︎

プラグインのインストール方法はこちらの記事で詳しく解説してます!


※現行の「WP4.7.2」及び「WP4.7.3」と「Simple Custom CSS」は、互換性のテストがされてません。
インストールされる場合は事前にローカル環境でテストするか、メインブログではない(最悪、失敗しても問題ないもの)で試してみてからインストールしてください。(当ブログで2017.3中旬にインストールしてみたところ、まったく問題ありませんでした。但し100%安全とは言えません。)

 

涼すけ
今回は「Simple Custom CSS」っていうプラグインを使っていきますね。(「CSS」の意味はアフィリエイト用語集「初心者編」で軽く触れてますのでご覧ください。)

涼すけ
「Simple Custom CSS」を有効化したら、管理画面左サイドバーにある「外観」から「カスタムCSS」をクリックしてください。下図画面が表示されます。

 

css1

 

涼すけ
下図のコードを、そっくりそのままコピーしてください。

 

div.box1 {
width:100%;
background:#efefef;
padding:12px;
-webkit- box-sizing:border-box;
box-sizing:border-box;
}

 

涼すけ

コピーしたコードを下図画面の赤枠内に貼り付け、「カスタムCSSの更新」をクリックして下さい。「カスタムCSSの更新に成功しました。」と表示されます。

「background」とはボックスの色のことです。任意の色に変更出来ます。白や黒などメジャーな色は「white」「black」などと打ち込んで大丈夫です。

「padding」とは打ち込んだ文字列とボックスの外側部分の距離のことです。あまり広げすぎると不自然になりますので注意してください。

その他は書き換えないようにしてください。

 

 

css2

 

涼すけ

続いて投稿画面で実際に打ち込んでみます。

下図画面通りにまず「ビジュアル」から「テキスト」に変更します。(テキストで打ち込まないとボックスは出現しません。)

任意の文章(表示させたいテキスト)を打ち込み、その打ち込んだ文章を

<div class=”box1″></div>

で挟んで下さい。

「更新」をクリックし確認してみましょう。

 

css3

 

涼すけ
正しく表示されてますね。

 

css4

 

涼すけ

これで完了なのですが、他にもいくつかのパターンを作っておいて必要に応じて使い分けるとやりやすいと思います。

下図画面の通り、コピーを繰り返していくだけなのですごく簡単です。「box1」「box2」「box3」と名称を変更しておきましょう。

 

css5

 

涼すけ
先程と同じ要領で打ち込んでみます。かならず新しく作った名称に変更してあげましょう。

 

css6

 

涼すけ
こちらも正しく表示されてます。

 

css7

 

「Simple Custom CSS」テキストボックス まとめ

 

涼すけ

今回は「テキストボックス」を作るための「Simple Custom CSS」について解説してきました。それほど難しいものではありませんので、慌てずにゆっくりやってみてください。

「テキストボックス」があると記事を書く上でのバリエーションが増えてすごくラクになりますよ。是非試してみてくださいね!

 

では、本日も最後まで最後までお付き合い下さいましてありがとうございました!

 

 

 

マロン
トップページはこちらです❤︎

 

 

 


人気ブログランキングへ