【WordPress】テーブルの「セル内に」画像やリンクを貼る方法

 

今回の記事は、テーブルの「セル内に」画像やリンクを貼る方法!

この ①〜④のやりかたを紹介します!

商品1商品2
①単なるリンク➜クロームキャストファイヤーTV
②アフィリエイトリンク➜クロームキャストファイヤーTV
③単なる画像➜Chromecastの画像ファイヤースティックのプレスリリース画像12
④アフィリエイト画像➜
こんなのも➜

②と④が、初心者がつまづくポイントではないでしょうか。

ここをマスターすると、商品レビュー記事などで大活躍します!

さっそく見ていきましょう!

 

  1. テーブルのセル内に【リンクを貼る】方法
  2. テーブルのセル内に【アフィリエイトリンクを貼る】方法
  3. テーブルのセル内に【画像を入れる】方法
  4. テーブルのセル内に【アフィリエイト画像を入れる】方法
  5. テーブルで分かりやすい記事を作る方法

 

月間5万PVのあいです。ブログで「月間5万円以上」稼げている人は全体の「8.7%」未満。このブログは2年もかけてそのレベルに到達。ノウハウを知ったら、あっさり達成できました!あっさり達成できたノウハウを公開中!

 

undraw_Business_chat

 

テーブルのセル内に【リンクを貼る】方法

テーブルのセル内に「単なるリンク」を貼る方法からみていきましょう!

 

リンクを貼る基本的な手順

  1. テキストを選択し、
  2. ブロックメニューバーを表示
  3. Linkをクリック

後は入力欄にリンク先のURLをペーストするだけです。

図解で見てみましょう。

 

単なるリンクの貼り方の図解

「Cocoon」を使った例で図解するとこうなります。

①テキストを選択

テーブルの「セル内に」リンクを貼る図解

②「Link」をクリック

テーブルの「セル内に」リンクを貼る図解

③リンク先のURLを貼り付け

テーブルの「セル内に」リンクを貼る図解

 

最後の③で「 」をクリックすれば、

 

こうなります!
商品1商品2
単なるリンククロームキャストファイヤーTV

※「Cocoon」以外のWordPressテーマでも、出てくるアイコンやメニュー表示はだいたい似たような感じです。細かな違いは直感で読み替えて進みましょう!

 

報酬は発生しない

とはいえ、このやり方だと、ただ単に商品の公式サイトに橋渡ししただけ。

たとえ自サイト経由で商品を買ってくれても、報酬は発生しません。

 

ということで、続いては、ちゃんと紹介手数料が振り込まれてくるやり方。

セル内に「アフィリエイトリンク」を貼る方法です。

 

テーブルのセル内に【アフィリエイトリンクを貼る】方法

ここは、本来はHTMLの知識を活用してコーディングするべきポイントではあります。

 

セル内にアフィリエイトリンクを貼る手順

が、今回は「この通りやればOK」というやり方で解説します!

それがこちら!

  1. 貼りたいセルに「🔴」など目印を入れる
  2. ブロックメニューバーの「 」をクリック
  3. 「HTMLとして編集」を選択
  4. 目印をつけた箇所にソースをコピペ

以上で終了!

※目印は「★」でも「■」でも何でもOK。

 

アフィリエイトリンク 手順の図解

同じことを図解で見てみましょう!

①貼りたいセルに「🔴」など目印を入れる

テーブルの「セル内に」アフィリエイトリンクを貼る図解

②ブロックメニューバーの「 」をクリック

テーブルの「セル内に」アフィリエイトリンクを貼る図解

③「HTMLとして編集」を選択

テーブルの「セル内に」アフィリエイトリンクを貼る図解

④目印をつけた箇所にソースをコピペ

テーブルの「セル内に」アフィリエイトリンクを貼る図解

ソースを貼り付けたら「ビジュアル編集」をクリック。

以下のように表示されます!

テーブルの「セル内に」アフィリエイトリンクを貼る図解

  

商品1商品2
単なるリンククロームキャストファイヤーTV
アフィリエイトリンククロームキャストファイヤーTV

 

報酬が発生する

見た目は変わりなくても、今作った方はちゃんとアフィリエイトリンクになっています!

上手に使えれば、テーブル内アフィリはけっこう成約率を上げられます!

テーブルのセル内に【画像を入れる】方法

続いてはこちら。

セル内に画像を入れるやり方です。

この場合の方法は、

「インライン画像」

のメニューを使えばOK!

 

インライン画像を入れる手順

  1. 画像を入れたいセルをクリック
  2. ブロックメニューバーが表示され、
  3. 」をクリックして、
  4. インライン画像」を選択

 

インライン画像の図解

③から図解します!

