おちゃのこ広場

おちゃのこユーザー様同士の情報交換BBS!
活発な意見交換の場としてご利用下さい。

開く
ご利用に際して
おちゃのこ広場では、以下のような書き込みを禁止します。
また、おちゃのこネットが不適当であると判断した場合、予告なく書き込みを削除する場合があります。
  • 誹謗中傷、他人を不愉快にさせるような書き込み。
  • 個人情報(住所、電話番号など)の書き込み。
  • 宣伝目的の書き込み。
おちゃのこネットは、おちゃのこ広場の使用に関連して発生したいかなる損害に対しても、一切の責任を負いません。
記事を閉じて表示
記事を閉じる スライドショーと横ナビゲーションについて質問 投稿者:TSUKA No.16018 URL

おちゃのこ刑部様

いつもここでは勉強させていただいています。
どんなに試行錯誤してもうまくいかないので、助けてください!

サイトリニューアル中でして、いくつか教えていただきたいことがあります。

●その1

Lesson128 http://www.ocnk.net/mailmagazine/ocnk_ma.php?num=182&target=de&page=next

スライドショーを作成する にて自由入力欄 中央に1つ。
左にも

<div class="swipe_list" data-autoplay="on" data-interval="7000" data-cols="1" data-adjustment="on">
<div class="list_item_table col1">

にして、1列で表示させるようにしたいと思い、
入力したのですが、左エリアでhttpsにすると
Google Chromeで画像が表示されません。

Internet Explorer8upでTOPは最初普通表示されますが、
ログインなど遷移するとセキュリティ警告がでてしまいます。

スライドショーは左エリアには置けないのでしょうか?
それと、IEの警告を回避する方法もお願いします。

SSLページ設定で非表示にするのはできれば避けたいです。

●その2

続スライドショーについてですが、
枠を消したいと思い、以下をcssの最下部に追加しましたが、どれも枠が無くなりません。
何か間違っているのでしょうか。。。

追加したcss ↓

#container .topphoto .list_item_photo,
#container .topphoto .item_data {
padding: 0px;
border: 0px;
}

●その3

トップページのキャッチフレーズ部分に横ナビゲーションをいれたのですが(現時点テスト画像)
またもやGoogle Chromeで httpsの画像が表示されません。
IEでは表示されます。。。
その1で書いた状況とまったく同じ状態です。
何が悪いのかおしえてください。

また、横ナビゲーションをマウスオーバーで画像が切り替わる設定をしたいのですが
うまく行きません。どうかご教授くださいませ。

以上、いくつかありますが何卒よろしくお願いいたします。

尚、現在メンテナンス中です。

Re ご質問について 投稿者:おちゃのこ刑部 No.16019 URL

TSUKAさん、こんにちは。

ご質問についてです。

●その1
画像URLがhttps://独自ドメインURLとなっております。
下記のようにすべて共用ドメインURLに変更をお願いします。
例)
https://www.e-codawari.jp/data/e-codawari/image/toppage/top_1111.gif

↓変更後

https://e-codawari.ocnk.net/data/e-codawari/image/toppage/top_1111.gif

●その2
中央エリアのスライドショーですが、現状CSSにて指定してあるtopphotoというclass名が指定されておりません。
class名を追加してください。

<div class="new_items">

<div class="new_items topphoto">

●その3
画像が表示されない原因は、その1のご質問と同様で、https://独自ドメインURLとなっているためです。
共用ドメインに変更してください。
マウスオーバーについては、JavaScriptを利用される場合は、申し訳ございませんが、ご自身で作成をお願い致します。
下記ページ等をご参考にご覧ください。
http://www.scollabo.com/banban/jsindex/sample/sample_187.html

よろしくお願い致します。

Re ありがとうございます 投稿者:TSUKA No.16020 URL

おちゃのこ刑部 殿

迅速なお返事、感謝いたします。

早速手直ししてみました。

結果・・・

●その1
ケアレスミスですね・・・
ちゃんと見ればわかることなのに・・・(泣)ありがとうございました。
うまく表示されました。

●その2
<div class="new_items">

<div class="new_items topphoto">
の部分ですが、自由入力欄に追加するのでしょうか?
ちょっとイマイチ分からないのです。。。

自由入力欄に入れてみると、新商品やアイテムランキングなどの
写真の部分まで枠がなくなってしまいました。

すいませんが、もう少しくわしくご教授くださいませ。

●その3
表示は無事できました。
マウスオーバーについてはもう少し勉強してみます。
ありがとうございました。

以上、●その2だけ お手すきのときで結構ですのでよろしくお願いいたします。

Re ご質問について 投稿者:おちゃのこ刑部 No.16021 URL

TSUKAさん、こんにちは。

その2についてです。
<div class="new_items">が自由記入欄に挿入されておりましたので、そこに追加しましたが、スライドショーのみを囲んでいる<div>タグでないようですので、自由記入欄に<div class="topphoto">~</div>を追加してスライドショーを囲んでください。

<div class="topphoto">
スライドショーのhtmlタグ
</div>

よろしくお願い致します。

Re うまく表示されました 投稿者:TSUKA No.16022 URL

おちゃのこ刑部 殿

うまくできました。

ありがとうございました。


感謝です。

Re キャッチフレーズの横ナビゲーション 投稿者:TSUKA No.16023 URL

おちゃのこ刑部 殿

何度もお手数おかけしております。
ご紹介いただいたjsのページで無事オンマウスで
画像が変わる設定ができたのですが、
Google Chromeでは出ない画像の周りの枠が
IE8upで出てしまいます。

これを消すにはどうしたらいいのでしょうか?

お手数おかけしますが、お手すきの時で結構ですので
またご教授ください。

よろしくお願いいたします。

Re ナビゲーションについて 投稿者:おちゃのこ刑部 No.16025 URL

TSUKAさん、こんにちは。

スタイルシートの編集から下記の指定をコピーして貼り付けてください。
※貼り付け位置は、最下部にお願い致します。

#copy A img {
border: none;
}

よろしくお願い致します。

記事を閉じる キャッチフレーズ 投稿者:miho No.16015 URL

おちゃのこ刑部様

