テキストボックス

 

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

 

これ。

 

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

 

テキストボックスはワードプレスの記事作成に大活躍

 

涼すけ

「テキストボックス」はアドセンスブログの記事本文の中で

「ちょっとだけ強調したい文節」とか、

「注意点」なんかを読者さんに伝えるために大活躍するんだよね。

僕もかなり重宝してるんだ。

マロン
読者さん側も読みやすくなって記事内容がわかりやすくなるもんね。
フトシ
ほんと!わかりやすくなるし、記事がシマるよね!
涼すけ

そうだね。

僕らがやるべきことは、

 

有益で新鮮な情報と

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

 

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

わかりやすく丁寧に伝えることで、結果アドセンス広告だってクリックされやすくなるんだ。

 

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

 

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

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

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

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

このブログ「不労所得の設計図」の大切なコンセプトの中のひとつに

「難しい書籍をマンガのようにカンタンに」

って考え方があるんだよね。

 

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

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

マロン
ほんとその通りね!発信者の独りよがりな情報なんてダメだもん!
フトシ
不労所得の設計図は僕でも理解出来てるんだからありがたいよ!

 

WPでテキストボックスを使うのに難しい知識はまったく要りません。

 

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

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

 

「下図のコードを貼り付け、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」というWPプラグインを使います

 

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

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

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


※現行の「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」について解説してきました。

それほど難しいものではありませんので、慌てずにゆっくりやってみてください♪

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

是非試してみてくださいね!

 

 

テキストボックスを使って「読者さんに正しく情報を伝えていく」ことがちゃんと出来れば「アドセンス報酬」もググッと伸びていくかもしれませんね♪

涼すけ自身も初心者のころは、なかなか自分が思い描くような文章が書けずに四苦八苦したものです。

 

上手く文章が書けず、イマイチ読者さんに伝わってない、むしろアクセス自体が伸び悩んでいるという人は「初心者向けのアドセンスマニュアル」を読んでみると良いかもしれません♪

涼すけが詳しく、わかりやすく解説してますので

良かったら横目でチョロッとだけでもチラ見していってくださいね(*´∀`*)

 

いままで涼すけが経験(苦労)したことってどんなこと?

ぶっちゃけ涼すけは「どれくらいの報酬」をもらってるの?

どれくらいの期間でまとまった報酬を手にすることが出来るの?

 

などをセキララに綴ってますよ♪

もちろん「買う」「買わない」はひとまず置いておいて大丈夫ですからね〜。

 

初心者向けのアドセンスマニュアルを横目でチョロッとチラ見してみる

 

それでは本日は以上になります。

最後までお付き合い下さいましてありがとうございました。

ではまた^^

 

 

 

 

【アドセンス初心者向け♪】

グーグルアドセンスって稼げるの!?「おすすめのやり方」を徹底解説!!おすすめ♪

アドセンスが稼げないなんて嘘!? 稼げない原因や時期を具体的に把握せよ!!おすすめ♪

【初心者限定】Googleアドセンスで稼ぎやすいジャンルなんてあるの?

「アドセンス収入」の目安!!アクセス数(pv数)を上げるコツも詳しく解説!!

アドセンスで「成功したい!」ならマニュアルくらいは完全読破しとこうぜ!

アドセンスで稼ぐための「記事数」は!? 何記事で10万円!?アクセス数や期間も!!おすすめ♪

雑記ブログは稼げない、儲からないは嘘!! アドセンスブログは雑記がいいよ!!

アドセンスを「1年継続する」とどうなる!? アクセスは必ず爆発!?報酬は倍増!?

ブログアフィリエイトのおすすめは特化ブログ?大切なのは順序だよ!

アドセンスブログの過去記事はリライトして書き直せ!! コツやメリットも詳しく解説!!

ブログは毎日更新するとアクセス数って増えるの?更新頻度と検索順位の関係性は?

アドセンスブログはメリットだけじゃない!!デメリットも必ず知っておこう!!

 

【在宅希望のママさん向け((´∀`*))】

アドセンスは「主婦こそ」稼げる!! ブログで収入を得る快感を知れ!!おすすめ♪

仕事を辞めたい!! 向いてない!! 人間関係に疲れたら在宅ワークが一番いいよ!

在宅ワークで主婦だって月10万円稼ぐ!!どこかや誰かや何かに依存するな!!

 

【アドセンス審査】

アドセンス審査に落ちた!?プライバシーポリシーの書き方と設置場所は大丈夫!?

アドセンス審査で画像引用がダメなんて嘘だよ!ただしルールもあるからね!

 

【ブログ「超初心者さん」はこちら】

ブログで収入!! 一般人も初心者も!! 半年後には継続収入5万円!!おすすめ♪

ブログ収入ってどんな仕組み?大切なのはpv数!!アクセス集めのコツって!?

アフィリエイトはブログがおすすめ!アドセンスなら初心者だって月5万円!

ブログの収入とpv数の関係性!!月3万円の報酬は何アクセスで到達する!?

副業にブログをおすすめする理由は簡単だよ!!デメリットも詳しく解説!!

 

【アクセスアップ○秘テク!】

「キーワードの選び方」がわからない!? アクセスアップの選定方法は「コレ」でキマリ!!おすすめ♪

ミドルキーワードの例はこんな感じ!アドセンスは悩まずサクサク記事を書く!

ロングレンジキーワードの選び方!!収入を安定させる戦略は必須だよ!!

アドセンスは「記事タイトル」が命!! アクセスアップしたいならコレだけは知っておこう!!

【ブログアフィリエイト】稼ぐテーマの決め方は正直コレしか無いよ!!

ブログ集客のコツを徹底解説!! 1年後に29.48倍の集客を達成した方法!!

ブログのアクセスを増やす!!月間ベース42万4,948pvまで上げた全手法!!

アドセンスブログを徹底診断!! そろそろ「ググられる側」になってアクセス倍増!!

 

【アドセンス報酬アップ❤︎】

グーグルアドセンスの「クリック率」の平均って!? CTRアップで報酬は雪だるま式!!

ブログ収入の平均ってどれくらい?グーグルアドセンスは?

アドセンス「広告の位置」はどこが最適!? クリック率を上げたいならココがおすすめ!!

グーグルアドセンスの「クリック単価」の平均は!? CPCを上げる方法はコレだ!!

「内部リンク」はSEOに効果ある!? ブログのアクセスアップに必須!!おすすめ♪

 

【マニア向け18禁( *´艸`)

アドセンスブログ収益化を加速せよ!プライドを実践したあなたの未来は「これ」だよ!おすすめ♪

【購入特典】アドセンスマニュアルの威力を増幅させる驚愕の「起爆装置」全8巻!