こんにちは、どろっぷしっぴんぐ研究所の奥成大輔（オクナリダイスケ）です。
今週はWordPressとショップできすぎくんカスタマイズでおなじみの岡田祐子さんです。
今回は人気のショップできすぎくんカスタマイズで、横２列の商品紹介パターンを実現する方法です。
では、今週もお楽しみください。
ショップできすぎくんで横２列の商品紹介パターンにカスタマイズする方法
皆さま、こんにちは！
岡田です。
久しぶりにショップできすぎくんのカスタマイズに挑戦しました。
今回は、横２列の商品紹介パターンです。もちろん商品詳細ページへのリンク付きです。
ショップできすぎくんでは、自動的にできる商品一覧ページでは、商品画像・商品名・販売価格が一つのブロックとして「横５列」に並んでリスト表示されます。
ドラック＆ドロップで要素を追加機能では、「横５列」か「横４列」で同様のリスト表示を作ることができますが、「横２列」はありません。
そこで、以前から皆さまにも手軽にご利用いただけるような、横２列パターンを作りたいと思いつつ、なかなか着手できなかったのですが、今回やっと出来上がりましたのでご紹介します。
詳しくはこちらのサンプルページを見てください。
レスポンシブ対応
横並びで表示させる時に考えなくてはならないのは、タブレットやスマートフォンで見た時に、どう変形させるかです。
ショップできすぎくんでは、「横５列」でも「横４列」でも、「左側に画像、右側に商品名と販売価格が上下に並ぶ」横並び型に変形します。
今回紹介する横２列の商品紹介パターンでは、次の３タイプに変形するパターンを作りました。
「横並び型」（ショップできすぎくんの標準型）
「縦１列型」
「横２列型」
問題点
この横２列の商品紹介パターンでは、以下の問題点があり、初心者の方にはちょっとハードルが高いかもしれません。
（１）CSSをアップロードするサーバーが必要
レスポンシブ対応させるために、CSSの詳細な設定が必要になります。
そのためCSSファイルをご自身で用意したサーバーにアップロードする必要があります。
（２）HTMLコードを直接編集
ショップできすぎくんの文字サイズや色、画像の挿入などが簡単にできるエディタ機能を使うと、必要なコードが書き換えられる可能性が高いです。
そのため、HTMLコードの指定の箇所に、リンク先URL、使用する画像のURL、商品名、価格を直接入力しなければなりません。
慣れないと、必要なテキストを削除してしまったりすることがあるでしょう。
メモ帳などのテキストエディタで編集し、それをショップできすぎくん側にコピー＆ペーストすると作業がしやすいと思います。
どうぞ気をつけて編集してください。
まとめ
欲張って３タイプに挑戦したため、使い難くなってしまったかなと、反省しています。
もっと初心者の方にも簡単に利用できるよう改良したら、またおしらせしますね。
読者限定プレゼント
必要なCSSファイルを読者の方にプレゼントいたします。
5月末日までにダウンロードください。
———————————————————–
【今週の執筆者】岡田祐子
（プロフィール）
有限会社エヌツーエヌコミュニケーション取締役。
Webプログラマとして、美術館、科学館、大学、一般企業等のWebサイト制作に従事。
生きたSEOを学ぶべく、もしもドロップシッピングに登録。もしも大学ステップアップコース18期生受講。
ショップできすぎくんをもっと自由に使いこなしたいと工夫を重ねつつ、Webサイト制作の経験と技術を生かした、「ショップできすぎくんのカスタマイズ方法」「画像作成のコツ」「html、cssの記述の仕方」などを、ブログや講座を通じ発信しています。
□ホームページ制作｜エヌツーエヌコミュニケーション
□ぐるめ通販トライアルのブログ
———————————————————–
※この記事は2019年5月9日に配信した『どろっぷしっぴんぐ研究所 公式メルマガ（無料）』の一部を修正、改訂して掲載しています。メルマガのご登録はこちら
