【初心者向け】NOMAD CODEのCVボックスをCocoonに導入する方法

nomad code ライフ

こんにちは、マルです。

好きなテキスト

商品名・タイトル

ポイントポイント

ポイントポイント

ポイントポイント

5

スコア名

6

スコア名

7

スコア名

8

スコア名

こんな感じで簡単に各ステータスのレビューを行えるNOMAD CODEのCVボックス。
レビュー系のブロガーとしては是非活用したいということで僕も早速導入しました。

ちなみに僕も初心者ブロガーですが、NOMAD CODEのCVボックスを使えばかなりハイクオリティなレビュー記事を作り上げれそうです。

ただ、導入の際に少しつまずいた部分があったのでそこを踏まえてCocoonに導入する方法を紹介します。

スポンサーリンク

導入方法

まずNOMAD CODEのホームページにアクセスします。

そしたら右上にあるWPデザインをクリック。

次に開かれたタグの中にcocoonがあり、その中にCVボックスがあるのでそこをクリック。

そうするとこのようなページに行きます。
まず行わなければならないのがアイコンの設定です。(最初の一回だけ設定が必要)

方法は「アイコンの設定が必要です。設定はこちら」
と表示されているのでクリック。

そうしたらこのようなページに行きます。

下にスクロールするとこの画面が表示されます。
この中の赤丸の部分をコピーしてください。

そうしたらワードプレスを開きます。

Cocoon設定をクリック。

アクセス解析、認証をクリック。

下にスクロールするとヘッド用コードがあるのでここに先ほどコピーしたものを貼り付け。

そして保存ボタンをを押せばOKです。

ただ403 Forbiddenと表示される可能性があります。これはWAF(ウェブアプリケーションファイアウォール)によりブロックされているからだそうです。
僕もブロックされたので困りましたが、Cocoon開発者のわいひらさんがすでに回答を出していてくれました。こちらに記事を載せておきますのでブロックされた方はどうぞ。

ヘッド用コード内にリンクが貼れたらNOMAD CODEに戻りCVボックスをクリックしたときの画面に戻ります。

この画面でボックスのスタイルとカラーを選択できます。
スタイルとカラーが決まったらコードを表示をクリック。

そうするとHTMLとCSSのコードが表示されます。
コピーマークを押すとコピーできます。
まずはCSSをコピーします。

そうしたらワードプレスのカスタマイズ画面にある追加CSSに貼り付けます。

次にHTMLをコピーします。

コピーしたら、書きたい記事のページを開きブロックの検索でカスタムHTMLを選択し、貼り付けます。

プレビューをすれば

好きなテキスト

商品名・タイトル

ポイントポイント

ポイントポイント

ポイントポイント

5

スコア名

6

スコア名

7

スコア名

8

スコア名

このように表示されるはずです。(色は違うと思いますが)

あとは自分好みにカスタマイズするだけです。

カスタマイズ方法はNOMAD CODEに解説があるのでそちらを参考にどうぞ。

赤丸部分をクリックすれば解説が開きます。

ライフ
スポンサーリンク
marublog

コメント

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