皆さん、こんにちは。
もしもドロップシッピングのショップできすぎくんのちょっとした技について
書いてみたいと思います。
自由ページをこれから頑張って使ってみよう
自由ページを使いだしたけれど、どうしたらいいか迷い手が止まってしまう
自由ページって自由なだけに、何を書いていいのか
この空白ページをどうやって埋めればいいのかと、考えたことはあるかと思います。
そっか、素材画像を使えばいいんだ。
そうです。あるものは使いましょう！
そこで素材画像を数枚挿入して、見た目をチェックすると
違和感を感じる時があります。
二つの素材画像の間に隙間があり少し気になる。。どうしたらいいでしょう？
今回は簡単な対処法をご紹介します。
その前に、実際にどのような現象が起こるのか見てみましょう。
これです。
矢印部分に注目。うーん。明らかに違和感のある隙間があります。
ここをCSSを使わずに２つの素材画像を隙間なく表示してねという命令を簡単なHTMLタグでします。
style=”margin: 0px;”
上記のを素材画像のHTMLに加えてみると（全て小文字、前後半角スペースを空けてください）
こうなります。はい。綺麗に繋がりました。
何故こうなるかといいますと自由ボックス内のimgに対しては、隙間を空けましょう、と
ショップできすぎくんが指定しているからなんですね。
《作業の全体の流れ》をざっくり説明します。
- 自由ページを追加する
- 自由ボックスを任意の場所に追加する
- 任意の素材画像をダウンロードし、ショップできすぎくんにアップロードする
- 任意の素材画像を選ぶ
- 画像のHTML編集のボタンを押しコピー
- メモ帳などにペーストしstyle=”margin: 0px;”を入れてコピー
- ショップできすぎ君に戻り自由ボックスのHTML編集で作成したタグをペースト
- 保存し表示確認。隙間が埋まっていることを確認する
こんな感じです。
自由ックスを任意の場所に追加してみましょう。
自由ページを追加する
次に自由ボックスを追加。「見出しあり」でも「見出しなし」の自由ボックスでもOK！
今回は見出しありを選んでみました。
任意の※素材画像をダウンロード
※素材画像は各商品の管理画面にダウンロードボタンがあります。
赤枠の部分です。
また全ての商品に素材画像があるわけではありません。
カメラのアイコンを押す
ショップできすぎくんのにダウンロードした素材画像をアップロードしておきます。
今回は２枚の素材画像を選択、「中央に配置」を選び 「選択画像」を挿入
下記赤枠編部分の「HTML」編集のボタンを押す
下記のようなこんなHTMLがでてきます。HTMLの数字やアルファベッドは皆さんのと
この見本の表示内容は異なりますが気になさらないでください。
これをWindows標準搭載のメモ帳にペースト
（メモ帳機能はパソコンのキーボードの旗マークを押し、Windows アクセサリの中にあります）
のままだと見づらいので、HTMLの中から</p>を見つけてそこにカーソルを置いて
キーボードのエンターキーを押して改行します。そうするとこうなります。
このようにすると見やすくなります
そこでいよいよstyle=”margin: ０px;”を入れます。
まずは、先頭の<p style=”text-align: center”>となっている部分に注目。
先頭の<p style=”text-align: center”>は中央に画像を置いてねという意味なのでここの部分は今回は触れません。
その次の<img から始まる部分にstyle=”margin: ０px;” をいれます。
上部画像内の赤枠のように入れてみてください。
メモ帳のHTMLをすべてコピーして（キーボードのCTRLキーを押しながらAを押して全部選択してから
CTRLキーを押しながらCを押すと楽にコピーができます。）
ショップできすぎ君に戻り自由ボックスのHTML編集欄にコピーしたものをペースト。
こんな感じです。
保存し表示確認。隙間が埋まっていることを確認する。
公開予約をせずとも、表示確認ボタンを押すだけでも確認することができますよ。
自由ページはどんどん素材画像を入れれば、空白ページが埋まる
そんな感覚に襲われることもあるかもしれません。これ、いいアイディアだと思います。
テキストだけでは、圧迫感もありますし。
ただ検索結果で上位を目指したい場合は画像の羅列だけでは
期待できません。しっかりとテキストを書いていきましょう。
商品素材画像によって、画像と画像が切れているように見えても
違和感がない時もあります。その時はこの作業をしなくても大丈夫です。
今回は自由ページに置いた素材画像の途切れる現象をなくす方法をご紹介しました。
