NOMAD CODEでCVボックス(レビュー)を作る方法【カンタン】

PC_HowTo

曇り止めはこれひとつでOK!

アンチフォグ

簡単!塗って拭くだけ!

1日1回でOK!

かすかに柑橘系の香り

使い切るまで週4使用で
1本約2か月(目安)

価格:670~850円

10

使用感

8

価格

10

持続性

8

香り

どもども!”がらし”です!


上にあるようなCVボックス(レビューボックス)
商品紹介をするブログ記事で見かけることがあるかと思います

このCVボックス、実はとても簡単に作れるんです

CVボックスを作れるようになると商品紹介の記事をかんたんに見栄えよく書けるようになります


【NOMAD CODE】というサービスを利用します。(無料で使えます!)

今回は画像で説明していくので
「レビューボックスを作りたい」という方は参考までにご覧ください



まずは「NOMAD CODE」を開いてください。(←「NOMAD CODE」の文字をクリック)


画面右上の「WPデザイン」をクリックします


自分が使っているテーマの「CVボックス」をクリック。

僕はStinger8を使用しているので「その他」の「CVボックス」をクリックします。


この画面の右側のようなレビューボックスを作れます。

大きいほうがPC・小さいほうがスマホでの表示になります。

ちなみに画面したにある「Color」の色をクリックするとボックスの色が変わります。
お好きな色でどうぞ。

続いて画面下にある「コードを表示」をクリック。

表示された右側の「CSS」の右下の「COPY」をクリック

表示されたウィンドウの「OK」を押します。

これでコピーができました。

これをWordPressに貼り付けます。

WordPress管理画面を開き「外観」→「テーマ」→「カスタマイズ」(有効にしているテーマのカスタマイズ)

左下の「追加CSS」をクリック

画面左「1」の横に先ほどコピーしたCSSのコードを貼り付けます

こんな感じになります。

上の「公開」をクリックします。

NOMAD CODE に戻り今度は「HTML」の右下「COPY」をクリックし「OK」をクリック。

WordPressの「投稿」→「新規追加」

ブロックの選択で「カスタムHTML」をクリック

「HTML」をクリック

先ほどコピーしたHTMLのコードを貼り付けます。

ただの文字列が並んでいるだけですがプレビューを見るとレビューボックスの形がすでにできています。

ここに紹介したい商品の画像や文章を入れていきます。

先ほどコピーしたコード(文字列)の中を見ていきます。

「好きなテキスト」「ポイント」「商品名・タイトル」

を紹介したい商品の名前やオススメのポイントに書き換えていきます。

次に商品の画像を入れていきます。

”ここに商品画像のURL”という部分を画像のURLに書き換えます。

画像のURLは簡単に知ることができます。

まずはWordPressの今書いている記事に画像をアップロードしましょう。

画像を右クリックし「画像アドレスをコピー」します。

これで画像のURLをゲットできたので先ほどの
”ここに商品画像のURL” に貼り付けます。

(コピーしたら画像は消してOKです)

次に評価欄を書いていきます。

「スコア名」を好きな評価にします。

使いやすさ・価格など自分が評価したい項目にしてください

そして次の画像の数字を自分が評価したい数値にしてください。
画像の青い部分の数字です。

次に評価に合わせてグラフのメーターを変えていきます。
書き画像の丸いオレンジ色の部分です。

仮に評価が5だったら下記の「p50」でOKです(下記の青い部分)
もし評価が8であれば「p80」に書き換えてください。

注意点として評価が1~4の場合、p50の左側、「over50」を「over0」に書き換えてください。そうしないとサークル(メーター)の表示が崩れてしまいます。

あとは「レビュー記事へ」「公式サイトへ」のURLを設定すればOKです。

下記の”ここにURL”をレビュー記事のURLに、その次の”ここにURL”を公式サイトのURLに書き換えればOKです。

ちなみに僕は「公式サイト」を「商品サイト」に書き換えて ”ここにURL” に商品のアフィリエイトリンクを貼り付けています

ここまで入力するとこんな状態になります。

このレビューボックスの後に詳細や感想を書いていったり
感想を書いた最後にまとめとして載せるのもアリですね。

レビュー記事を書くときにぜひ使っていただければと思います。

以上です!

コメント

タイトルとURLをコピーしました