イージーマイショップにNP後払いのバナーを設置してみる

シェアしてもらえると頑張れます(/・ω・)/

np104

おはにちばんは(・ω・)ノ

バナーって旗の事だったんですね(つω`*)

だからアイキャッチ画像は旗です(+・`ω・)b

さて、

私のお店が無事にNP後払いの審査に通って、

設定も済んで、NP後払いを使えるようになりました!

NP後払いに申し込むことを決めました!

NP後払いの審査に通りましたー!

NP後払いをイージーマイショップに導入する方法

でもNPのマニュアルの「推奨設定」っていうところに、

ショップページにバナーを設置しよう!!っていう項目があるんです(・ω・)ノ

だから今回はイージーマイショップにバナーを設置する方法を書きました。

カートページとか、お買い物ガイドページにもバナーを貼ったけど、あれとは違う、お店のトップページとかにバナーを設置する!っていう内容です(*´ω`*)

※このバナーは設置しなくてもNP後払いを使うことはできます!

広告

マニュアルを見てみる

マニュアルページを開くと、こんなことが書いてあるページがあります。

np020np019

ふむふむ。

モ~ちゃん牧場みたいにバナーを設置すればいいんですね!

確かにこういうバナーがあった方がお店っぽい感じがするし、

早速やってみようと思います(^ω^)ノ

バナーを設置する方法

バナーを選ぶ

さっきのマニュアルページに、

「推奨設定用バナーはこちら▶」

っていうリンクがあるからぽちっとしてみます。

すると、

np021
np022

こんな感じでバナーがいっぱい表示されます。

右側の黄色い所の「・下記番号をクリックすると色違いが表示されます」っていうところにある、「S-1-2」とか「S-1-3」をクリックしたら、

np023 こんな感じで色違いが表示されます。

それらの中から自分が気に入ったのをお店に設置すればいいんです(^ω^)b

今回は、

np024

この茶色い文字と星のマークが可愛い「P-3-2」を使って説明しますね♪

イージーマイショップで設定する

バナーを決めたらイージーマイショップの管理画面にログインします。

np026

ログイン出来たら、「拡張設定」の「デザイン設定」をぽち。

np054

レイアウトっていうところをぽち。

np027

するとこんな画面になります。

np028

右側にある赤い「未使用パーツ」ってところの「新規作成」をぽち。

※ここに並んでる内容は人によって違います(・ω・)ノ

np029

こんな画面が出てきます。

「ヘッダーメニュー」ってところをぽちっと。

np030

色々選べるから、「フリー」を選択します。

私は「フリー」以外の使い方は分かりません!(●´ω`●)どやぁ

np031

ちゃんと選択出来たら「OK」をぽち。

np032

今度は少し大きい画面が出てきました(・ω・)ノ

ここにバナーを表示するように書けば、

バナーを設置することができます(^ω^)

HTML・・・。

バナーを表示するように書くのは、HTMLなんです。

私が苦手なやつです。

でもやってみたら簡単だったから、

私の真似をしてもらえれば簡単にできるはずです(+・`ω・)b

np033

まずは「パーツ名」を分かりやすいのにしましょう(・ω・)ノ

自分にしか見えない名前だから好きな名前でいいですよー(^ω^)

私は「NPバナー」にしました!

np034

「パーツ名」が書けたら、「HTMLモードに切り替える」をぽち。

HTMLなんて書ける自信ないけど、ぽちっとしましょう(つω`*)

np035

するとシンプルな画面になりました。

ここにHTMLを書けばいいんです。

HTMLを書けば・・・。

※NPのマニュアルには一応、バナーを設置するためのHTMLが書いてあります。

でも使い方がややこしいから手っ取り早くこれをコピペしてください!(・ω・)ノ

※自分の好きなバナーを表示させる方法は後からちゃんと説明しますね!!

↓これ!

<a href=”http://www.np-atobarai.jp/about/” target=”_blank”><img src=”http://www.netprotections.com/start/atobarai/images/P-3-2.gif” alt=”NP後払い” /></a>

↑これ!

意味なんて分かんなくても、これをコピペするだけで、

NP後払い

さっき選んだバナーをこんな感じで表示させることができますよー(^ω^)ノ

np055

とりあえずコピペしてみました。

何が書いてあるのかさっぱりだけど、

コピペしただけです(つω`*)

この状態で、「かんたんモードに切り替える」をぽちっとしてみると、

np038

こんな感じでバナーが表示されています(*´ω`*)

ちゃんと表示されてたら「保存」をぽち。

※表示されてなかったら、コピーしきれてないかもしれません。

ちゃんと「>」こんな記号まで全部コピペしてくださいね(^ω^)ノ

np039

保存したら「未使用パーツ」の一番下に、

今作ったバナーが加わっています(^ω^)

あとは表示させたいところにドラッグするだけです♪

np041

よっこいしょっと。

私は画像の場所にドラッグしました。

色んな所にドラッグしてみて、ショップページを更新して、

好きなところに設置すればいいと思います♪

※これはドラッグするだけで自動で保存されます(^ω^)

ちなみに私が設置した場所は、

np042

上の真ん中らへんです(・ω・)ノ

これで設置完了です!

え?

左側にもバナーがあるじゃん!

ですって??

えっと・・・

多分バナーは1個でいいと思うけど、

私は2個設置してみました(つω`*)

せっかくだから、

2個目は自分の好きなバナーを設置してみましょう(^ω^)

でもその前に!

慣れないことをやって疲れてると思うから、

このへんで少し休憩するのがおすすめです(*´ω`*)

