過去記事（No8254）のリンク先が不明になっていますので、再度、ご教授ください。よろしくお願いします。

田中さん、こんにちは。

ボタンについてです。
背景画像を変更する場合は、下記の指定をご利用ください。
商品一覧ページの詳細を見るボタンの背景画像を変更できます。

/* 詳細を見るボタン */
.list_item_table .bot_b .detailinput {
background-image: url(画像URL);
}

背景色で指定される場合は、background-color: #FF0000;をご利用ください。文字サイズについてもfont-size: 14px;等を指定いただければ、変更できます。

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

お返事ありがとうございます。

スタイルシートを触るのは初めてですので、指示のようにスタイルシートの最下部に張り付けたのですがうまく反映されません。

どこが間違っているのでしょうか？

（画像URLは仮のものです。）

田中さん、こんにちは。

ボタンについてです。
現状、下記の画像が反映されております。
http://www.sun-ta.com/data/sun-ta/image/chiisai-sozai-53.gif

どのように表示されるご予定でしょうか。

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

ありがとうございました。上手くいきました。

反映までに少しの時間差があったみたいです。

みずえさん、こんにちは。

ダメ出し道場のお申込みは無料です。
診断をご希望の場合は「info@ocnk.net」まで、「『ダメ出し！道場』登場希望」とメールをください。

その際、現状のショップの実情や診断希望ポイント等を記載いただけますでしょうか。

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

中村さん、こんにちは。

位置についてです。
スタイルシート内の下記の指定を変更ください。

#pagetd {
padding-top: 66px;
}

↓変更後

#pagetd {
padding-top: 36px;
}

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

これですっきりしました。
ありがとうございました。

田中さん、こんにちは。

既に、商品ページもGoogle・Yahoo共にインデックスされているようですので、特に個別の登録作業は必要無いと思います。
同じ内容のページが複数ある場合にはペナルティとなる可能性があるため、システム側で自動的に検索エンジン側が推奨するタグを吐き出し、重複判定とならないようにしています。

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

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

MYCALLさん、こんにちは。

ヘッダーについてです。
メタタグ個別設定の各ページキャッチフレーズ欄に設定いただいたためです。
画像とコメントの設定→キャッチフレーズ欄に設定がある場合でもメタタグ個別設定に設定いただいた場合は、そちらが優先されます。

メタタグ個別設定のキャッチフレーズ欄にもよくあるご質問へのリンクを追加してください。

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

刑部さま

できました！
ありがとうございました！

中村さん、こんにちは。

ヘッダーについてです。
現状bodyに背景画像が設定されていませんので、ヘッダー用の横幅の大きい画像を用意いただき、bodyに設定してください。

例）
body {
background-image: url(image/new-top2.jpg);
background-position: center top;
background-repeat: no-repeat;
}

その際、#copyの背景画像指定を削除ください。

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

刑部様

できました。
いつもありがとうございます。

刑部様

お世話になります。
教えていただいた方法でウインドウいっぱいにヘッダー画像の表示はできましたがブラウザー枠を拡大・縮小すると画像がずれます。

固定方法を教えてください。

お手数をおかけいたしますがよろしくお願いいたします。

中村さん、こんにちは。

背景画像についてです。
bodyの背景画像を中央寄せで表示しておりますので、メインコンテンツ部分の横幅よりも画面サイズが狭くなりスクロールバーが表示される場合は、位置はずれます。

回避される場合は、以前のように#copyの背景画像にロゴ、木、電話番号部分を設定していただき、bodyの背景画像に左右フルスクリーン用の背景画像を設定していただく方法となります。

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

刑部様

ありがとうございました。
改善できました。
いつもすみません。

ナッツさん、こんにちは。

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

店長日記とWhat's New共通の指定となります。

.tdiary_news_photo,
.tdiary_news_photo img {
width: 280px;
}

トップページでの表示についてですが、途中で強制的に非表示にすることは可能です。
ただし、記事表示部分の縦幅を狭くして非表示にするため、ブラウザによっては、最終表示行の文字が半分で切れる可能性があります。
よろしければ、下記をお試しください。
heightが表示範囲となります。

.welcome_middle {
height: 200px;
overflow: hidden;
}

また、続きを読むについては、自由記入欄を利用する必要があります。
自由記入欄に下記のようなhtmlタグを設定してください。

