タグ別アーカイブ: 設置

ヤフーショッピングのページで、トリプル契約をしていなくても画面の左右に縦長のバナーを表示させる方法

こんにちは。nekonomoridesignのyoshyです。

ヤフーショッピングに無料で出店している方で、トリプルの契約無しと言う方もいらっしゃるのではないでしょうか?
でも、トリプルの契約をしていなくても、なんとなく「売ってるよ!」感を出したいと思うのは出店者としての本音だと思います。そこで、何とかできないかなーと試行錯誤したのがこちら。。。。

<ul>
<li style=”background-color:transparent;
background-image:url(画像のURLをここに記入);background-repeat:repeat-
y;background-position:top
left;background-attachment:scroll;height:7000px;top:230px;z-index:auto;left:0px;position:absolute;width:画像の横幅の大きさを指定;min-height:100%;visibility:visible;display:block;”>
<a href=”リンク先のURLを記入”
style=”display:block;min-height:100%;width:画像の横幅の大きさを指定;visibility:visible;height:5000px;text-indent:-9999px;”>
</a></li>
</ul>

こんな感じのタグを、ヘッダーのフリースペースに入れると出てきます。
ちなみに、これは左側に出したいときのタグです。

ヤフーショッピングの通常版(トリプル契約なし)で、CSSスタイルシート属性を適用したいときは、直接 styleで指定してしまう。

ヤフーショッピングなどのモールでの場合は、通常契約の状態だとスタイルシートは使えません。しかし、裏技的な事になりますが、直接style属性で設定する事はできます。

たとえば・・・

<p>スタイルを適用したいなー・・・</p>

<p style=”font-size:12px;color:#FF0000;font-weight:bold:line-height:20px;”>

スタイルを適用したいなー・・・

</p>

という記載は可能と言うことです。

直接CSSを適用しているので、スタイルシートの最も便利な「汎用性」「更新のやりやすさ」という利点はまったく活かされない

当然ではありますが、外部スタイルシートなどに直接CSSを設定できる場合、そのスタイルシートさえ書き換えれば、各ページも自動的に切り替わるというのがスタイルシートの利点でもあります。

しかし、直接style属性でcssを適用している場合は、当然ながら、書くページの変更をしないといけません・・・。

なので、css設定でしかやりづらい表現をしたいときなどは、この方法を使用しても良いと思いますが、できれば、外部スタイルシートを使用したページ作りができるような契約をしているほうが良いかなとも思います。

家賃無料・自社サイト系のクレジットカード決済よりも決済手数料が低いヤフーショッピングを最大限利用していこう

ヤフーショッピングで取り扱っているクレジットカード決済は、実は、EC-CUBEなどの自社サイト系で契約可能なクレジットカード決済サービスよりも手数料が安かったりします。(契約内容にもよるところはあります)

アフィリエイト負担等ちまちましたものはありますが、ヤフーショッピングは、限りなく0円に近く、それでいて集客もまあまあしてくれるサイトです。
正直なところ、詐欺だのナンだのが流行している時代に、モール以外の自社サイト系でしかも、大手じゃない小さなネットショップでショッピングをする人の絶対数は限りなく少なくなってきている事を考えても、ヤフーショッピングに出店する事はメリットになると思います。

(ヤフーショッピング+自社サイトはまだOK)

無料の範囲でも色々とできる事はあると思いますのでそれを追求し、広告費0円、固定費0円でどこまでやれるかこれからも頑張っていきたいと思います。

それでは、今日はこのあたりで。

EC CUBE 2.13.3 カスタマイズ トップページにスライドショーを設置する方法 動きのあるトップページを作る方法

こんにちは。nekonomoridesignのyoshyです。
本日はEC CUBEカスタマイズです。

トップページにスライドショーを設置する方法

トップページにスライドショーがあると、動きもあって何だかソレっぽい感じになりますよね?ということで、設置したいなあとおもってやってみましたので、備忘録兼ねて記事にしておきます。
簡単な流れはこちら。

  1. スライドショー用の画像を設置
  2. スライドショー用のブロックを新規作成
  3. 必要タグをそのブロックに記載
  4. 完成したボックスをレイアウトで配置

という簡単な流れです。

1.スライドショー用の画像の準備
/html/user_data/packages/default/img/(新規作成したフォルダ)
に画像を保存する。

