この記事を読むとできること

ワードプレス「Cocoon」で表の作成・挿入方法

通常のHTML作成で表作成では<table>タグを使って表を作成しますが、ワードプレスではどうやって表を作成するのか、私と同じように悩んだ方のお役に立てれば嬉しいです。

WordPressで表を作る方法はいくつかありますが、結論から言うとワードプレスではプラグイン を使って表を作成する方が断然簡単なのでこちらを紹介します。

プラグイン　TinyMCE Advanced

初心者の方には、プラグイン（TinyMCE Advanced）のインストール手順も説明します。

すでにインストール済みの方で下記のように「ツールバーに『テーブル』が表示されてるぅ」って場合は次のインストール方法をすっ飛ばしてください。

プラグイン【TinyMCE Advanced】のインストール

まず、ダッシュボードから「プラグイン」→「新規追加」をクリックします。

赤枠の検索窓に「TinyMCE Advanced」と入力して下さい。

「今すぐインストール」→「有効化」を押します。

有効化は忘れやすいので必ずチェックしましょう！

旧エディターの設定

TinyMCE Advancedの設定の前にエディターを「旧エディター」に切り替えておきましょう。

私がWordPressを始めたころは、すでに新しいエディターができていましたが、非常に使いにくいとあまり評判が良くなく、旧エディターを使用しています。

もちろん現在新エディターで慣れている方は、そのまま使っていただいて構いません。

旧エディターを使うにはプラグインの「Classic Editor」をインストールするか、もしくはCocoonは新旧エディターの切り替えが簡単にできるのでCocoon設定からも使えます。

プラグイン の場合は先ほど同様、プラグイン 検索からインストール、有効でOKです。

Cocoon設定の場合はまず「Cocoon設定」を開きます。

「エディター」タブを選択

「Gutenbergエディターを有効にする」にするチェックを外して、「変更をまとめて保存」を押します。

以上のこれだけで、旧エディターに変えることができます。

簡単ですね！

TinyMCE Advancedの設定

次に「TinyMCE Advanced」の設定です。

①「旧エディター」を選択

②「テーブル」を上のツールバーへドラッグ&ドロップ

③最後に「変更を保存」を押します。

テーブル以外にも色々あるので使いたいボタンがあれば、ツールバーへドラッグ&ドロップしておきましょう。

これで表を作る設定は完了です！お疲れ様でした！

表の作り方

早速、表を作ってみましょう。

投稿画面で、ビジュアルエディターの「テーブル」をクリックします。

そうするとマス目の表が出てきます。これを表と例え、「縦3列×横4行」の表を作るなら、このように選択します。

そうすると以下の表ができます。四隅の白いポイントで高さや幅を変えられます。

セルの大きさ（幅・高さ）の設定

セルの高さ

セルの幅と高さを調整するには、調整したい線の上にカーソルを当ててドラッグして下さい。

表全体のセルの高さを均一に変更したい場合、（またはどこか1列だけでもOK）まず全体を選択します。（全体選択は左上からドラッグして右下に引っ張ると簡単です）

テーブルをクリック→「セルのプロパティ」で高さを入力します。

いったん高さに指定したい数値を入れます。Ex,100px

そうすると全てのセルの高さが100pxで揃いました。

幅に関しては％入力

幅に関しては％で入れる必要があります。

もう一度「テーブル」をクリックして「表のプロパティ」を選択しましょう。

表の幅を、全体幅（コンテンツ幅）の何%にするかを指定します。

赤字のコンテンツ幅（100％）に対して表の幅を50％にすると上記のようなサイズになります。

行・列の追加

列や行を増やすには、テーブルから「挿入」を選択します。

不要な列や行を削除することもできます。

セルの設定

「セルのプロパティ」では、背景の色、線の種類や色などを変更することができます。

「横位置」「縦位置」はセルの中の文字位置のパターンです。

セルの種類の「ヘッダーセル」を選択すると、セルが見出し（太文字）になります。

セルのプロパティ（高度な設定）

高度な設定は「Border style (線の種類)」「枠線の色」「背景色」の指定ができます

表の横スクロール設定