お世話になります。
1点お伺いしたいことがあります。
左上のキャッチフレーズのことなのですが、
トップページではきちんと出ているのですが、
トップページ以外では、1行目と2行目の間が空いてしまっています。
トップページと同じようにするにはどのような方法がございますか?

Re 解決しました 投稿者:miho No.16017 URL

お世話になります、すみません!解決いたしました。

記事を閉じる お願い&要望 投稿者:ume No.15992 URL

おちゃのこ刑事様、
いつかで良いのですが、今度おちゃのこデザイン道場で
トップページ上部に横並びメニューの付け方又は作り方を
やってもらえないでしょうか??
これ知りたいってお客様沢山居るのではないでしょうか?

当方もその一人です。
おちゃのこのテンプレートはカスタマイズし易くすごく優れてると思います。
ですが通販ショップとしてトップ画の下にメニューを設置出来るオプションが
無い、又はその方法の説明、又はデザイン道場での紹介が無いのが非常に
残念です。
このトップページ画像の下のメニューの配置は通販ショップに取っては
非常に大きな利点かつ、お客様にも大切な機能では無いでしょうか?

この方法をおちゃのこデザイン道場等で紹介する事はおちゃのこでショップを
開かれる全てのユーザー様に有意義かつ売り上げに貢献する情報になると思います。

是非ご考慮お願い致します。

当方も非常に知りたい方法の一つですが、
ネットを自分で調べても分からないですし、
多少のHTML知識では、ちゃんとCSSにも対応出来ず
あきらめてしまっているユーザー様も多数居ると思います。

Re デザイン道場について 投稿者:おちゃのこ刑部 No.15994 URL

umeさん、こんにちは。

デザイン道場についてです。
ヘッダーメニューについてですが、キャッチフレーズ欄にhtmlタグを挿入して作成することになりますが、作成にはメニュー数や縦幅や横幅を決めた上で、position指定を利用した絶対位置での位置指定が必要となります。
各テンプレート、また、ご自身でカスタマイズされている場合等も考慮する必要があるため、1つのパターンとしてご紹介することは難しい事例となります。

なお、現状テンプレートのバージョン2の開発を行っております。
そちらのテンプレートでは、ヘッダーメニューを管理画面の設定で作成できるようにする予定でございます。

よろしくお願い致します。

Re 無題 投稿者:トントンハウス 井藤 No.15999 URL

umeさん、こんにちは。
先月の神戸セミナーでも少しご紹介させていただきましたが、おちゃのこネットユーザーの横のつながりがあってもいいのではないかと思い、おちゃのこさん非公認で、勝手にサイトを作りました。(おちゃのこさん、勝手な振る舞いをお許し下さい)

ネットショップ開業から月商100万円までの道のり
http://netshop-opening.com/

こちらの「トップ画像下にナビゲーションの設置」でナビゲーションバー(メニューバー)の付け方の説明動画をアップしてますので、よかったら見てみて下さい。

Re いつ頃でしょうか? 投稿者:ume No.16007 URL

おちゃのこ刑部様ありがとう御座います。


テンプレートバージョンの2が出るとの事
待ちこがれます。

登場するのはいつごろですか?
今現在の方法では、ちょっと自分には敷居が高く感じます。

ヘッダーメニューについてですが、キャッチフレーズ欄にhtmlタグを挿入して作成することになりますが、作成にはメニュー数や縦幅や横幅を決めた上で、position指定を利用した絶対位置での位置指定が必要となります。
とありますが、何となく言われてる事は分かりますが
詳しくは全くまだ分からないです。





Re 動画の見れるアドレス教えて下さい 投稿者:ume No.16008 URL

トレント様、ありがとうございます。

ネットショップ開業から月商100万円までの道のり
http://netshop-opening.com/

こちらの「トップ画像下にナビゲーションの設置」でナビゲーションバー(メニューバー)の付け方の説明動画をアップしてますので、よかったら見てみて下さい。

とありますが、その動画を見つける事ができませんでした、、、。

動画の見れるアドレスを教えて頂けますか?

非常に興味があるので是非一度見てみたいです。

宜しくお願い致します

Re 無題 投稿者:トントンハウス 井藤 No.16016 URL

umeさん、こんにちは。

横並びメニューの付け方を解説したコンテンツは当ホームページの第3章 デザインカスタマイズ-トップ画像下にナビゲーションの設置にあります。

ネットショップ開業から月商100万円までの道のり
http://netshop-opening.com/

URLはこちらです。(会員登録が必要です。小さなお店も集まれば大きな力になると信じ、お互いに高め合ってネットショップが盛り上がるように、会員登録制となっています。)
http://netshop-opening.com/index.php?%E3%83%88%E3%83%83%E3%83%97%E7%94%BB%E5%83%8F%E4%B8%8B%E3%81%AB%E3%83%8A%E3%83%93%E3%82%B2%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E8%A8%AD%E7%BD%AE

記事を閉じる 表示について 投稿者:ホルダーマート No.16013 URL

お世話になっております。

現在、商品仕様項目欄に入数を表記しているのですが、
説明付き一覧、写真のみ一覧表示の時に商品仕様項目欄を表示させることは
可能でしょうか。

よろしくお願い致します。

Re 表示について 投稿者:おちゃのこ刑部 No.16014 URL

ホルダーマートさん、こんにちは。

商品仕様項目についてです。
商品一覧ページには、商品仕様項目を表示させることはできません。
説明付きの場合は、商品説明欄の一部を表示可能ですので、商品説明欄の先頭部分に記載いただくことでご対応いただけますでしょうか。

よろしくお願い致します。

記事を閉じる 特定商取引法 の 編集 投稿者:メラヴィリア No.15984 URL

お世話になります。

特定商取引法を自分で作ったアイコンで左の部分に表示
をしたくNo.12137を参照させて頂いたのですが、
1つの画像が何重にもなってしまったり、他のアイコンと
位置をあわせたいのですが、左寄りになってしまいます。
またアイコンにマウスを置いた際に、「特定商取引法」と表示
したいのですが、どのようにしたらよろしいでしょうか。

よろしくお願い致します。

Re メニューについて 投稿者:おちゃのこ刑部 No.15989 URL

メラヴィリアさん、こんにちは。

メニューについてです。
スタイルシートの編集から下記の指定をコピーして貼り付けてください。
※貼り付け位置は、最下部にお願い致します。

