ショップできすぎくんカスタマイズ裏技講座へようこそ!

ショップできすぎくんの「スマートフォン表示機能」

利用するをチェックするだけでモバイルフレドリーのサイトが作れる優れものです

でも、スマホで見るとどうして長~くなってスクロールするのが結構面倒
素材画像がたくさんあるページはPCで見ても結構長いよね~

そんな時は商品ページに「ページトップへのリンクを付けよう」という記事を以前に書きました。
http://ameblo.jp/uchiguru-d/entry-11549805239.html

あれからちょうど2年(速っ)今回は、
最近よく見かける画面の右端に矢印画像が表示されて、タップするとページの先頭に戻るボタン


できすぎくんでもできるかな?と思い試してみました。

さらに、各商品ページごとにそれぞれ設置するのは面倒なので、一気に全ページに表示できるようにならないかと、思い切ってサイドバーに入れてみたら大成功

一箇所設置するだけで全ページに適用されます


ただし、忍者サーバー利用ショップだと、最下部に広告が表示されるので不向きです。
無理やりCSS調整すれば解決しますが・・・。
サイドバーの挿入した所に空白ができてしまいます。
これも無理やりCSS調整すれば目立たなくなりますが・・・。



以上のデメリットを、ご理解いただいた上ご利用くださいm(_ _)m


次の手順でお試しください。


 矢印画像を用意し、アップロードしましょう。
アップロード先はできすぎくんでも自前サーバーでも構いません。
サイズはデザインにもよりますが、幅35から50ピクセルほどが良いでしょう。


 できすぎくんのサイドバー編集で、最後の行に自由ボックスを挿入。


 画像挿入機能を使い矢印画像を挿入。



配置指定・サイズ指定はそれぞれ「指定なし」を選択。




 HTML編集モードにして以下のhtmlコードを、画像を指定しているコード<imgの前にそのままコピペ。

<div style="position: fixed;right: 5px;bottom: 30px;"><a href="#container">


 続いて、画像を指定しているコードwidth="full">の後に以下のコードをそのままコピペ。

</a></div>


 以下のようなコードになります。
下線部分がコピペしたコード

<div style=”position: fixed;right: 5px;bottom: 30px;”><a href=”#container”>
<img src=”http://m.msmstatic.com/000000000/pagetop.png” alt="”ページトップへ”" title=”ページトップへ” align=”noassign” width=”full”>
</a></div>



 ここで紹介した画像挿入のHTMLコードはChromeを使って表示されるコードです。IEなど違うブラウザやお使いの環境で異なる場合があるようです。
恐れ入りますが適時判断いただけますようお願いいたします。


  htmlを挿入するボタンをクリック。
自由ボックスには何も表示されませんが、大丈夫です



 保存しサーバーにアップロードして出来上がり!



どうでしょううまく行きましたか?

で記述したスタイルシートの部分は

position: fixed・・・指定された位置に表示せよ

その指定場所は

right: 5px・・・画面右端から画像の右端までの距離が5px

bottom: 30px・・・画面下端から画像の下端までの距離が30px

の位置を指定していることを意味します。
画像のデザインやサイズ、お好みに併せて調整ください。


リンク先は
"#container"・・・このページ の id="container" と記述されているところ
を示しています。


 私はついでにjQueryを使い、
最初は矢印画像が表示されない
少しスクロールすると表示される
ゆっくりページトップへ戻る
のように調整し、完成品がこちらです。

http://shop.moshimo.com/black_dekisugi/

興味があったらご覧くださいませ。


では、また








AD