<div class="diary_all"><a href="http://www.nut2deco.com/diary">続きはこちら</a></div>


この自由記入欄が右エリアの店長日記下部に配置されるように表示とレイアウトの設定から並び順を設定してください。

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

右エリア店長日記下部の枠内に続きはこちらというリンクを配置することができます。

.welcome_bottom {
height: 30px;
background-repeat: no-repeat;
background-position: -1px bottom;
border-left: 1px solid #CCCCCC;
}

.diary_all {
position: relative;
}

.diary_all A {
display: block;
position: absolute;
top: -35px;
left: 80px;
}

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

lunaさん、こんにちは。

テーブルタグについてです。
<tr>～</tr>の間に<td>～</td>を記載いただいておりますが、この<td>～</td>を追加していっていただければ、列を追加することができます。

下記の上部<table>タグをご参考にご覧ください。
この例では、2行2列となります。
htmlタグのレイアウト作成はご自身でお願い致します。
http://www.ocnk.net/faq/index.php?action=artikel&id=271

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

おちゃのこ刑部様
早速の返信、有難うございます。まさに、教えて頂いた、FAQを参考にしながらやっているのですが、この例の場合、２段２列にどうしてなっているのでしょう？
table widthが500で幅240の画像をtd～tdにいれているから自動的に２列になっていると理解していたので、今回、右エリアに、table widthを150として、幅20の画像を<td>で入れていけば自動的に7個位横に並ぶと思ったのに、画像が１つづつ縦に並んでしまうのです。
お願いです、何とか教えていただければ幸いです。
luna

lunaさん、こんにちは。

現状<tr>～</tr>間に一つの<td>～</td>しか挿入されていないため、1列となります。

下記の場合、現状の状態と同様で1列4行となります。
<table>
<tr>
<td>　</td>
</tr>
<tr>
<td>　</td>
</tr>
<tr>
<td>　</td>
</tr>
<tr>
<td>　</td>
</tr>
</table>

↓変更後

下記のように変更することで、2列2行となります。

<table>
<tr>
<td>　</td>
<td>　</td>
</tr>

<tr>
<td>　</td>
<td>　</td>
</tr>

</table>

この<tr>～</tr>間の<td>　</td>を下記のように変更すると、3列2行となります。
<tr>～</tr>を追加すると、行が増えます、
<td>　</td>を各<tr>～</tr>間に追加することで、列を増やすことができます。

<table>
<tr>
<td>　</td>
<td>　</td>
<td>　</td>
</tr>

<tr>
<td>　</td>
<td>　</td>
<td>　</td>
</tr>

</table>

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

おちゃのこ刑部様
早速の返信、有難うございます。
<tr> 行　<td>　データの関係を誤解してました。
とてもわかりやすくご指導頂き、有難うございます。
このBBSでとても助かっております。
おちゃのこネットは、ネット初心者でも安心して
ショップを始められると思います。

MYCALLさん、こんにちは。

表示されるマークについてです。
該当箇所の各html行末にスペースが入っておりますので、そちらを削除いただけますでしょうか。
他の箇所についてもスペースが入っている可能性がございますので、ご確認ください。

<div class="side_box" id="help_menu">
<a href="https://mycall.ocnk.net/contact/">
<img src="http://www.mycall.jp/data/mycall/product/organizer.png" width="160" height="176" alt="コール" border="0">　</a>
</div>
よろしくお願い致します。

ありがとうございます！
直りました！

匿名さん、こんにちは。

JavaScriptのご利用についてです。
jQueryについては、おちゃのこネットで利用しておりますので、アップロードいただく必要はございません。
ただし、スライドショーに利用する外部プラグインのJavaScriptファイルについては、おちゃのこネットにはアップロードすることはできませんので、外部サーバーにアップロードしていただき読み込む必要があります。
CSSについては、スタイルシートの編集から追加してください。

外部JavaScriptについては、動作保証ができませんので、サポート外となります。

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

匿名さん、こんにちは。

画像についてです。
スタイルシート内の下記指定箇所で、縦幅46pxの画像を背景に設定されているためです。
画像の縦幅を63pxに変更していただく必要があります。
●現状の指定画像
http://m-losier.ocnk.net/data/m-losier/image/logo.jpg