画像のサイズは、160×60ピクセルで作成してください。
通常表示用の画像とマウスオーバー用の画像を作成して、画像専用管理画面→コンテンツフォルダにアップロードしてください。

/* 通常画像 */
.shop A {
display: block;
background-image: url(image/ファイル名);
background-repeat: no-repeat;
background-position: center center;
text-indent: -9999px;
width: 160px;
height: 60px;
padding: 0px;
margin: 0px;
}

/* マウスオーバー画像 */
.shop A:hover {
background-image: url(image/ファイル名);

.shop {
background-image: none;
height: 60px;
padding: 0px;
}

よろしくお願い致します。

Re 無題 投稿者:匿名 No.16000 URL
添付画像

おちゃのこ刑部 さま
お世話になります
ご丁寧にご説明いただきありがとうございます。

アイコンをいれてみましたが、SSLに重なってしまいます。
どのようにしたらよろしいでしょうか。
また左側の矢印のようなものがきえません。
また写真のように(カレンダー)
マウスを置いた際に文字(特定商取引法)を出したいのですがどのように
設定したらよろしいでしょうか。

お忙しい中何度もすみません。
どうそよろしくお願い致します

Re 指定について 投稿者:おちゃのこ刑部 No.16001 URL

メラビリアさん、こんにちは。

大変申し訳ございません。
ご回答に}が一つ抜けておりました。
.shop A:hover {
background-image: url(image/ファイル名);
} ←この記載が抜けておりました。

なお、文字画像については、マウスオーバー画像部分に指定してください。

/* 通常画像 */
.shop A {
display: block;
background-image: url(image/ファイル名);
background-repeat: no-repeat;
background-position: center center;
text-indent: -9999px;
width: 160px;
height: 60px;
padding: 0px;
margin: 0px;
}

/* マウスオーバー画像 */
.shop A:hover {
background-image: url(image/ファイル名);
}

.shop {
background-image: none;
height: 60px;
padding: 0px;
}

よろしくお願い致します。

Re 無題 投稿者:メラヴィリア No.16004 URL
添付画像

おちゃのこ刑部 さま

お世話になります。何度もご丁寧にありがとうございます。
再度あらたにやってみましたが
画像のようになってしまいます。

Re 無題 投稿者:メラヴィリア No.16005 URL

マウスオーバー画像ではなくていいので、
通常の状態で

http://meraviglia.ocnk.net/data/meraviglia/product/33410.png

この画像を入れたいのですが。
よろしくお願い致します。

Re 画像について 投稿者:おちゃのこ刑部 No.16009 URL

メラヴィリアさん、こんにちは。

画像についてです。
こちらで、先日のご回答で試してみましたが、正常に表示されました。
下記を貼り付けていただいておりますでしょうか。
また、スタイルシートの編集完了後に一度画面の更新、またはブラウザのキャッシュ削除もお試しください。

その状態でも、正常に表示されない場合は、申し訳ございませんが、その状態でお問い合わせいただけますでしょうか。

なお、スタイルシート内でご利用いただく画像ファイルは、画像専用管理画面のコンテンツフォルダ内にアップされることを推奨致します。

/* 通常画像 */
.shop A {
display: block;
background-image: url(image/ファイル名);
background-repeat: no-repeat;
background-position: center center;
text-indent: -9999px;
width: 160px;
height: 60px;
padding: 0px;
margin: 0px;
}

/* マウスオーバー画像 */
.shop A:hover {
background-image: url(image/ファイル名);
}

.shop {
background-image: none;
height: 60px;
padding: 0px;
}

よろしくお願い致します。

Re 無題 投稿者:メラヴィリア No.16010 URL

おちゃのこ刑部 さま

お世話になります。何度もすみません。
入れ込んだ状態にしてありますので
再度見ていただいてよろしいでしょうか。

宜しくお願いします。

Re 指定について 投稿者:おちゃのこ刑部 No.16011 URL

メラヴィリアさん、こんにちは。

指定についてですが、マウスオーバーさせない場合でも下記は必要となりますので、追加していただけますでしょうか。

.shop {
background-image: none;
height: 60px;
padding: 0px;
}

よろしくお願い致します。

Re 無題 投稿者:メラヴィリア No.16012 URL

おちゃのこ刑部 さま

色々とお手数おかけしまた。
今出来ました!!
本当にご丁寧に教えていただきありがとうございました。

今後もどうぞよろしくお願い致します。
本当にありがとうございます。

記事を閉じる 検索枠のずれ込みとマウスオーバー表示 投稿者:CHERRY'S No.16002 URL

お世話になっております。

こちらで色々勉強しながら、デザインを少しずつ改良しております。

その過程で、改良したことで不具合が出てきてしまった部分について、改善策を教えてください。

1 右上トップ部分の検索枠を大きくしたら、その下の青いラインに入り込んでしまいました。これを改善するにはどうしたらよいでしょうか。

2 左中央あたりの「BRAND」アイコン群ですが、マウスオーバーでブランド名が出ていたのが、でなくなってしまいました。
スタイルシートに追加していく過程で、どこかで出なくなってしまったのではないかと思います。
これを復活させる方法を教えてください。

以上、どうぞよろしくお願いいたします。

Re ご質問について 投稿者:おちゃのこ刑部 No.16003 URL

CHERRY'Sさん、こんにちは。

ご質問についてです。
上部の位置については、下記の指定で調整できます。

.searchbox .form,
.searchbox .searchinput {
position: relative;
top: -5px;
}

左エリアのロゴについてですが、alt属性のツールチップ(吹き出し)が表示されていたということでしょうか?
それでしたら、IE8以降のブラウザではツールチップが表示されない仕様となっております。

ツールチップ表示をされたい場合は、title属性をご利用ください。

<img src="ファイルURL" width="横幅" height="縦幅" alt="画像alt属性" title="タイトル" />

よろしくお願い致します。

Re 無題 投稿者:匿名 No.16006 URL

ありがとうございます!!

どちらもうまく作用しました。
いつもありがとうございます。

記事を閉じる 販売価格の「:」について 投稿者:nishimori No.15966 URL

