【研究所公式】ショップできすぎくんのサイドバーで画像にリンクを貼る方法

2017年8月23日

穏やか暮らし研究所

URLをコピーしました！

こんにちは、どろっぷしっぴんぐ研究所の奥成大輔（オクナリダイスケ）です。

どろっぷしっぴんぐ研究所では、研究生の9月生募集を開始しました。
大好評の研究生制度、いま受講数が大幅に伸びています。

▼ 9/1開講！ドロップシッピング3ヶ月集中講座『研究生制度』

特に通学コースは空きが極端に少ないので、申し込める今がチャンスです。
先着順となりますので受講を希望される方はお早めにお申込みください。

さて、今週の執筆者はショップできすぎくんカスタマイズでおなじみの岡田祐子さんです。
今週もショップできすぎくんカスタマイズの話題で、ショップできすぎくんのサイドバー設定についてです。

今回も岡田さんがサンプルページも用意してくれました。
参考にして楽しみながら試してみてください。

では、今週もお楽しみください。

ショップできすぎくんのサイドバーで画像にリンクを貼る方法

皆さま、こんばんは！

岡田です。

今回はショップできすぎくんのサイドバー設定についてお話します。

ショップできすぎくんではPCで表示の際、右側か左側にサイドバーを表示させることができます。

スマホやタブレットで表示させたときは、本文の下に表示されます。

サイドバーの役割

一般的にサイドバーの内容は、ショップ内の全ページに表示されます。

ショップ内ページへのナビゲーション、お客様へのインフォメーションのほかにも、

特におすすめしたい商品詳細ページへのリンクなどを設定すれば、

お客様の目に止まる機会が増え、そのページへの誘導が期待できます。

目を引く画像を使えば、より効果的だと考えられます。

ショップできすぎくんのサイドバーにバナー画像を指定してみたら

サイドバーの編集機能では、「画像挿入」「自由ボックス」を使えば、画像を指定することができます。

その結果、「画像挿入」では画像の上下に隙間が開き、「自由ボックス」では隙間なく並ぶことがわかりました。

これをどうにか見やすくできないか、工夫してみたので紹介します。

解説ページを作成しましたので、こちらを参考にしてください。

自由ボックスを利用し画像を指定する

自由ボックスにて、ショップできすぎくんの画像挿入機能を使い、画像を挿入します。

その際、配置は「中央」サイズ指定は「指定なし（原寸）」を選択すると良いでしょう。

指定の方法や書き出されたHTMLはこちらの解説ページを参照ください。

CSSで画像の下に隙間を開ける

書き出されたHTMLのタグに指定されているCSSにmargin指定を加えます。

見本のページでは、5pxの隙間をあけました。

記述したHTML+CSSは以下のとおり

画像挿入で気をつけたいこと

自由ボックスにて、画像を挿入する際、配置を「左に配置」「右に配置」を選択すると、

スマホ・タブレットなど表示画面の幅によっては、画像が横並びになってしまうことがあります。

画像を指定する時には「中央に配置」を選択しましょう。

まとめ

商品画像をつかって商品詳細ページへリンクとしてや

系列店へのリンク、ブログへのリンクなど、ショップ外への誘導に

バナー画像を使ってみるのも良いのではないでしょうか。

隙間は、画像の大きさやデザインによってバランスよく見えるよう、

調整することをおすすめします。

———————————————————–
【今週の執筆者】岡田祐子

（プロフィール）
有限会社エヌツーエヌコミュニケーション取締役。
Webプログラマとして、美術館、科学館、大学、一般企業等のWebサイト制作に従事。
生きたSEOを学ぶべく、もしもドロップシッピングに登録。もしも大学ステップアップコース18期生受講。
ショップできすぎくんをもっと自由に使いこなしたいと工夫を重ねつつ、Webサイト制作の経験と技術を生かした、「ショップできすぎくんのカスタマイズ方法」「画像作成のコツ」「html、cssの記述の仕方」などを、ブログや講座を通じ発信しています。

□ホームページ制作｜エヌツーエヌコミュニケーション

□ぐるめ通販トライアルのブログ
———————————————————–

それでは、次号もお楽しみに。

※この記事は2017年8月17日に配信した『どろっぷしっぴんぐ研究所公式メルマガ（無料）』
の一部を修正、改訂して掲載しています。

メルマガのご登録はこちら