ランシスは5タイプの価格調査・ランキングHTMLを出力 サンプルを確認してみよう!

アマゾン・楽天市場・Yahoo!ショッピングなどの価格調査の結果をHTML出力したり、お好きなジャンルのアイテムを集めてランキングを作ってHTML出力するシステム ランシス(ランキングシステム)を作りました。

ランシスを使えばランキングや価格調査を簡単に作ることができるので、Webページのお供に役立ててください。最近はランキングページが上位表示する傾向にあるようなので、あなたのサイトもランキングを取り入れて上位表示させてくださいね。

もちろん最初の1回目にアフィリエイトIDを設定すれば、リンクはすべてあなたのアフィリエイトリンクになります。(アフィリエイトIDを設定しない場合はランシスのアフィリエイトIDになりますのでご注意ください。)

すでにランシスの使い方が分かっている方はこちら↓のページから使ってみてください。

ランシス ランキング作成ページ

このページでは最初にランシスを使ってどんなものが出力できるのかチェックしていきましょう。

(価格調査やランキングアイテムの記入方法は今後のページで説明していきます。ランシスで作ったものがどのように表示されるのかを確認してください。)

出力するのは5種類のHTMLタグ

それぞれのHTML出力にはサンプル表示がありますので、どのように表示されるのかチェックしながらWebページに貼り付けるHTMLタグを選べます。

5つのレイアウトを出力

以下の5つのHTMLタグが出力されます。HTMLタグをWebページに貼り付けると↓「出力例」のように表示されます。(サイトのCSSによって表示が変わってしまうこともあります。)

表示 説明 出力例
価格調査 商品キーワードをもとにアマゾン・楽天市場・Yahoo!ショッピング・ヤフオク・価格.comから商品を探し、検索結果を価格の安い順に表示します。
価格調査の表示サンプル

価格調査の表示サンプル

シンプル表示(単体) 商品をシンプルにアフィリエイトリンクを表示します。 サンプル トンボ鉛筆
ランキング表示(単体) 編集中の一つのアイテムをランキング表示します。  サンプル トンボ鉛筆
ランキング表示 カテゴリー内のすべてのアイテムをランキング表示します。
ランキング表示

ランキング表示

横スクロール表示 カテゴリー内のすべてのアイテムを仕様を比べやすいように横に並べます。
横スクロール表示

アイテムが多くなって横に長くなるとスクロールバーが表示されて右側に長くなります。

​ランキングリストのHTMLタグ出力

価格調査やランキングアイテムを編集していくと、HTMLタグが出力されるようになります。

具体的には以下のように「貼り付け用HTML」の項目に5個のHTMLタグが出力されます。また、カテゴリーを複数選べるようになっているので、2個以上のカテゴリーを選んだ場合はさらに多くのランキングHTMLが出力されます。

HTMLタグ

ステップ2の価格調査のみ実行した場合は、価格調査HTMLタグのみ表示され、ステップ3のランキングアイテム編集フォームの内容を書いていくとシンプル表示やランキング表示が出力されるようになります。

後ほど詳しく解説していきます。

サンプルで確認する

商品キーワードを入力した価格調査結果や、アイテムを作ったらサンプルがされます。サンプルを確認して、問題なければHTMLタグをコピーしてWebページに貼り付けるという手順になります。

ステップ2の価格調査、ステップ3のランキングアイテム編集フォームを入力していくとサンプルがどんどん表示されます。

価格調査のサンプル

ステップ2の価格調査に商品キーワードを入力して検索すると以下のようにアマゾン・楽天市場・Yahoo!ショッピングなどの商品検索結果が表示されます。

価格調査の表示サンプル

価格調査の表示サンプル

実際のページは↓こちらをクリックすると三菱鉛筆 かきかた鉛筆のサンプルが表示されますのでご確認ください。

価格調査(Sample) 三菱鉛筆 かきかた鉛筆

HTMLタグは以下の場所でコピーできます。サンプルの三菱鉛筆 かきかた鉛筆に実際にアクセスしてご確認ください。

価格調査HTMLタグ 三菱鉛筆 かきかた鉛筆

価格調査(Sample) 三菱鉛筆 かきかた鉛筆

価格調査をするだけで、このような価格調査のHTMLタグを出力することができます。

シンプル表示のサンプル

ステップ3 ランキングアイテム編集フォームのタイトルを記入するとシンプルとランキングが表示されるようになります。

シンプル表示は以下のように商品単体を宣伝するときのHTMLタグです。商品の詳細なスペックや特徴を記載せずに商品リンクを貼り付けたい場合にご利用ください。

サンプル トンボ鉛筆