お世話になっております。
商品詳細のページの販売価格と通常販売価格の金額の前に「:」が付くのですが、前者は半角、後者は全角で表示されており、見た目の統一感が損なわれてしまっています。
「:」が付かないか、もしくは同じ仕様で表示されるようにするにはどうすればいいでしょうか。
よろしくお願い致します。

Re 販売価格について 投稿者:おちゃのこ刑部 No.15968 URL

nishimoriさん、こんにちは。

販売価格についてです。
申し訳ございません。半角で統一させていただきます。
今しばらくお待ちくださいませ。

よろしくお願い致します。

Re 販売価格について 投稿者:おちゃのこ刑部 No.15975 URL

nishimoriさん、こんにちは。

販売価格についてです。
先ほど、半角表記に変更させていただきました。
お時間がかかり申し訳ございませんでした。

よろしくお願い致します。

Re おちゃのこ刑部 様 投稿者:nishimori No.15998 URL

表示が統一されました。
お手数をおかけしました。有り難うございます!

記事を閉じる リンク集について 投稿者:トントンハウス 井藤 No.15979 URL

おちゃのこ刑部さん、こんにちは。

フリーページの案内ページとしてリンク集を活用しています。
リンク集の初期設定で、target="_blank" rel="nofollow"のタグがついていますが、これを修正することはできませんでしょうか?

Re リンク集について 投稿者:おちゃのこ刑部 No.15982 URL

トントンハウス 井藤さん、こんにちは。

リンク集についてです。
Google側が相互リンクをマイナス評価する可能性を示唆しているため、リンク集のページには rel=nofollow を加えております。
https://support.google.com/webmasters/answer/66356?hl=ja

なお、自由記入欄およびフリーページにご自身で設定されるリンクは、rel=nofollow の影響は受けません。

よろしくお願い致します。

Re リンク集について 投稿者:トントンハウス 井藤 No.15983 URL

おちゃのこ刑部さん、ご返答ありがとうございます。
仰るとおり、リンク集はもはや意味をなくしてしまいました。
なので、このリンク集のCSSを活かして「リンク集」としてではなく、フリーページの案内ページとして利用しています。
http://www.tontonshop.com/link

フリーページを利用して案内ページを作ってもいいのですが、おちゃのこさんの場合、携帯サイト、スマートフォンサイトも各々作らなければならず、修正が見つかったり追加の情報があった場合、CSS・htmlとにらめっこしながら3度も手直ししなければいけません。
で、リンク集のtarget="_blank" rel="nofollow"のタグが外せたらと思ったわけです。

.link_page_bodyはユーザーが手直しできないclassですか?

Re .link_page_bodyについて 投稿者:おちゃのこ刑部 No.15986 URL

トントンハウス 井藤さん、こんにちは。

.link_page_bodyについてです。
基本的には、指定可能ですが、どの部分をどのように変更されるのでしょうか。

よろしくお願い致します。

Re 無題 投稿者:トントンハウス 井藤 No.15987 URL
添付画像

<div class="link_title"><a href="http://www.tontonshop.com/page/35" target="_blank" rel="nofollow">

target="_blank" rel="nofollow"のタグの外し方を教えて下さい。

Re .link_page_bodyについて 投稿者:おちゃのこ刑部 No.15990 URL

トントンハウス 井藤さん、こんにちは。

.link_page_bodyについてです。
大変申し訳ございません。
.link_page_bodyを指定してCSSにてページ内のデザインの変更は可能ですが、htmlタグを編集することはできません。

よろしくお願い致します。

Re 無題 投稿者:トントンハウス 井藤 No.15997 URL

了解しました。
ご返答ありがとうございます。

記事を閉じる 消費税について 投稿者:luck chuck No.15951 URL

いつも大変お世話になっております。
もうすぐ消費税が8%になりますが、価格の表示につきまして
現在は1,000円(税別)となりますが、これを
1,000円(税込 1,080円)というように、税込み価格も並列で表示できるようにはなりませんか?

Re 消費税について 投稿者:おちゃのこ刑部 No.15953 URL

luck chuckさん、こんにちは。

ご質問についてですが、基本的には自動的に設定することはできません。

手動での対応となりますが、代替案として希望小売価格の名称を税込等に変更していただき、商品登録画面にて希望小売価格欄に税込価格をご登録いただくことで、商品詳細画面に表示させることが可能です。

よろしくお願い致します。

Re 希望小売価格について 投稿者:luck chuck No.15957 URL

刑部様

いつもありがとうございます。
ご提案いただきました「希望小売価格」を「税込」に変更したいのですが
そのやり方がわかりませんでした...

また、「販売価格」と「希望小売価格」のフォントの大きさ、及び色を変える方法も合わせてご教授いただけないでしょうか。
(「販売価格」を目立たせたいと思っています)

お忙しい中大変恐れ入りますが、何卒よろしくお願い申し上げます。

Re 名称について 投稿者:おちゃのこ刑部 No.15961 URL

luck chuckさん、こんにちは。

名称についてです。
デザイン管理→ページ/ラベル名称設定の販売価格ラベル欄で設定可能です。

文字色については、スタイルシートの編集から下記の指定をコピーして貼り付けてください。
※貼り付け位置は、最下部にお願い致します。

色は、ご自身で変更してください。

/* 商品詳細 販売価格 */
.detail_item_text .priceb {
color: #FF0000;
}

/* 商品詳細 希望小売価格 */
.detail_item_text div.text-normal {
color: #000000;
}

よろしくお願い致します。

Re スライドショーについて 投稿者:luck chuck No.15971 URL

刑部様

いつもありがとうございます。
これでやってみます。ありがとうございました。

別件で恐縮なのですが、フリーページやトップページ等それぞれに
デザイン道場128のスライドショーを設置したいのですが、
このスライドショーの画像にマウスを置いたとき、
リンクが貼られていることを示すため、画像が薄くなる指定を行いたいのですが
どのようにすればよいでしょうか。

また、トップページに設置したスライドショーのみ、
下に表示される商品名や価格、ボタンを除きたいのですが、
その部分のHTMLを削除すると、下に隙間が空いてしまいます。
この隙間を無くすには、どのような指定をすればよいでしょうか。

度々本当に大変申し訳ございません。
どうかよろしくお願い申し上げます。

Re スライドショーについて 投稿者:おちゃのこ刑部 No.15973 URL