/*ショップ名ロゴ背景 */
.shoptext {
background-image: url(image/logo.jpg);
background-repeat: no-repeat;
}

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

ありがとうございます。
新しいlogo.jpgをアップした画像が元に戻ってました
再度、上げ直した結果表示出来ました。

ありがとうございます。

中村さん、こんにちは。

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

.menu li {
list-style-type: none;
}

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

刑部様

ありがとうございます。
修正できました。

いつもすみません。

刑部様

忙しいところ申し訳ありません。
キャッチフレーズの文章（<h1と<h2で括ってる文章）を
写真のような場所に移動したいのですが・・
可能でしょうか？

教えてください。
よろしくお願いします。

中村さん、こんにちは。

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

#copy h1,
#copy h2 {
position: absolute;
}

#copy h1 {
top: 40px;
left: 280px;
}

#copy h2 {
top: 55px;
left: 280px;
}

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

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

いつもすみません。

匿名さん、こんにちは。

ヘッダーについてです。
基本的には、Flashを利用することはできませんので、下記の手順でキャッチフレーズ欄にhtmlタグを挿入しスタイルシートで位置調整を行ってください。

-------------------------------------------------
STEP1　キャッチフレーズ欄にhtmlタグを挿入する
-------------------------------------------------
デザイン管理→画像とコメントの設定→キャッチフレーズ欄に下記のhtmlタグを記載してください。
Flash挿入部分には、ご自身でFlashを挿入してください。
※Flashは、基本的には、全ページに読み込まれますので、必ずhttps://共用ドメインURL/～のURLで記載してください。

<div class="flash_area">Flash挿入</div>

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

Flash表示用は、トップページのみFlashが表示されるようにする指定となります。
トップページ以外のページでは、通常の背景画像が表示されます。

画像表示高さは、トップページとそれ以外のページを別の高さにする指定となります。
height: 463px;をご自身で調整してください。

/* Flash表示用 */
.top_page_body #container {
background-image: none;
}

.flash_area {
position: absolute;
top: 160px;
left: 0px;
display: none;
}

.top_page_body .flash_area {
display: block;
}

/* 画像表示高さ */
/*トップページ以外 */
#header {
height: 463px;
}

/* トップページ */
.top_page_body #header {
height: 463px;
}

なお、各ページでトップ画像を変更されたい場合は、下記のFAQをご覧ください。
http://www.ocnk.net/faq/index.php?action=artikel&cat=281597&id=605&artlang=ja

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

上記の通り、キャッチフレーズにFLASHを設置し、
CSSを指定したのですが、うまくいきません。
（FLASHが表示されません）
何かが間違っているのでしょうか？

掲載画像のようにトップのみFLASH、第二階層はなにもなし、サイズもつめる
というふうにしたいのですが、イメージをご確認下さい。

匿名さん、こんにちは。

キャッチフレーズ欄のFlash挿入部分を下記のように変更してください。
<script language="JavaScript" type="text/javascript">
<!--
flwrite("https://m-losier.ocnk.net/data/m-losier/image/top.swf";, "880", "393");
//-->
</script>

※上記のtop.swf;"部分の「;」セミコロンは、削除してご利用ください。
おちゃのこ広場にて投稿時に自動的にセミコロンが追加されてしまいます。
ご了承くださいませ。

なお、現状下記のようにトップページのFlash表示部分の縦幅が狭くなっておりますので、下部のコンテンツに重なっています。
現状のFlashファイルの場合は、縦幅463pxに設定ください。

/* トップページ */
.top_page_body #header {
height: 70px;
}

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

ありがとうございました！
解決できました！

ちなみにフラッシュのサイズ（容量）も
画像と同じで200KB制限なのでしょうか？

そうなるとFLASHイメージは難しくなってきそうですが…

匿名さん、こんにちは。

容量制限についてです。
Flashについても容量は、200KBとなります。

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

吉川さん、こんにちは。

画像の変更についてです。
下記の指定が該当箇所の画像指定部分となります。

.ptitle {
width: 650px;
height: 22px;
background-image: url(img/page_title_bg.gif);
margin-top: 5px;
padding: 13px 0px 0px 20px;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
}

ただし、この指定は、トップページ以外の全ページタイトルの共通画像となっております。
カテゴリ一覧ページのみ変更されたい場合は、.categorylist_page_bodyを付けて指定ください。