ではまず、画像を用意します。
適当・・・というわけでもありませんが、1000x400位の大きさで私は作りましたが、画像の大きさは、設置されるサイトのサイズによると思いますので詳しくは割愛します。

作った画像を保存するのですが、保存場所は、私の場合、わかりやすいように「top_slide」という名前の専用フォルダを以下のに作製してそこに保存していきました。
スライドショーで流したい画像はすべてそこに入れるという感じです。

保存フォルダ
/html/user_data/packages/default/img/top_slide(※新規作成したフォルダ)

上記フォルダにFTPサーバ経由で画像をアップロードしておきます。

2&3.スライドショー用のブロックを新規作成してタグも記入。

スライドショーを表示させるためのブロックを新規作成します。
タグも一緒に書いてしまいます。

【作業場所】
デザイン管理>PC>ブロック設定
【登録内容】
ブロック名:トップスライドショー(※任意で決めてください)
ファイル名:top_slideshow(※任意で決めてください)
【タグ】
———————————————————————————–

<meta charset=”UTF-8″>
<link rel=”stylesheet” href=”<!–{$TPL_URLPATH}–>css/default.css” type=”text/css” media=”all”>
<link rel=”stylesheet” href=”<!–{$TPL_URLPATH}–>css/module.css” type=”text/css” media=”all”>
<link rel=”stylesheet” href=”<!–{$TPL_URLPATH}–>css/bloc.css” type=”text/css” media=”all”>
<link rel=”stylesheet” href=”<!–{$TPL_URLPATH}–>css/jquery.bxslider.css” type=”text/css” media=”all”>
<script type=”text/javascript” src=”<!–{$TPL_URLPATH}–>js/jquery.min.js”></script>
<script type=”text/javascript” src=”<!–{$TPL_URLPATH}–>js/jquery.bxslider.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(‘.slider’).bxSlider({
auto: true,
pause: 4000,
speed: 1000,
mode: ‘horizontal’,
pager:true,
prevText: ‘<‘,
nextText: ‘>’
});
});
</script>

<div id=”slide_page”>
<ul class=”slider”>
<li><a href=”./products/list.php?category_id=1″><img src=”<!–{$TPL_URLPATH}–>/img/top_slide/2で保存した画像1枚目” alt=”スライド1” /></a></li>
<li><a href=”./products/detail.php?product_id=1″><img src=”<!–{$TPL_URLPATH}–>/img/top_slide/2で保存した画像2枚目” alt=”スライド2″ /></a></li>
<li><a href=”./products/list.php?category_id=2″><img src=”<!–{$TPL_URLPATH}–>/img/top_slide/2で保存した画像3枚目” alt=”スライド3″ /></a></li>
<li><a href=”./products/list.php?category_id=3″><img src=”<!–{$TPL_URLPATH}–>/img/top_slide/2で保存した画像4枚目” alt=”スライド4″ /></a></li>
</ul>
</div>

————————————————————————————
タグの解説
<a href=”./products/list.php?category_id=3″>
↑これは、リンクURL。カテゴリへ飛ばしたいときは、ここの id= のあとの数字を変えれば使えます。

<a href=”./products/detail.php?product_id=1″>
↑これもリンクURL。こちらは商品ページにダイレクトです。id= のあとの数字を、表示したい商品管理番号にすればダイレクトにリンクします。

<div id=”slide_page”>
スライド全体をcssのスタイルシートで指定しています。
このcssは、/html/user_data/packages/default/css/contents.css
に、新しいcssを追加作製しています。

———————————————————————————-

EC CUBE 2.13.3 スライドショーをトップページに設置する方法
EC CUBE 2.13.3 スライドショーをトップページに設置する方法

こんな感じでかいていって、「登録する」を押します。

4.完成したスライドをレイアウトで配置します。

【作業場所】
デザイン管理>PC>レイアウト設定

EC CUBE 2.13.3 スライドショーをトップページに設置する方法
EC CUBE 2.13.3 スライドショーをトップページに設置する方法

未使用ブロックに、先ほど3でつくったブロックがあるはずなので、ソレを任意の位置にレイアウトすれば完了です。

お教えしたままのタグだと、スライドを表示させているところが<div>でくぐってクラス設定をしているので、そこは、CSSで適当に調整してください。

以上で、簡単なスライドショーの設置方法でした!