luck chuckさん、こんにちは。

スライドショーについてです。
スタイルシートの編集から下記の指定をコピーして貼り付けて下さい。
※貼り付け位置は、最下部にお願い致します。

.layout_photo A:hover {
-moz-opacity:0.8;
opacity:0.8;
filter: alpha(opacity=80);
}

なお、商品名や価格部分の削除は、下記のdivタグごと削除いただいておりますでしょうか。
<div class="list_item_data">~</div>

よろしくお願い致します。

Re 空白ができてしまいます 投稿者:luck chuck No.15988 URL

刑部様

ご返信どうもありがとうございました。
スライドショーのリンク画像の薄くなる指定は無事できました。
どうもありがとうございました。
ですが、スライドショー下の空欄がどうしても出来てしまいます。
また、サイトをリニューアルしたのですが、
キャッチフレーズ欄を利用してナビゲーション画像を入れたのですが、
その下も大きく空欄が出来てしまいました。
お忙しい中大変恐縮ではございますが
今一度ご教授いただけませんでしょうか・・・
どうかよろしくお願い申し上げます。

Re 余白について 投稿者:おちゃのこ刑部 No.15991 URL

lick chuckさん、こんにちは。

余白についてです。
スタイルシートの編集から下記の指定をコピーして貼り付けてください。
※貼り付け位置は、最下部にお願い致します。

#header {
height: 80px;
}

#container .swipe_list .list_item_table .pointer_box {
margin-bottom: 0px;
}

よろしくお願い致します。

Re 「カートに入れる」ボタン等の変更について 投稿者:luck chuck No.15993 URL

刑部様

早速のご返信、どうもありがとうございました。
無事隙間が埋まりました。初歩的な事を何度もすみません・・・

またまたご質問なのですが、サポートくらぶに記載されていた
「カートに入れる」ボタン等を画像に変更する件について
やってみたのですが変わってくれません・・・
初歩的な事を何度もおたずねしてしまい、大変恐縮なのですが
教えていただけますでしょうか。
本当に申し訳ございません。
どうぞよろしくお願い申し上げます。

Re ボタンについて 投稿者:おちゃのこ刑部 No.15995 URL

luck chuckさん、こんにちは。

ボタンについてです。
スタイルシートの内の記載が原因です。

ボタン部分の上部の指定内に}の記載が抜けている箇所がございます。
そのため、この部分より下部にある指定が正常に反映されておりません。

.whatnew_page_body .ptitle {
width: 670px;
height: 35px;
padding: 0px;
margin: 0px;
text-indent: -9999px;
background-image: url(image/page_title_wnews.jpg);

↓追加後

.whatnew_page_body .ptitle {
width: 670px;
height: 35px;
padding: 0px;
margin: 0px;
text-indent: -9999px;
background-image: url(image/page_title_wnews.jpg);
} ←追加してください


よろしくお願い致します。

Re ありがとうございました!!!! 投稿者:luckchuck No.15996 URL

刑部様

できました!!!!
ケアレスミスを・・・本当にご指摘いただきありがとうございました!!!
お陰様で、どうにか形になってきました。
今後ともどうか末永くよろしくお願い申し上げます!!!
本当にどうもありがとうございました!!!

記事を閉じる トップページのスライドショー 投稿者:CHERRY'S No.15772 URL

お世話になっております。

トップページのスライドショーで、デザイン道場128の

http://www.ocnk.net/ocnk_ma/ocnkmagazine_asm183.html#de

のようなスライドショーを作りたいのですが、試してみたところ、画像が表示されず、画像部分の表示サイズがかなり大きなものになってしまいました。
サイズ、表示方法など、このサンプル通りで作りたいと考えています。

例として、下記のような画像を6点登録予定です。
修正部分を教えてください。

<li class="list_item_cell">
<div class="item_data">
<div class="inner_item_data">
<div class="list_item_photo">
<a class="item_image_box" href="http://ivorygreen.ocnk.net/product/393">
<img width="160" height="160" data-retention="1" alt="プレミアカラー・エコ" src="http://ivorygreen.ocnk.net/data/ivorygreen/image/sale1.JPG" />
</a>
</div>
<div class="list_item_data">
<p class="item_name"><a href="http://ivorygreen.ocnk.net/product/393">【スッポ抜けないやさしい首輪】プレミアカラー・エコ</a></p>
<p class="price">470円</p>
</div>
</div>
</div>
</li>

Re スライドについて 投稿者:おちゃのこ刑部 No.15777 URL

CHERRY'Sさん、こんにちは。

スライドについてです。
現状設定いただいているトップ画像部分<!--自由記入欄トップ画像1-->のJavaScriptが影響しております。
下記の2か所を変更してください。

1.下記は、必要ありませんので削除またはコメントアウトしてください。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


2.下記の箇所を変更してください。
<script type="text/javascript">
$(document).ready(
function(){
$('ul#portfolio').innerfade({
speed: 1000,
timeout: 5000,
type: 'sequence',
containerheight: '227px'
});
});
</script>

↓変更後

<script type="text/javascript">
(function($) {
$(document).ready(
function(){
$('ul#portfolio').innerfade({
speed: 1000,
timeout: 5000,
type: 'sequence',
containerheight: '227px'
});
});
})(jQuery);
</script>


変更の上、再度スライドショーを設定いただけご確認いただけますでしょうか。

よろしくお願い致します。

Re できました! 投稿者:CHERRY'S No.15985 URL

時間がかかってしまいました・・・。
スライドショー実装できました!!
どうもありがとうございました。

記事を閉じる 左エリアのショッピングカート、ログイン部分のタイトルを画像に変更する 投稿者:ume No.15969 URL

お世話になってます
左エリアのショッピングカート、ログイン部分のタイトルを画像に変更する方法
についての質問です

おちゃのこ通信のデザイン道場でレッスン9で紹介
http://www.ocnk.net/mailmagazine/ocnk_ma.php?num=59&target=de&page=next

この通りにやっみたのですが
ショッピングカートのカートの中身の外枠上部のラインを
画像cart_title.gifが重なり潰してしまいます

修正するにはどこをいじれば良いのでしょうか?
宜しくお願い致します

Re タイトルについて 投稿者:おちゃのこ刑部 No.15972 URL

umeさん、こんにちは。

タイトル画像についてです。
スタイルシートの編集から下記の箇所にheight: 30px;を追加してください。

.shopc_title {
height: 30px;
background-image: url(image/cart_title.gif);
}

よろしくお願い致します。

Re 修正されません 投稿者:ume No.15976 URL

おちゃの刑部様ありがとうございます。
指定箇所にheight: 30px;を入れると
カート画像の下になぜかまたカート画像がきてしまい
修正されません。
(今現在はheight: 30px;は外しております)

このheight: 30pxをメンバーログインの所に以下のように
入れてみたのですがこちらも同じ現象が起きてしまいます。

.member .shopc_title {
height: 30px;
background-image: url(image/login_title.gif);
}

宜しくお願い致します

Re カテゴリーページタイトル 投稿者:ume No.15977 URL

おちゃのこ刑部様
何度もすみません
もう一つだけお聞きしたい事が有ります

カテゴリページのタイトル(※商品一覧)を画像で作成したのですが、
これも先日お聞きしたのと同じく写真の下部がページの枠のラインに
重なる形となってしまいページのラインが消えてしまいます。

#categorylist_page_14 .ptitle {
width: 670px;
height: 160px;
text-indent: -9999px;
background-image: url(image/category_01.gif);
padding: 0px;
}