.categorylist_page_body .ptitle {
内容
}


また、下記のように画像で表示することも可能です。
http://www.ocnk.net/faq/index.php?action=artikel&cat=281597&id=554&artlang=ja

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

吉川さん、こんにちは。

おすすめ商品のタイトルについてです。
2カラムでご利用の場合は、.style1_topの前に#column2が必要となります。

下記のスタイルシートが現状は適用されている状態となりますので、下記の指定をコピーしていただき、スタイルシートの最下部に貼り付け後、編集を行ってください。

#column2 .style1_top {
width: auto;
height: 27px;
background-image: url(img/top_title_bg_b.gif);
margin: 0px;
padding: 13px 0px 0px 20px;
}

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

匿名さん、こんにちは。

各カラムの幅についてです。
基本的には、右のメインエリアが700pxより小さくすることができないため、左エリアを広げて、右メインエリアを狭める場合は、複雑な設定が必要となります。

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

下記はトップページのみ調整した指定となります。
右のメインエリアについても、初期では670pxで幅指定を行っておりますので、各幅指定箇所を狭くしております。


#container {
background-position: 15px 60px;
}

#copy {
margin-left: 15px;
}

#column2 .center_box {
width: 640px;
margin: 0px 0px 15px;
padding: 0px;
}

#lefttd {
padding-left: 15px;
}

#column2 #centertd {
width: 640px;
padding: 15px 0px 0px 45px;
}

#column2 .style1_middle,
#column2 .style2_middle {
width: 620px;
background-image: url(img/top_middle_bg_b.gif);
margin: 0px;
padding: 0px 9px;
}

#column2 .style1_table {
width: 608px;
margin: 0px;
padding: 0px;
}

#column2 .style2_table,
#column2 .style2_rank_table {
width: 598px;
margin: 0px;
padding: 0px;
}

#column2 .style2_rank_table td {
width: 152px;
}

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

解決出来ました！ありがとうございます！

すいません、トップページ以外のページを確認したら、
幅が反映されていません。

全ページ合わせたいのですが、どうしたら良いでしょうか？

匿名さん、こんにちは。

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

#pagemain {
padding-left: 45px;
}

#pan {
padding-left: 45px;
}

.ptitle {
width: 640px;
}

.pmiddle {
width: 640px;
padding: 1px 0px;
}

.pbottom {
width: 630px;
}

/* 商品詳細ページ用 */
.detail_table_middle {
padding: 5px;
margin: 0px 5px;
}

/* 商品一覧ページ用 */
.list_table_middle {
padding: 5px;
margin: 0px 5px;
}

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

ひがさん、こんにちは。

商品詳細ページにつきましては、管理画面の「商品ページ設定」にある「facebook投稿表示」欄のいいね！ボタンを「表示する」にしていただくと、<html>タグにOGPのxmlnsが自動的に追加され、<header>内にもOGPのメタタグが自動的に追加されます。

現在のところ、商品詳細ページ以外につきましては、ページごとにOGPの指定を入れることはできません。

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

匿名さん、こんにちは。

背景についてです。
2カラムでご利用の場合は、別途2カラム用に横幅の広い画像を指定しておりますので、その画像を非表示に設定する必要があります。

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

#column2 .welcome_top,
#column2 .welcome_bottom {
background-image: none;
}

2カラム利用時のスタイルシート編集については、下記のFAQもご覧ください。
http://www.ocnk.net/faq/index.php?action=artikel&cat=281583&id=644&artlang=ja

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

解決出来ました！ありがとうございます！

飯田さん、こんにちは。

スマートフォン版についてです。
特定商取引法ページのリストタグについてですが、お問い合わせフォームにもご質問をいただいているかと思います。
同様のご回答となりますが、記載させていただきます。

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

.legal_page_body .secdata li {
list-style-type: disc;
padding-right: 30px;
}

.legal_page_body .secdata ul {
padding-left: 25px;
}

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

仕事納め直前にもかかわらず、早々のご回答ありがとうございました。

おちゃのこスタッフの皆様、よいお年をお迎え下さいませ。

リョウさん、こんにちは。

お問い合わせについてです。
既存のお問い合わせリンクを利用いただいておりますので、問題はございません。

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

おちゃのこ刑部 様

早速ご返答いただき、ありがとうございました。

助かりました。

今後とも宜しくお願い致します。