SWELLの始め方ガイド|これからSWELLを使い始める方はこちら→SWELLの始め方ガイド→クリックタップ

ポチップのインラインボタン機能|Amazon、楽天のボタンリンク付き商品一覧表を作る!

ポチップのインラインボタン機能|Amazon、楽天のボタンリンク付き商品一覧表を作る!
  • URLをコピーしました!

Pochipp(ポチップ)のインラインボタン機能について紹介します。

この記事の内容
  • インラインボタン機能について
  • インラインボタンの設定と使い方
  • インラインボタン機能を活用して商品などの一覧表を作ってみる
インラインボタン機能でできること
ポチップのインラインボタンリンク

画像のようにテーブルや文章の中などにAmazonや楽天など、ポチップで管理している商品リンクを簡単に挿入できる…!

ボタンリンク付きの一覧表を作ってみる
ポチップのインラインボタン機能を活用した商品一覧表
ポチップの機能で作った一覧表

※詳しくは「ボタンリンク付きの商品一覧表を作ってみる」で解説

SWELLとポチップの機能を組み合わせた商品一覧表-1
SWELLの機能と組み合わせて作った一覧表

※詳しくは「SWELLの機能と組み合わせて商品一覧表をアレンジする」で解説

さとしん

おすすめ〇〇選やランキング記事などのまとめとして一覧表があると便利そうだなと思って作ってみました…!


インラインボタン機能はポチップのv.1.7.0以上で使えます。

インラインボタン機能は無料版のポチップでも使えますが、更に便利機能を拡張したい方は有料版のPochipp Proもおすすめです。

>>Pochipp Pro(ポチッププロ)の機能がとても便利!導入手順と設定方法も紹介!

目次

ポチップのインラインボタン機能でできること

ポチップに実装されたインラインボタン機能では、文章の途中やテーブルの中など、記事の編集画面の中で簡単にポチップの商品リンクボタンを設置できます。

ポチップの通常の商品リンクとインラインボタンで作成したリンクを比較すると以下のようなイメージです。

通常のポチップリンク
通常のリンク
ポチップのインラインボタンリンク
インラインボタン

インラインボタン機能を活用すると、右側の画像のようにテーブルの中にもボタンリンクを設置できます。

インラインボタン機能を活用すると、下の画像のようにテーブルの中にもボタンリンクを設置できます。

現在は、インラインボタン機能でPochipp Proの計測機能は使えません。後日アップデートで対応を検討されているそうです。

お知らせ…!

2022/5/14のアップデートで、インラインボタン機能でもPochipp Proの計測機能が使えるようになりました!

さとしん

インラインボタン機能をうまく活用すると商品紹介の方法も幅が広がりそうです…!

インラインボタン機能の設定方法と使い方

ポチップのインラインボタンの使い方について以下の2点紹介していきます。

  1. インラインボタンのデザイン設定
  2. ボタンリンクをエディター(編集画面)上で使う方法

ではさっそく、それぞれの設定と使い方を紹介していきます。

ボタンデザインの設定方法

インラインボタンのデザインは、管理画面で設定できます。

まず、インラインボタンのカラーの設定方法は以下のとおりです。

WordPress管理画面→「ポチップ設定」→「基本設定」→「各ボタンの色」

インラインボタンのカラー設定

カラー以外のボタンデザインについては以下で設定できます。

WordPress管理画面→「ポチップ管理」→「基本設定」→「インラインボタンのデザイン設定」

インラインボタンのデザイン設定

「インラインボタンのデザイン設定」で設定できる項目は3点です。

  1. ボタンスタイル
  2. ボタンの丸み
  3. ボタン幅

それぞれお好みで設定しましょう。

さとしん

サイトの雰囲気に合わせると良さそうですね…!

各項目を簡単に紹介しておきます。

ボタンスタイル

選択できるボタンのスタイルは以下の2種類です。

  • 標準
  • アウトライン
ポチップのインラインボタンのデザイン-1
「標準」スタイル
ポチップのインラインボタンのデザイン-2
「アウトライン」スタイル

ボタンの丸み

ボタンの形状も2種類から選択できます。

  • 四角
  • 丸め
ポチップのインラインボタンのデザイン-1
四角ボタン
ポチップのインラインボタンのデザイン-3
丸めボタン

ボタン幅

インラインボタンの幅は3種類から選択できるようになっています。

  • テキストに応じる
  • 固定幅
  • 固定幅 (幅広)
ポチップのインラインボタンのデザイン-1
テキストに応じる
ポチップのインラインボタンのデザイン-4
固定幅
ポチップのインラインボタンのデザイン-5
固定幅 (幅広)

インラインボタンを記事に挿入する手順

設定したボタンを記事内に挿入する方法を紹介します。

以下の手順です。

STEP
ボタンを挿入したい場所で、ブロックツールバーの「インラインボタン」をクリック
ポチップのインラインボタンの使い方-1
STEP
リンクを設置したい商品を選択
ポチップのインラインボタンの使い方-2
STEP
リンクを設置したいショップを選択
ポチップのインラインボタンの使い方-3

この手順でインラインのボタンリンクが自由に挿入できます。

ポチップのインラインボタンの使い方-4

次は、実際にインラインボタン機能を使って実際のコンテンツでも使えそうな表を作ってみたいと思います。

ボタンリンク付きの商品一覧表を作ってみる

ポチップのインラインボタン機能を活用して、以下のようなボタンリンク付きの商品一覧表を作成してみましょう。

ポチップのインラインボタン機能を活用した商品一覧表-1

このテーブルはどのWordPressテーマでも作れます。今回の例では「Arkhe」テーマを使っています。

