ショップサーブで使えるCSSテクニック
1. 表示されている箇所を非表示にする
2. h3 などのタイトル部分の背景を好みのものに変更する
3. ページ全体を中央寄せにする
4. 新着情報をインラインフレームを使わずに表示する
5. カート画面に移動したときにセキュリティーアラートが出ないようにする
1. 表示されている箇所を非表示にする
例えばヘッダー部分の h1 とか h2 、その他の部分を非表示にしたい場合、
非表示したいIDとかクラスに以下のプロパティを追加します。
display: none;2. h3 などのタイトル部分の背景を好みのものに変更する
もしかしたらお使いのテーマによりクラスが違うかもしれませんが、
テーマのスタイルシートの中から .title1 .title2 .title3 という部分を探し
その中の background のスタイル部分の画像を切り替えます。
デフォルトでは↓ のような感じ
background: url(<EBBlogThemeImgBase>/title_bar02.gif) repeat;上記の title_bar02.gif っていうのを変更します。
画像を管理画面からアップしてから、新しいものに入れ替えます。
注意するべき点としては、他の修正の面倒がないので、
デフォルトのものと同じ大きさで作ることをお勧めします。
3. ページ全体を中央寄せにする
ショップサーブのデフォルトではページ全体が左寄せになっているので、
それを中央寄せにしたい時の方法です。
margin: 0px atuo;上記を
body {
}上記のbodyタグの間に追加するだけでOKです。
4. 新着情報をインラインフレームを使わずに表示する
新着情報などをセンターエリアとかサイドエリアに表示したい場合、
以下のようなスタイルをお使いのテーマに追加して
div.sample {
text-align: left; /* テキストの配置要素 */
overflow: auto; /* 要素内の横幅・高さがはみ出した場合に自動的にスクロールバーを表示 */
font-size: 12px; /* フォントサイズ */
width: 167px; /* 要素の横幅 */
height: 120px; /* 要素の高さ */
line-height: 125%; /* 行間調節 */
margin: 0 0 10px 0; /* 要素の外側の位置調節 */
padding: 5px 0; /* 要素の内側の位置調節 */
}※上記の数値は適宜カスタムしてください。
以下のように表示したいエリアに記述
<div class="sample">
ここに更新情報を表示
</div>5. カート画面に移動したときにセキュリティーアラートが出ないようにする
画像台帳に sample.gif という画像をアップロードした場合
画像表示のアドレスを以下のように変更
/USERTHEMEIMG/vol1/ショップサーブアカウントID/sample.gifもうひとつの方法として、ssl が使える別サーバーに画像をアップして、
そこから呼び出すとセキュリティーアラートは表示されなくなります。
： ： このページの内容と関連がある記事 ： ：
- WP-PageNavi を使わずにナビゲーション表示 備忘録
- サーチフォームのカスタマイズ（ショップサーブ編）
- ショートハンド
- 背景ではなく単純に特定の画像に適用するCSS Sprite
- http と https で同じスクリプトを使い分ける!?