③ブロックメニューバーの「 」をクリック

テーブルのセル内に画像を入れる方法

④「 インライン画像」を選択

テーブルのセル内に画像を入れる方法

お目当ての画像を選び、最後に選択ボタンをクリック。

選択ボタンの画像

以下のように表示されます!

こうなります!
商品1商品2
③単なる画像Chromecastの画像ファイヤースティックのプレスリリース画像12

 

画像をクリックすればサイズ変更も可能。

テーブルのセル内に画像を入れる方法

 

単なるリンク画像

このケースも単なるリンクをつないだだけなので、報酬は発生しません。 

ということで、アフィリエイト画像を表示したい場合が次です!

 

undraw_mobile_devices

テーブルのセル内に【アフィリエイト画像を入れる】方法

セル内にアフィリエイト画像を入れる手順がこちらです。

 

アフィリエイト画像を入れる手順

  1. 貼りたいセルに「🔴」など目印を入れる
  2. ブロックメニューバーの「 」をクリック
  3. 「HTMLとして編集」を選択
  4. 目印「🔴」をつけた箇所にソースをコピペ

 

アフィリエイト画像 手順の図解

図解します。

前半部分だけはアフィリエイト「リンク」を設定する場合と同じ!です。

①貼りたいセルに「🔴」など目印を入れる

テーブルの「セル内に」アフィリエイトリンクを貼る図解

②ブロックメニューバーの「 」をクリック

テーブルの「セル内に」アフィリエイトリンクを貼る図解

③「HTMLとして編集」を選択

テーブルの「セル内に」アフィリエイトリンクを貼る図解

④目印をつけた箇所にソースをコピペ

テーブルの「セル内に」アフィリエイトリンクを貼る図解

 

ただ、ここで、一つの前提があります。

 

画像アフィリエイトソースを選ぼう

画像は、ASPにある画像のアフィリエイトソースを選びましょう!

画像アフィリが最も使いやすいASPは「もしもアフィリエイト」の「商品リンク」。

「もしもアフィリエイト」の「商品リンク」の使い方がこちらです。

「商品リンクへ」を選択

もしもアフィリエイトの「商品リンク」の図解

もしもアフィリエイト経由で、Amazonや楽天と提携すればこの画面が出てきます!

「商品リンクを作る」をクリック

お目当ての商品名を検索して「商品リンクを作る」をクリック。

もしもアフィリエイトの「商品リンク」の図解

ソースをコピペ

もしもアフィリエイトの「商品リンク」の図解

そこで出てくるソースをコピペして使うと、、

  

こうなります!

商品1商品2
③単なる画像➜Chromecastの画像ファイヤースティックのプレスリリース画像12
④アフィリエイト画像➜

上下ともに同じように見えますが、上段の方は「単なるリンク画像」で報酬は発生しません。

一方、下段の方は「もしもアフィリエイト」で設定した「アフィリエイト画像」。

ここが収益の源です。

Amazonのセール期間中などは、こんな感じでクリックされて、結構な勢いで申し込みにつながります。

「もしもアフィリエイト」成果件数のデータ

商品画像アフィリができる「もしもアフィリエイト」はこちら

 

テーブルで分かりやすい記事を作る方法

最後は、テーブルのセル内を着飾る方法を紹介します。

ビジュアルで表現

例えば「スターランク」。

ビジュアルでアピールできる「スターランク」の有無で、見やすさが劇的に変わりませんか?

商品1商品2
①単なるリンク➜クロームキャストファイヤーTV
②アフィリエイトリンク➜クロームキャストファイヤーTV
③単なる画像➜Chromecastの画像ファイヤースティックのプレスリリース画像12
④アフィリエイト画像➜
スターランク➜

 

「スターランク」の作り方

この「スターランク」は、WordPressのテーマにあらかじめ用意されていることがほとんどです。

「Cocoon」の場合なら、ショートコード「[/]」で「評価スター」のメニューを呼び出せば一瞬で完成!

ショートコードの図解
評価スターの図解

「スターランク」の設定方法

投稿画面では、ショートコード自体はこんな風に表示されます。

[star rate="4" max="5" number="0"]

この場合は「5点満点中の4点」を意味します。

「3点満点中の1.5点」という評価表示にしたければ、

[star rate="1.5" max="3" number="0"]

と数字の部分を変更しましょう。

「1.5」と表示したい場合

最後の「number="0"」の「0」の箇所を「1」にすれば、評価点数をテキスト表示できます。

[star rate="1.5" max="3" number="1"] ➡︎ 1.5

 


 

以上です!

この記事が参考になった方なら、以下の記事もきっと役立つはず!

 

 

その他、以下のメニューでブログを体系的に育てましょう!