Re タイトルについて 投稿者:おちゃのこ刑部 No.15978 URL

umeさん、こんにちは。

タイトルについてです。
ptitleに上部の枠線が含まれていましたので、ご自身で画像を設定された場合は、その枠線は非表示となります。

設定されたい場合は、画像を指定したページのpmiddleに対して上部枠線を指定していただく必要があります。

スタイルシートの編集から下記の指定をコピーして貼り付けてください。
※貼り付け位置は、最下部にお願い致します。

#categorylist_page_14 .pmiddle,
#categorylist_page_57 .pmiddle,
#categorylist_page_58 .pmiddle,
#categorylist_page_49 .pmiddle {
border-top: 1px solid #E0DFE3;
margin-top: 5px;
border-radius: 10px;
}

よろしくお願い致します。

Re 修正されません2 投稿者:ume No.15980 URL

おちゃのこ刑部様、お世話になっております
いつも迅速なご指導に助かっております。

左エリアのショッピングカート、ログイン部分のタイトルを画像に変更する件おちゃのこ刑部様に
.shopc_title {
height: 30px;
background-image: url(image/cart_title.gif);
}

を挿入すると修正されるとご指摘頂きましたが
修正されません。

メンバーログインの所も同じ状態が出てます。

このheight: 30pxをメンバーログインの所に以下のように
入れてみたのですがこちらも同じ現象が起きてしまいます。

.member .shopc_title {
height: 30px;
background-image: url(image/login_title.gif);
}
で挿入してるのですが、、ショッピングカートの所と
同じく写真の下部の枠の上にかかり枠を消してしまいます

宜しくお願い致します

Re 枠について 投稿者:おちゃのこ刑部 No.15981 URL

umeさん、こんにちは。

枠についてです。
基本的には、先ほどのタイトルと同様です。
.shopc_titleに上部の枠が含まれていたため非表示となっています。
.shopc_listに指定ください。

.shopc_list {
border-top: 1px solid #E0DFE3;
border-radius: 10px;
margin-top: 5px;
}

.shopc_in_title {
background-position: 3px 3px;
}

よろしくお願い致します。

記事を閉じる お尋ねです 投稿者:miho No.15947 URL

お世話になります。
1点お尋ねなのですが、
トップページのヘッダーから下の部分が右にはみ出しております。
どのように変更したらよろしいでしょうか?

Re 右エリアについて 投稿者:おちゃのこ刑部 No.15949 URL

mihoさん、こんにちは。

右エリアについてです。
メルマガ登録欄の入力エリアサイズを指定してください。
それぞれのinputタグ内にstyle="width: 100px"等の横幅指定を追加して調整をお願い致します。

<input type="text" name="rdlastname" maxlength="30" style="width: 100px">

よろしくお願い致します。

Re ありがとうございました! 投稿者:miho No.15974 URL

おちゃのこ刑部さま、ありがとうございました。
まだ少しはみ出ているのはヘッダーの大きさの関係でしょうか?

記事を閉じる 枠の色変更について 投稿者:アティック. No.15956 URL

お世話になります。

グラスグレーのテンプレートを利用させて頂いていますが、「商品詳細」や「商品一覧」の枠の色を青系の配色カラーから別の色に変更したいと思っております。
併せて、「Facebookコメント」の枠の色も、現在の青系から変更したいと思います。
以上の変更方法をご教示いただけますでしょうか。

また、トップページの「おすすめ商品」となっている枠も「商品詳細」と同じ色ですが、ここも自動的に変わるのでしょうか。

どうぞよろしくお願いします。

Re 背景色について 投稿者:おちゃのこ刑部 No.15960 URL

アティック.さん、こんにちは。

背景色についてです。
スタイルシートの編集から下記の指定をコピーして貼り付けてください。
※貼り付け位置は、最下部にお願い致します。

色については、ご自身で変更をお願い致します。

/* 商品詳細ページ */
.detail_table_middle {
background-color: #FFFFCC;
}

/* トップ、商品一覧、FBコメント */
.style1_table_middle,
.list_table_middle {
background-color: #FFFFCC;
}

よろしくお願い致します。

Re 無題 投稿者:アティック. No.15967 URL

おちゃのこ刑部様

お返事ありがとうございます。
該当箇所が少し明るすぎたのでちょうどよい色に変更することができました。
ありがとうございました。

記事を閉じる 商品のお気に入り登録 投稿者:やまもと No.15963 URL

警備用品・防犯用品 販売 株式会社タンタカ 山本です

おちゃのこ刑部さま
先日の神戸セミナーではお世話になりました。

先日会員専用広場に投稿したのですが、投稿する場所を間違えたようなので
こちらにも投稿させていただきます!!


以前からあればいいな?と思っていたのですが
商品注文時に、同じ商品を次回も購入できるように
会員登録のログイン後でいいので、お気に入り登録できるようなシステムがあればいいなと思います。