自分の好きなバナーを設置してみる

イージーマイショップの設定

のんびりコーヒーを飲み終わったら、

2個目のバナーの設定を始めますよー(・ω・)ノ

まずは、

np035

この画面を出してください(・ω・)ノ

やり方は今までと同じです!

忘れてたら、上に戻って復習してくださいね(^ω^)

あ、そうそう。

名前は分かりやすいように適当に変えといてください(つω`*)

それと、「HTMLモード」に書かないとダメですよー!!

(私が簡単モードに書いちゃって、全然表示されなくて困った。なんて言えない)

HTMLの復習

それでは・・・

ごそごそ。

ぽい(・ω・)つ

<a href=”http://www.np-atobarai.jp/about/” target=”_blank”><img src=”http://www.netprotections.com/start/atobarai/images/P-3-2.gif” alt=”NP後払い” /></a>

さっきHTMLにコピペしたのはこれです。

少しくらい中身が変わってても気づきそうにないけど、これです!

分かりやすいように背景に色を付けてみました。

そして実は、この文字列を少し変更するだけで、

好きなバナーを表示することができるんです!

早速説明しますね(・ω・)ノ

分かりにくいかもしれないけど、

<a href=”http://www.np-atobarai.jp/about/” target=”_blank”><img src=”http://www.netprotections.com/start/atobarai/images/P-3-2.gif” alt=”NP後払い” /></a>

赤線を引いたところをよく見てみるとURLになってますね(=゚ω゚)

実はそれが画像のアドレス(URL)なんです。

ちょっと抜き出してみますね!

http://www.netprotections.com/start/atobarai/images/P-3-2.gif

ほら!

URLになってるでしょ!

このURLに飛んでいくと、画像だけのページになっています。

だから、ここのURLを他の画像のURLにするだけで、

表示される画像を変えることが出来ちゃうんです(^ω^)

分かってもらえましたか?(;´・ω・)

とりあえずやってみますね(´・ω・`)

好きなバナーを選ぶ

まずはバナーを選びましょう(^ω^)

np044

今回はこの画像にしてみます。

⑥【シンプル】300×300 S-S-3です。

もちろんこれ以外のどんな画像でもできますよー(^ω^)

np043

バナーを選んだら、

使いたいバナーの上で右クリックして、「画像アドレスをコピー」をぽちっとします。

ぽちっとしても何も起きないけど、

ちゃんと画像のURLがコピーされています(^ω^)

※ちなみにこれが今コピーした画像アドレス(URL)です。

http://www.netprotections.com/start/atobarai/images/S-S-3.gif

HTMLをいじってみる!

書き間違えても、また書き直せば何の問題もありません!

気楽に何回も挑戦してみるのがオススメです。

私は最初、何回も失敗しました(つω`*)

さて、バナーのURLのコピーが出来たら、

<a href=”http://www.np-atobarai.jp/about/” target=”_blank”><img src=”http://www.netprotections.com/start/atobarai/images/P-3-2.gif” alt=”NP後払い” /></a>

(↑これ)さっきのHTMLの赤ラインを引いてあるところを消します。

少し細かい作業になるけど、「”」は消しちゃだめですよー(^ω^)

<a href=”http://www.np-atobarai.jp/about/” target=”_blank”><img src=“” alt=”NP後払い” /></a>

URLの前と後の「”」と「”」を残して、赤ラインのところを消しただけです(・ω・)ノ

それだけでずいぶんスッキリしましたね。

後は、今消したところに、自分の好きな画像のURLを貼りつけるだけです!

元々URLが書いてあった、「”」と「”」の間ですよ!(・ω・)ノ

<a href=”http://www.np-atobarai.jp/about/” target=”_blank”><img src=“http://www.netprotections.com/start/atobarai/images/S-S-3.gif” alt=”NP後払い” /></a><br />

こんな感じです(・ω・)ノ

ちゃんと「”」と「”」の間に貼り付けてありますか?(^ω^)

※もしかしたら、このHTMLをコピーした時に、画像アドレス(URL)のコピーが書き換えられてるかもしれません。その場合はもう一回バナーの画像アドレス(URL)をコピーしてくださいね(´・ω・`)

イージーマイショップでは

np056

こんな風に書いてみました。

パッと見最初のバナーと何も変わってないけど、

よーく見てみたらURLが変わってます(・ω・)ノ

np058

簡単モードで見てみたら、

ほら!

ちゃんとバナーが表示されてるでしょ(*´ω`*)

np057

あとは今作ったパーツを画像の場所にドラッグするだけで、

サイドバーの左側に表示させることができますよー(^ω^)

まとめ

バナーを設置するだけでも、

かなりお店っぽくなりました(^ω^)

バナーの設置って難しそうだったけど、

少しだけでも仕組みが分かっただけで、

かなり簡単になりました(・ω・)ノ

もしも分からないことがあったらコメントとかしてください!

☆☆合わせて読んで欲しい記事☆☆

NP後払いに申し込むことを決めました!

NP後払いの審査に通りましたー!

NP後払いをイージーマイショップに導入する方法

ソフトバンク光でお店の電話とFAXの2回線を契約しました!

特約ゆうパックと契約しました(^ω^)

今回も最後まで読んでくださってありがとうございました(^ω^)

0
広告

シェアしてもらえると頑張れます(/・ω・)/

ふみえをフォローする(●´ω`●)