表のセルの初期設定だと、文字がセル幅より長くなると、折り返して下に連なっていきます。

文字を一列にするには「Cocoon設定」の「本文」タブをクリックします。

「本文」タブページの下の方にあるテーブル設定で「横幅の広いテーブルは横スクロール」に チェックを入れて「変更をまとめて保存」を押します。

編集画面では変化がなくわかりにくいですが、プレビューで確認するとちゃんと一列になってます。

コンテンツ幅よりも長くなると「横にスクロールできます」と教えてくれるようになりますよ。

まとめ

ワードプレスでは表は簡単に作成できます。実際に触ってみてみるとすぐ慣れますので早速作ってみましょう。

”スタイル”ツールのテキスト装飾バリエが沢山あってなかなか把握できない。。。

WordPressテーマのCOCOON（コクーン ）を使っていてすごく使いやすいのですが、超便利ツールの”スタイル”ツールのテキスト装飾バリエが沢山あってなかなか把握できず、毎回、スタイルから選択→表示された装飾見てみる→ちょっとイメージと違う→再選択→表示された装飾みる・・・の繰り返しをしてました。。

そこで

WordPressテーマのCOCOON（コクーン ）の”スタイル”ツールにはどのようなテキスト装飾があるのかまとめました。

COCOON  スタイルツール　表示一覧

【ボックス】アイコン

【ボックス】案内

【ボックス】白抜き

【ボックス】タブ

【ボックス】付箋風

バッジ

オレンジ　レッド　ピンク　パープル　ブルー　グリーン　イエロー　ブラウン　グレー

マイクロコピー　（使い方）

マイクロコピーとは、リンク・ボタン周りに表示させるコピーライティング用の機能です。

例えばボタンの上に「＼アフィリエイト するなら／」と入れる場合

スタイル ＞ マイクロコピー ＞ テキスト（上）＞ 中央

になります。

テキスト（上）

テキスト（上）＞　左

テキスト（上）＞　右

テキスト（下）

テキスト（下）＞左

吹き出し（上）

吹き出し（上）＞左

吹き出し（上）＞中央

吹き出し（上）＞右

吹き出し（下）

吹き出し（下）　＞　左

吹き出し（下）　＞中央

吹き出し（下）　＞右

ボタン

大きさ

レッド小

レッド中

レッド大

大きさは上記の3パターンです。

カラーパターン

ピンク中

パープル中

ディープパープル中

インディゴ中

ブルー中

ライトブルー中

シアン中

ティール中

グリーン中

ライトグリーン中

ライム中

イエロー中

アンバー中

オレンジ中

ディープオレンジ中

ブラウン中

グレー中

囲みボタン

「囲みボタン」はaタグを用いたテキストリンクをボタンにする機能です。

A8.net 

↑こちらに「囲みボタン」を適用します。

レッド（中）
A8.net 

大きさ

A8.net 

A8.net 

大きさは上記の3パターンです

カラー

「ボタン」と同じカラー展開なので割愛します。

囲みブログカードラベル

まとめ

たくさんありすぎて全然使いこなせてなかった・・・という方！簡単に見え方が華やかになりますのでぜひ使ってみてください！

アフィリエイト収入は一夜にしてならず

アフィリエイトで収入を作るには

アフィリエイトを始めようと思っている方はまず「副業で月に1、2万円の収入があればいいなぁ」という方が大半だと思います。実際にはその額まで稼ぐにはどの程度の期間、作業量、そしてどのような事を意識してやり始めた方がいいか簡単にまとめました。

まずアフィリエイトとは、広告料を支払ってくれる広告主がいて初めて成立するビジネスモデルです。ただ自分の趣味や日記を書いていても稼げるようにはなりません。

では、収入を上げているサイトはどのような記事を書いているのでしょうか？

1. 特化、専門サイトとして自分が詳しい分野を中心に記事を書いていくor精通するまで知識を得る
2. 報酬が高い広告が多い分野を選ぶ
3. SEO、SNSなどでしっかり集客している

ジャンルによって、知りたいこと・ニーズは変わってくるので、その分野について知識がないと勝負できません。