たとえば、あるお気に入りのボールペンの芯があったとします、
今回そのボールペンの芯を購入したとします。
次回また同じものを購入しようとしたとしても、ほかにもたくさんの種類のボールペンの芯があって前回どれを買ったかわからなくなってしまわないように
商品自体をお気に入りにできたら、リピート注文の際に便利だと思います。

実装できるかどうかわかりませんが、ぜひ検討してみて下さい。

Re お気に入りについて 投稿者:おちゃのこ刑部 No.15965 URL

やまもとさん、こんにちは。

お気に入りについてです。
会員ログイン後のお気に入り機能については、改善課題となっております。

よろしくお願い致します。

記事を閉じる 商品詳細ページ 投稿者:ラスポンチャス No.15952 URL

こんにちは!
いつもありがとうございます。

商品詳細ページのカスタマイズでつまづいております。
添付画像の赤丸で囲んだ部分を右側に揃ええたいのですが、スタイルシートのどの部分を変更したらよいでしょうか。

ここを変えればいいかなと思ってスタイルシートをいじったら、商品説明の部分も変わってしまいました。
赤丸の部分だけを右寄せするにはどうしたらよいか教えていただきたいです。

よろしくお願いします。

Re 商品詳細ページについて 投稿者:おちゃのこ刑部 No.15954 URL

ラスポンチャスさん、こんにちは。

商品詳細ページについてです。
スタイルシートの編集から下記の指定をコピーして貼り付けて下さい。
※貼り付け位置は、最下部にお願い致します。

.detail_cart_box {
text-align: right;
}

よろしくお願い致します。

Re 無題 投稿者:ラスポンチャス No.15955 URL

回答ありがとうございます。
解決しました!

記事を閉じる 「特定商取引法表示」ページのレイアウト崩れ 投稿者:arisa No.15948 URL

お世話になっております。

どうにかしようと奮闘していましたが、
どうにも解決できず、書き込ませていただきます。

http://oshamagic.ocnk.net/info

こちらの、「特定商取引法表示」ページですが、
レイアウトの崩れが修正できません。
主にテーブルの幅、また全体の幅もトップページより大きくなっているようです。
(ページ幅に合うように背景を設定しています。)

私がページ担当になる前から起こっていた崩れで、
どこをどう触ったのかも、さっぱりわかりません。

link_shop_table、td_link_shop1、td_link_shop2あたりの
横幅などを変更してみても反映されませんでした。

申し訳ないのですが、どうしたら直るのか、
どこがおかしいのか、教えてください。

Re 特定商取引法について 投稿者:おちゃのこ刑部 No.15950 URL

arisaさん、こんにちは。

特定商取引法ページについてです。
管理画面→ショップ基本設定→特定商取引法設定ページの「返品・交換について」欄のhtmlタグが原因です。

記載されている内容の下記部分に</td></tr></table>を追加してください。

商品到着後<u>7日以内</u>に<a href="https://oshamagic.ocnk.net/contact">お問い合わせフォーム</a>かお電話にてご連絡ください。<br />
<br />

↓変更後

商品到着後<u>7日以内</u>に<a href="https://oshamagic.ocnk.net/contact">お問い合わせフォーム</a>かお電話にてご連絡ください。<br />
<br />
</td></tr></table>

よろしくお願い致します。

記事を閉じる 本日の改良点のご報告 投稿者:おちゃのこ刑部 No.15946 URL

皆さん、こんにちは。

本日の改良点のご報告です。
------------------------------------
・GMO後払い(イプシロン)決済(API連携)に対応いたしました。

GMO後払い(イプシロン)決済(API連携)に対応いたしました。
http://www.epsilon.jp/service/atobarai.html

GMO後払いとは、GMOペイメントサービス株式会社が提供する後払い決済サービスです。
購入者様は商品を受け取ってから、コンビニ・銀行・郵便局でお支払いいただける安心の決済のため、決済手段として導入することで、購買ニーズの獲得につながります。
弊社では、すでにGMO後払いを実装しておりますが、こちらのサービスを、イプシロン経由(API連携)でもご利用いただけるようになりました。

GMO後払い(イプシロン)のお申し込みは、管理画面(ショップマネージャー)よりお申し込みください。
既にイプシロンの契約をお持ちで、導入希望の方はイプシロンにお問い合わせください。

また、本日よりイプシロンには、1営業日導入プラン・お得プランが追加されておりますので、ご検討ください。

よろしくお願い致します。

記事を閉じる 掲示板のレスの区別について 投稿者:土谷 No.15942 URL

いつもお世話になっております。

現在、掲示板の本文とレスが同列で表示されており、見た目での区別がしにくいので、区別がつくように変化をもたせたいのですが、何か方法はありますでしょうか?

テーブルをインデント?できれば一番わかりやすいのですが、たぶん無理かなと思いますので、せめて文字色だけでも変えられればわかりやすくなると思うのですが…

Re 掲示板について 投稿者:おちゃのこ刑部 No.15943 URL

土谷さん、こんにちは。

掲示板についてです。
現状、class、idでの区別がありませんので、追加させていただきます。
追加後にご回答させていただきます。

よろしくお願い致します。

Re 掲示板について 投稿者:おちゃのこ刑部 No.15944 URL

土谷さん、こんにちは。

掲示板についてです。
レスのtableにのみclass名を追加し個別に指定可能になりました。

スタイルシートの編集から下記の指定をコピーして貼り付けてください。

●インデントする場合

.bbs_res {
margin-left: 15px;
}

.bbs_res .bbs_table {
width: 585px;
}


●背景色、文字色を変更する場合
※色はご自身で変更してください。

.bbs_res .bbs_title_bar {
background-color: #FFCC00;
color: #FF0000;
}

.bbs_res .bbs_text_block {
background-color: #F5F5F5;
color: #FF0000;
}

スマートフォン版の場合は、tableの構造上インデントさせることができません。
ご了承くださいませ。

よろしくお願い致します。

Re ありがとうございます 投稿者:土谷 No.15945 URL

ご対応頂きありがとうございます!!

さっそく試してみます^^

記事を閉じる スマートフォンサイトのナビ編集 投稿者:トントンハウス 井藤 No.15934 URL

おちゃのこ刑部さん、こんにちは。