なお、商品タイトル以外の、Amazonや楽天市場、メーカー、価格などは非表示にもできます。

以下をクリックするとサンプルで作った「三菱鉛筆 かきかた鉛筆」のシンプル表示の表示例に飛びます。

シンプル表示Sample 三菱鉛筆 かきかた鉛筆

シンプル表示のHTMLタグは以下の場所でコピーできます。

シンプル表示 HTMLタグ 三菱鉛筆 かきかた鉛筆

シンプル表示 HTMLタグ 三菱鉛筆 かきかた鉛筆

ランキング表示(単体)のサンプル

単体のアイテムでも商品情報を詳細に記載したい時はこちら↓のレイアウトを使ってみてください。

ランキングではないので、左上のアイコンは順位ではなく、上矢印アイコンにしました。

サンプル トンボ鉛筆

三菱鉛筆 かきかた鉛筆の実際のサンプルを御覧ください。それぞれのサンプルは編集不可になっています。

ランキング表示(単体)Sample 三菱鉛筆 かきかた鉛筆

シンプル表示のHTMLタグは以下の場所でコピーできます。

ランキング表示(単体)HTMLタグ 三菱鉛筆 かきかた鉛筆

ランキング表示(単体)のサンプル

ランキングアイテム一覧のサンプル

カテゴリーの中に2つ以上のアイテムを登録すると「ランキングアイテム一覧」と横スクロールアイテム一覧が表示されるようになります。

鉛筆カテゴリーにいくつかアイテムを登録してみました。↓商品の仕様や特徴・説明文も挿入できるようになっています。またタイトル以外は記入しなくても表示するようにしました。

ランキング表示

三菱鉛筆 かきかた鉛筆の実際のサンプルを御覧ください。テキストエリアをクリックするだけでHTMLタグ全体を選択しますので、あとはコピーしてください。

ランキングアイテム一覧Sample 三菱鉛筆 かきかた鉛筆

シンプル表示のHTMLタグは以下の場所でコピーできます。

ランキングアイテム一覧HTMLタグ 三菱鉛筆 かきかた鉛筆

横スクロールアイテム一覧のサンプル

最後にランキングアイテムを一覧表示させて仕様や価格などを比較するための横スクロールアイテム一覧のサンプルを紹介します。

ランキングアイテム一覧と横スクロールアイテム一覧は「詳細を見る」ボタンでページ内リンクされていますので、1ページの記事の中にセットでお使いください。基本的な想定する使い方としては、アイテムのランキングを紹介しつつ最後にまとめやアイテム比較として、横スクロールアイテム一覧を表示させるのがよさそうです。

ランキングの順位ではなく、アイコン表示も可能で、非表示にすると順位もアイコンも表示しなくなります。

横スクロール表示

三菱鉛筆 かきかた鉛筆の実際のサンプルを御覧ください。

横スクロールアイテム一覧Sample 三菱鉛筆 かきかた鉛筆

シンプル表示のHTMLタグは以下の場所でコピーできます。

横スクロールアイテム一覧HTMLタグ 三菱鉛筆 かきかた鉛筆

レスポンシブ表示

Webページのスタイルを指定するCSS(カスケーディングスタイルシート)は外部CSSファイル、HTML内部に直接記入するCSSの両方に対応しています。

ステップ2の価格調査の右下のほうにCSS設定がありますので、こちらで外部CSSかHTML内部直接記入か指定できます。(後ほど詳しく説明していきます。)

CSS

レイアウトはCSSでレスポンシブに対応していて↓スマホで表示すると以下のように表示されます。

ただし、ランキング作成時にランシスのサイト自体はパソコンで作業してください。

タブレットやスマホでも表示できないこともないのですが、右メニューの価格調査やアフィリエイトID入力画面がかぶってしまって作業できないかと思います。

スペック(仕様)や特徴・説明はオリジナルなテキストを書こう!

ランキング作成は結構手間がかかりますが、その手間をなるべく少なくして手早く作成できるようにしたシステムがランシスです。まだ手間を減らせそうな箇所はありますので次第にアップデートしていきます。(メンドウな部分がありましたらコメントから連絡してくださいね。)

手間を減らすといっても、商品の特徴や説明をオリジナルな文にしないと、ただ商品を並べているだけになってしまうので、オリジナリティを出すためになるべく自分なりの文章を書くようにするとSEO的にもよさそうです。

 

ランシスは個人的に使っていたランキングシステムをブロガーの方やWeb製作者の方にも使えるように改造して公開しました。

至らない点も多々あると思いますので、もし不具合や苦情がある場合は以下のコメントなどからご連絡いただけると喜びますm(__)m

今後ともよろしくお願いいたします!

コメント

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