またいくら良い記事を作っても集客がうまくいかなければ収入は生まれません。

分野を選ぶことが＜稼げる＞ことに大きく関わってきます。まずは、この3点を意識しましょう。

アフィリエイトの考え方

集客がキモ

集客することが収益をあげる上では必須ですが、ただ集客すればいいというわけではありません。集客される人のニーズ、属性にあった内容の記事、その人にとって有益な情報がないと収益には繋がりません。

車などの写真がたくさん掲載されているサイトを見に来る人はみんな「車好き」という属性です。そのサイトに「タイヤホイール」「カー用品」などの広告を載せれば売れる可能性は高いですが、そのサイトに「ペットフード」を掲載しても関連性が限りなく薄いため、売れる可能性は極めて低いはずです。

また、アクセス数が多い＜車の情報サイト＞を運営していてもASPの広告の中に「カー用品」が無ければアフィリエイトできない、またそのアフェリエイトの「カー用品」がカーショップ等に売られている競合製品よりも魅力的でなければ「広告があっても売れない」はずです。さらには「商品が売れたが広告料、つまりアフィリエイト報酬（収益）が少ない商品・広告」であれば＜アフィリエイトで収益＞は得られないという事です。

以上を踏まえると

どういうジャンルのサイトを作るかで競合性、収益を得られる確率がある程度左右される。つまり、ASPにない広告はそもそもアフィリエイトできない（収益化不可）、またニーズが全くないジャンルは集客が相当厳しいので向いていないということ。

となってしまいますので頭に入れておきましょう。

アフィリエイトを始めるステップ

アフィリエイトサイトで月に1、2万円稼ぐという事は硬い決意、そして時間とお金をかけないとできません。たかが1、2万ですがアフェリエイトサイトを運営している大半は月2万も収益を挙げられていないのが現状です。

すでにアフィリエイトマーケットは巨大な競合がひしめき合っていて常にSEO対応し、いかに集客をするか目を光らせているのです。その中で集客を勝ち取っていくには根気が必要です。半年間収益0でも修正しながらブログを書いてく、まさに鉄の心が必要です。

大体の人が100記事も書かずして諦める人が大半です。その中でとりあえず100記事を作り上げる根気が今すでにない人はアフェリエイトに向かないでしょう。

しかし、一度、波をつかめば不労所得として恩恵を受けられるのです。それまでの努力が確実に身を結ぶまで根気強く続けることがとても大事なのです。

以上を肝に銘じた上で次に進みましょう。

ワードプレスでブログ作成

まずはブログを作成しましょう。基本ワードプレスで始めるのが一般的です。

ワードプレスを始めるにはサーバーをレンタルすることから始まります。こちらの記事でワードプレスの始め方をまとめています。

無料ブログでもアフィリエイトは可能ですが、、無料なだけあって使用制限があったり無関係な広告が表示されたり、またアフィリエイトができないブログもあったり、これからアフィリエイトに注力していこうとするサイト作成にが向いていません。

それに比べて、ワードプレスでのブログ作成はレンタルサーバーを契約し、独自ドメインでWEBサイトを構築しても、年間にかかるコストはせいぜい13,000円程度です。月換算だと1,100円くらいです。

この程度の出費は自分への投資だと思ってサーバーをレンタルしましょう。この出費は自己決意です。サーバーをレンタルしたからには必ずアフィリエイトで元をとるという大きなモチベーションにしてください。

【独学】プログラミング　ワードプレスを触る

【独学】プログラミング　サーバーを借りるべき3つの理由

サイト特色、ジャンルを決める

どのジャンルで攻めていくか決めましょう。

選ぶべきジャンルはマーケットの大きさ

例えば

• 金融系のアフィリエイト報酬合計2億円
• カー用品のアフィリエイト報酬合計200万円

の場合、月1万を得やすいマーケットは当然分母の大きい金融系のマーケットになります。よってマーケットの大きいジャンルが有利と言えるでしょう。

しかし、額が大きい＝巨大な競合他社が多いという現実があります。上記のような金融の集客キーワードはほぼ強豪サイトがひしめきあっており、今からアフィリエイトを副業で始める方に取ってはほぼ不可能な領域です。

