ショップハンター

2014.11.22

[やってみよう] フリーページで商品リストをつくろう

テーマ：楽天ブログの活用法(10)

カテゴリ：当ブログオリジナル

　楽天ブログがモバイル対応に仕様変更されてから、従来の記事やフリーページの体裁がめちゃくちゃになって焦った方も多いことと思います。

　私もその一人で、テーブルを使用していたページは悲惨な状況でした。
　既存のページ数としてはそれほど多くはなかったのですが、何せ文字数が多かったため、こりゃ訪問者は 1秒でホイ、サイナラ状態だったのではないかと思います。

　そのような経緯をふまえ、ページをリキッドレイアウトにすることによって、タブレット PC の縦置き、横置きにも対応させることにしました（もう半年くらい前の話ですが ^_^:）。

フリーページをレスポンシブ風味に変更

　何のこっちゃ、と思われる方もいらっしゃるかもしれませんので、百聞は一見にしかずということで以下の画像をご覧ください。

【縦置き】

ランチジャー一覧縦

　こちらは、当方のブログで比較的アクセスの多いページの一つ、保温ランチジャー比較表です。

保温ランチジャー比較表

　一部文字数の関係で強制改行が入っているところも見られますが、縦置きでほぼすっきりとリスト化されていることがおわかりいただけるでしょう。
　このページを横置きで閲覧すると、このようになります。

【横置き】

ランチジャー一覧横

　いかがでしょうか。
　横置きにすると、段組みが左右でバランス良く最適化され、余白が活かされていますね。

商品リスト用テンプレート配布

　今回はシンプルな商品一覧用テンプレートの配布になります。

【縦置き】

テンプレート縦

【横置き】

　このようなシンプルな構成ですが、ブログ記事で紹介してきた作品や商品が増えてきた方や、アフィリエイトの商品リストを作りたい方には参考にしていただけるのではないかと思います。

商品リストテンプレート[シンプル]

おまけ話

　楽天ブログのモバイル対応の仕様変更で散々な目にあいましたが、この際ということでソースを自動化するエディタを自作したため、かえって更新が楽になりました。
　怪我の功名というやつだったのかもしれません。

自作の楽天ブログツール

　API で商品情報を取得してアフィリエイト用リストページをごっそり自動生成させる機能をつけたり、バックアップを含むメンテナンス機能もつけてみたりしましたが……。
　こういったズボラツールを配布すると、真面目に記事を書かない迷惑アフィリエイターに使われて終わるのが目に見えていますし、バックアップツールに関しては、「記事にしてもいいかな？」と楽天ブログスタッフに尋ねたところ、「だめとも！」と返事が返ってきたため、非公開のまま永久α版で終わるという、結局出来損ないのツールでございます。

　トホホ。

（まずないとは思いますが、ツール欲しいという方がいらっしゃっても、後々面倒なので配布なしということでご容赦ください）