ライフハック

簡単!NOMAD CODEのカッコいいレビューボックスの使い方

たお

ブログでレビュー記事を書く際に、かっこいいテンプレートはないかな?

本記事では、このような疑問に答えていきます。

本記事の内容

今回は、WordPressでAFFINGER5 WINGをお使いの方に向けて、ブログでレビュー記事を書くときに使えるかっこいいテンプレート、NOMAD CODEのレビューボックスの使い方を解説します。

NOMAD CODEとは、WordPressやはてなブログなど向けのブログデザインやテンプレートを配布しているサイトです。

その中でも、下記の様な今回はレビューボックスを使ってみます。

出典:NOMAD CODE

というのも、筆者も下記の記事を書くときに活用してみたのですが、要点がまとまって非常に便利だったからです。

そこで、今回はNOMAD CODEのレビューボックスの使い方を解説します。

本記事の信頼性

本記事は、筆者が実際にNOMAD CODEのレビューボックスを使って、記事を投稿した経験に基づいて執筆しています。

事前準備

今回は、導入の簡単な「レビューボックス(アイコンなし)」の使い方を解説していきます。

前提として、WordPressでAFFINGER5を使っている方を対象としています。

手順①WordPressへログイン

WordPressの管理画面にログインし、外観→カスタマイズをクリックします。

手順②追加CSSを選択

一番下にある追加CSSをクリックします。

手順③好きなデザインを選択

先ほどの追加CSSのページを開いたままにしておきます。

新しくタブを開き、NOMAD CODEのレビューボックスのページへアクセスし、アイコンなしをクリックします。

この中から、好きなデザインを決めます。

今回は、「レビューボックス(アイコンなし)」を利用します。

手順④色の変更

COLORから好きな色を選択します。今回は青を選んでみました。

手順⑤CSSの表示

続いて、COLORの下にある「コードを表示」をクリックします。

すると、コードが展開されますので、CSSの方をコピーします。

確認のポップアップが表示されますので、OKをクリックします。

手順⑥CSSの追加

先ほど開いた「追加CSS」の一番下へ、コピーしたCSSを貼り付けます。

貼り付け終わったら、「公開」をクリックします。

記事中への挿入方法

手順①カスタムHTMLブロックを追加

ブロックエディタで「+」をクリックし、カスタムHTMLをクリックします。

出てこない場合は、ポップアップ上部の「ブロックの検索」からカスタムHTMLを検索してください。

手順②HTMLコードの貼り付け

先ほど選んだデザインより、今度はHTMLコードをコピーします。

このコードをカスタムHTMLへ貼り付けます。

手順③HTMLコードの編集

HTMLコードを、コンテンツに合わせて編集します。

ソースコードと実際の見え方は、下記イラストを参考にしてください。

手順④プレビューと表示確認

編集が終わったら、プレビューを行い、思った通りの表示になっているかを確認します。

↓例えばこんな感じです。

Yahoo!占い

個別運勢

総合運:100点満点

恋愛運:5点満点

金運:5点満点

仕事運:5点満点

9

信頼性

7

見やすさ

10

更新の早さ

-ライフハック

© 2021 たおさんのMyanmar Life