ニッチな角度から攻めていく

例えば『visa クレジットカード　メリット』など１企業に絞って徹底的に詳しく解説するブログを作る。visaでクレジットカードを作りたい人だけを狙い撃ちしたブログ記事で、月に10本登録があればそれだけで月に1万円程度を狙える領域でしょう。10本のバリエーションはメリットの説明やデメリット、使い方、附帯するオプションなど様々な項目を細分化して記事を作ることになれば書けるはずです。ただし、その記事が読者に有益なものを書くのにはそれなりの知識を得るために調べるというプロセスが生まれます。そういう努力が必要なのです。

「ニッチなジャンルでもその中の一番を目指す」ということが収益への近道です。このような王道ジャンルでも、ニッチなところを狙って行けば月に1万円の報酬を上げる事は可能です。

『これはニッチかも』と思ったら実際に『visa クレジットカード　メリット』のように実際に検索し、出てくる既存サイトよりも分かりやすく、読みやすい記事を書く事ができると判断すれば即実行しましょう。

基準はそのテーマで30記事ほど書けるようであれば完璧です。SEOでも上位を狙えるでしょう。しかしまず初めはそのレベルは無理なので、できればある程度自分の得意な分野から初めていきましょう。その中で記事の書き方に慣れていき、徐々にアフィリエイト記事が描けるようになれます。まずは練習のつもりで10記事書いてみましょう。

ASPに複数登録して広告や報酬額を確認してみる

ASPとはアフィリエイトサービスプロバイダの略で、アフィリエイトをやりたい人と広告主企業をつなぐ仲介役です。大小合わせると100社以上のASPが存在しています。ただし、全てが即提携、アフィリエイトできるかというと、実績がないと提携できないASPもあります。その中でも初心者向けのASPをピックしました。同じ広告でもASPによって報酬が異なる場合もありますので必ず、複数のASPに登録しましょう。

おすすめアフィリエイトの記事はこちら

まとめ

アフィリエイトで収入を得るには絶え間ない努力と継続する強い気持ちが大事です。収益1万の壁が最も高いと言われる中で、その1万の収益を得るためには半年以上かかるのは当たり前だという心構えで取り組んでいきましょう。

例え収益が低い状態でもブログを続ける中での文章力、知識は決して無駄ではありません。その中で収益が出れば儲け物というくらいの感覚で最初は気長に、そしていいものを作れる努力を惜しまず継続すれば結果は出るはずです。

何もしなければ何も生まれません。例え結果が出なくとも書くことが大きな一歩につながるのです。

独学でプログラミングを勉強していくと、HTML ,CSS,JQuery次はなんの言語をとなった人、WordPress【ワードプレス】略してWPを学ぶタイミングです。

ぶっちゃけプログラミングの知識がなくてもできてしまうのですが、この先、サイト作成するにも必ずWP案件は出てきます。そして技術の割には高単価案件も多いのです。

ただし、WPはサーバー、ドメインが必要になりますので、先行投資として月サーバー代1000円程度、ドメイン代少々必要になりますが、後々回収できるほどのメリットがありますので飛び込んでいきましょう。ちょっと贅沢なランチ1食分と思えば安いもんです。

サーバーを借りる

サーバーはたくさんありますが初心者の私はいろいろ検討した結果エックスサーバー にしました。他のサーバーも含め料金プランはほぼ同じくらいなので有名なとこにしました。また独自ドメインが永年無料でゲットできるのも大きなメリットです。これは期間キャンペーンなのでHPで確認してください。

エックスサーバーの申込はこちら

エックスサーバー をレンタルする記事はこちら

【初心者向け】エックスサーバーをレンタルする方法

【初心者向け】エックスサーバーをレンタルする方法 エックスサーバーを借りてブログを作りたい エックスサーバーってどうやって借りるんやろか 実際にサーバーを借りる際には初めてのことなのでわからない...

design-eight.com

2020.10.08

エックスサーバー ではすぐにワードプレスを始めたい人に「ワードプレスクイックスタート」があります。こちらの記事から