以下のステップで作成していきます。

  1. 表の全体のレイアウトの作成
  2. 各ショップのボタンリンクの挿入

STEP1:表の全体レイアウトを作る

まずは、エディター上でテーブルブロックを挿入して表の全体像を整えていきましょう。

今回は以下画像のような表を作ってみました。

ポチップのインラインボタン機能を活用した商品一覧表-2

テーブルがうまく作れない方は「WordPressのブロックエディターで表を作る|テーブルブロックの使い方」を参考にしてください。

STEP2:各ショップのボタンリンクの挿入

表がある程度形になったら、ポチップの機能でAmazon、楽天、Yahoo!などのリンクをインラインボタン機能で作っていきましょう。

以下の手順で作っていきます。

STEP
表の右にボタンリンクを設置するための列を追加する
ポチップのインラインボタン機能を活用した商品一覧表-3
STEP
追加した列にお好みのショップのインラインボタンを挿入していく

インラインボタンの挿入方法は記事前半の「インラインボタンを記事に挿入する手順」を参考にしてください。

STEP
必要な数のインラインボタンを挿入したら完成!
ポチップのインラインボタン機能を活用した商品一覧表-4

実際の投稿した記事を見ると以下のようにボタンリンク付きの商品一覧表になっているはずです。

ポチップのインラインボタン機能を活用した商品一覧表-1
さとしん

簡単に複数項目をまとめたボタンリンク付きの一覧表が作れました…!

【おまけ】SWELLの機能と組み合わせて商品一覧表をアレンジする

ポチップユーザーさんの中には、テーマを使っている方が多い印象です。

さとしん

僕の周りもSWELLを使っているブロガーさんがとても多いです…!

そこで今回は、SWELLの独自機能を使って、先ほど作った商品一覧表を以下のようにアレンジしてみました。

SWELLとポチップの機能を組み合わせた商品一覧表-1

主なアレンジした内容は以下のとおりです。

  • おすすめ度を★マークで表現
  • 表のセル背景に記号アイコンを挿入
ちなみに

上記以外にもヘッダーのカラーや左の列の強調表示など細かいところもSWELLの独自機能でアレンジしています。

SWELLのテーブルブロックの機能については以下の記事を見てください。

では、アレンジした内容をそれぞれ紹介します。

おすすめ度を★マークで表現

SWELLでは、ショートコードを入力することでスター評価を簡単に作れます。

以下の手順で表に評価用のスターを入力しましょう。

STEP
評価用スターを入力したいセルを選択
STEP
「ショートコード」から「評価用スター」を選択
SWELLとポチップの機能を組み合わせた商品一覧表-2
STEP
評価を入力する
SWELLとポチップの機能を組み合わせた商品一覧表-3

review_stars 4.5/5の数字の部分を変えると評価を変えることができます。

もう少し詳しい説明は「SWELLのブロックツールバーの便利機能!余白設定やスマホとPCで表示の切り替えも可能!」を参考にしてください。

上記の手順が完了すると、以下のように評価用のスターが表示された表になります。

SWELLとポチップの機能を組み合わせた商品一覧表-4

表のセル背景に記号アイコンを挿入

SWELLはテーブルブロックの機能でセルの背景に記号アイコンを挿入できます。

以下の手順でセルの背景に記号アイコンを挿入してみます。

STEP
記号アイコンを入力したいセルを選択
STEP
「セル背景」をクリックして、「アイコン」タブをクリックしお好みの設定を選択
SWELLとポチップの機能を組み合わせた商品一覧表-5

上記の手順を、背景にアイコンを入力したい全てのセルで繰り返せばOKです。

ここまでの手順で、以下のような商品一覧表を作成することができました。

SWELLとポチップの機能を組み合わせた商品一覧表-1
さとしん

おすすめ〇選記事や、ランキング記事のまとめとして一覧表を作ると効果的かもしれません…!

ASPの広告をテーブルの中にボタンリンクで挿入する

複数項目を比較する表でASPの広告をボタンリンクで掲載したい場合は、SWELLのテーブル機能と広告タグ機能を使う方法もおすすめです。

以下のようにASPの広告を改変せずに、クリック計測できるボタンリンク付きの表を作ることができます。

SWELLのテーブルブロックで比較表を作る手順-1

SWELLのインラインボタン機能で商品比較表を作る方法は以下の記事で紹介しています。

ポチップのインラインボタン機能まとめ

ポチップのインラインボタン機能について紹介しました。

インラインボタン機能では、エディター内(編集画面)で簡単にポチップのボタンリンクを呼び出すことができます。

インラインボタン機能でできること
ポチップのインラインボタンリンク

画像のようにテーブルや文章の中などにAmazonや楽天など、ポチップで管理している商品リンクを簡単に挿入できる…!

また、ポチップのインラインボタン機能を活用して、ランキング記事などに合いそうな商品一覧表の作り方も紹介したので参考にしてもらえると嬉しいです。

記事内で紹介したボタンリンク付きの一覧表
ポチップのインラインボタン機能を活用した商品一覧表
ポチップの機能で作った一覧表

※詳しくは「ボタンリンク付きの商品一覧表を作ってみる」で解説

SWELLとポチップの機能を組み合わせた商品一覧表-1
SWELLの機能と組み合わせて作った一覧表

※詳しくは「SWELLの機能と組み合わせて商品一覧表をアレンジする」で解説

Amazon、楽天、Yahoo!など物販がメインのブロガーさんもそうではない方も、ポチップの便利機能を活用して素敵なコンテンツを作っていきましょう。

最後まで読んでいただきありがとうございました。


ポチップの機能を最大限に活用するならがおすすめ!

ポチップのインラインボタン機能|Amazon、楽天のボタンリンク付き商品一覧表を作る!

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
閉じる