前回のコメントで、なんと刑部さんを呼び捨てにしてました( ゚Д゚)
大変失礼いたしました。
読み返して発見し、ビックリです・・・

で、質問ですが、スマートフォンサイトのナビ部分「新規登録はこちら」を「ご利用案内」に変更したいと思っています。
可能であれば、設定方法を教えて下さい。

Re スマートフォン版について 投稿者:おちゃのこ刑部 No.15939 URL

トントンハウス 井藤さん、こんにちは。

スマートフォン版のナビゲーションについてです。
申し訳ございませんが、現状はこの3つのメニューが固定となっています。
この部分は、ログイン、ログアウトに関連して新規登録がマイページに代わります。そのため、現状は固定表示とさせていただいております。

今後、この部分を編集する方法については、検討させていただきます。

現状の代替案としては、キャッチフレーズ欄にhtmlタグを記入し、スタイルシートで表示位置をヘッダーのショップ名横にする方法となります。

下記の手順で作業ください。

STEP1 キャッチフレーズ欄にhtmlタグを追加
スマートフォン管理→画像とコメントの設定→キャッチフレーズ欄にhtmlタグを追加してください。

<div class="help_link"><a href="リンク先">ご利用案内</a></div>

STEP2 スタイルシートを編集する
スタイルシートの編集から下記の指定をコピーして貼り付けてください。
※貼り付け位置は、最下部にお願い致します。

現状見た目は、カートボタンと同様に正方形のオレンジ枠線ボタンとしています。

#copy {
position: relative;
min-height: 15px;
}

.help_link {
position: absolute;
top: 80px;
right: 60px;
width: 34px;
height: 34px;
border: 3px solid #FF9326;
text-align: center;
border-radius: 3px;
}

#copy .help_link A {
color: #000000;
font-size: 10px;
}

よろしくお願い致します。
井藤さま、コメントの名前の件は、お気になさらないでください。

Re 無題 投稿者:トントンハウス 井藤 No.15941 URL
添付画像

おちゃのこ刑部さん、こんにちは。

なるほど、その手がありました!
ちょっと手を加えて設置してみました。
購入しようか迷われている初めてのお客様をご利用案内に誘導したかったので、とても助かりました。
ありがとうございます。

記事を閉じる 定期おトク便のようなものの導入 投稿者:CHERRY'S No.15933 URL

お世話になります。

アマゾンや他のオンラインショップで良く見るようになった「定期おトク便」のようなものを導入したいと考えています。

ただ、ノウハウがなく、決済手段や販売方法、管理システムの点でどうしたらよいか決定打がなく、悩んでいます。おすすめの方法やアドバイスがありましたらご教授ください。

・決済手段
お客様が購入しやすいのは、カード決済で毎月引き落としだと思うのですが(ペイパルなら導入可能のようです)、それ以外の決済手段を普段使っている方にも広げるには、代引か後払いが無難でしょうか。たとえば毎月商品が送られてくるとして、毎月振込みは不便で継続性がないように思われます。
ただ、後2者は手数料分お得感が損なわれるような気もします。

・販売方法
定期便用の販売ページを作成するのが現実的ですが、既存の商品ページにその選択肢を入れるのは、現在のシステムでは難しいでしょうか。

・管理システム
こちらでエクセル・カレンダーなどで定期便の注文を管理し、リマインダーを作成し、お客様にご希望のお伺いメールが送られるようにしたいと考えています。
季節ものや消耗品の少なくなってきたものを伺い、希望商品プラス在庫処分品のセットにして、お値段的にかなりお得なセットにして毎月届くようにすれば、サプライズとお得感、ニーズの発掘にもなって良いと思うのですが、手間がかかりすぎると本末転倒なので、その折り合いをどの程度でつけたらよいのかと悩んでいます。
当店はペットグッズ店ですが、すでに海外のショップでは同様のサービスが導入されているのを見て、ぜひやってみたいと考えておりました。
(たとえば毎月、そのペット用にセレクトしたグッズが詰め込まれたボックスとかわいいカードが届きます)

試験的に、お正月の福袋として、予算を決めてご希望を送っていただき、こちらで商品をセレクトするサービスを販売したのですが、大変手間と時間がかかり、どこかでシステム化しないと難しいと思いました。反面、非常に人気が出て販売数も多く、ニーズの高さも実感しています。在庫処分も一気にできたので、こちらのメリットも高いものがあります。
ご希望によっては、次回発注時に、普段取り扱いのない商品を1点仕入れて対応することもできるので、ニーズ発掘とリピーター創出には大変有効ではありのですが・・・。

ぜひアドバイスをお願いいたします。





Re ご質問について 投稿者:おちゃのこ刑部 No.15935 URL

CHERRY'Sさん、こんにちは。

ご質問についてです。

・決済手段
クレジットカード以外に広げる場合、代引きか後払いのニーズが高いかと思います。

・販売方法
既存のページに定期購入の選択肢入れるには大幅な改良が必要となるため、申し訳ございませんが現在のシステムでは難しい状態です。

・管理システム
現在のシステムには定期購入管理のシステム化にご利用いただける機能がございません。
そのため、現状では、お考えのエクセル・カレンダーなどをご利用いただく方法になるかと思います。
なお、オーダーメイド機能をご利用いただくと、テキスト入力欄や選択肢を商品ページへ設置できますので、ご希望を伺う点にはご活用いただけます。
http://www.ocnk.net/webmanual/index.php?action=artikel&cat=3&id=38&artlang=ja

よろしくお願い致します。

Re ありがとうございます! 投稿者:CHERRY'S No.15940 URL

おちゃのこ刑部 さま

ご回答ありがとうございます!
なるほど、オーダーメイド機能設定、使えそうですね!
やはり決済は後払いと代引の活用にかかっていそうですね。

低予算なのに、カスタマイズ次第でかなり広い使い方ができるので
本当に助かっています。
ぜひ試してみますね。

新規登録

*必須項目

お名前
題名
コメント*
画像
※掲載可能な画像は、500kB以下のJPG・PNG・GIFファイルです。
アカウントID*
※半角英数字。記事にはショップのURLが表示されます。
ログインパスワード*
※管理画面ログイン時のパスワード

以下のフォームから自分の投稿記事を修正・削除することができます