【初心者でも安心】ワードプレスでブログをすぐ始める方法

【初心者でも安心】ワードプレスでブログをすぐ始める方法 ブログをはじめたいけどまず何をしたらいいんやろか ブログを始めたいと思った時、まず何をすべきか、ブログ初心者のかたが迷わず、確実に、簡単にできる...

design-eight.com

2020.10.10

料金プランはベーシックで【X10】でいいと思います。基本的には10日間無料キャンペーンをやってますので自ずとそのパターンになります。10日以内に支払登録しなければ10日間で終了、契約する場合は10日以内に支払登録をします。年払いがお得なのでおすすめです。

独自ドメインの取得

無料で独自ドメイン取得

聞いたことはあるけど実際に取得したことがある人は少ないのではないでしょうか。プログラミングの勉強を始めるにあたり、いずれは取得するとは思っていましたが。。

独自ドメインは実際にはいろいろなサイトで取得できますが、今回はエックスサーバーで独自ドメインが無料で取得できるのでここで取得しましょう。（期間限定キャンペーンのため、要確認）通常は年間700円〜1000円程度かかりますが永年無料だそうです。これはありがたいですね！

事前に取得できるかドメインを調べましょう。決定後、変更できませんのでご注意を。ドメインは『.com』など一般的なものがいいです。見慣れないドメインより、なんとなく信頼されやすいからです。【ムームードメイン】などのサイトでお好きなドメインを事前検索して使用可能かチェックしましょう。エックスサーバー でも調べられますが、調べるだけならドメインに特化したサイトの方が調べやすいからです。
ムームードメイン
お好きなドメインが決まったらエックスサーバー で独自ドメインを取得しましょう。

エックスサーバー で独自ドメインの取得方法

独自ドメインは「Xserverアカウント」からの申し込みになります。エックスサーバー の管理画面の左に【サービスお申し込み】がありますのでここから入ります。

その中のエックスドメインにキャンペーン対象の無料サービスの独自ドメイン取得があります。キャンペーンがない場合は新規申し込みになります。

独自ドメインを使うための設定

エックスサーバーで独自ドメインを用いたWordPressを設定、公開するためには、「独自ドメインを使うための設定」が必要になります。エックスサーバー の管理画面の『サーバーパネル』と呼ばれる管理画面に入り『ドメイン設定』を行います。

「Xserverアカウント」の右下にある「ご契約一覧」のなかにある、「サーバー管理」をクリックします。以上でサーバーパネルにログインできます。

サーバーパネルのトップページに並んでいるメニューのなかから、「ドメイン設定」をクリックし,「ドメイン設定追加」をクリックします。取得したドメイン名を「.com」「.net」などまで入力し、「確認画面へ進む」をクリックします。

WordPressを設置する

引き続きサーバーパネルから、「WordPress簡単インストール」をクリックします。

「ドメイン選択画面」が表示されたら、先ほど追加したドメイン名の右にある「選択する」をクリック。

「WordPressインストール」をクリックします。

「サイトURL」を選択・入力します。
その後、「ブログ名」「ユーザー名」「パスワード」「メールアドレス」を入力し、「確認画面へ進む」をクリックします。

確認画面へ進むと「インストールを行うと、インストール先ディレクトリ内の「index.html」が削除されます。ご注意ください。」と表示されますが無視でOK。

管理画面URLが発行されるのでさっそくログインしてみましょう。WordPressの初期ページが表示されれば、WordPressブログの設置は完了です！

ワードプレスの初期画面。これが表示されれば設置完了！

まずはサーバーをレンタルするところから始まります。プログラミングをはじめる前は無縁だった物を今はレンタルして活用しているなんて、感慨深く感じます。。。知らないことを自分で調べて知識にしていくことは何歳になっても必要。そして今はネットで全て調べられる。これを使わないてはないです。今後、より一層広がるネット社会に向けて必須になる知識、ツールです。この機会にぜひ学んで見ては。

今回レンタルしたサーバー、独自ドメインもキャンペーンで無料（期間制限あり。HPで確認してください）

エックスサーバー