こんにちは、おちゃのこ伊藤です。ようやく長かった梅雨も明けて、いよいよ夏本番ですね。しかし、さすがに暑い！そこへ行くと、子供はいいなぁ、夏休みですもんね、プールでおおはしゃぎ・・かと思いきや、朝早くから塾通いしてたりして。普通に学校行ってる方がいいのかもしれません。さ〜て、我々は暑さに負けずにお仕事しましょう！

そのサイトを構成する複数ファイルに、特定のコンセプトに基づいた共通デザインを適用できる

簡単に言うと、サイト全体のイメージが統一されるということ。デザイン面までHTMLでコツコツ作っていると、手作業だけに必ずどこかで雰囲気の違うページを紛れ込ませてしまいますが、スタイルシートを使えば、そういうことがほぼなくなります。 また、スタイルシート専用の言語を使うことで、かなりの部分まできめ細かく表現することが可能です。

複数のページのスタイルを一括管理でき、メンテナンスの効率が大幅に向上する

例えば、フォントの色を指定する場合、すべてのページに、いちいち〜 と指定するのはとてつもなく面倒。それより、スタイルシートで指定して、すべてのページに適用させた方がはるかに作業性がよくなり、漏れもなくなります。 また、スタイルシートの内容を変更することで、そのスタイルシートに対応するすべてのページの「見た目」を一気に変更することも可能です。これは楽チンです。

HTMLがすっきりするので、ページの意味・内容が明確になる

ネットでは、ページを自動収集して情報データベース（検索エンジンなど）を作成したり、視覚障害者が音声ブラウザでページを読む場合など、必要なのはページの意味・内容であって、「見た目」は二の次という場合もあります。スタイルシートで「見た目」を定義することで、HTMLには不要な情報を書き込む必要がなくなり、読み込む際も余分な作業がなくなります。結果、SEO（検索エンジン対策）にも効果があると考えられています。

スタイルシートの編集画面

おちゃのこネットの管理画面→デザイン管理→スタイルシートの編集画面に進んで下さい。

現在ご利用中のテンプレートが表示されますので、新規に名前をつけて下さい。

編集する部分を見つける

スタイルシートが左記のように表示されます。今回は背景画像を編集しますので、bodyという記載のある場所までスクロールして下さい。

body {
background-image: url(img/bg.gif);
word-break: break-all;
margin: 10px 0px;
padding: 0px;
font-size: 12px;
color: #666666;
line-height: 140%;
}

スタイルシートを編集する

背景画像を編集しますので、background-imageという行を編集します。
下記のようにurl内の記載をご自身で作成さた画像URLに変更して下さい。

※画像ファイルは別途画像専用管理画面からアップロードして下さい。
※スタイルシート内での画像ファイルURL記載は、絶対パス(http://〜)ではなく相対パス(image/画像ファイル名.gif)で記載して下さい。SSL保護下のページ(カート内、お問い合わせ)ページでセキュリティ警告が表示されます。

プレビューし登録する

スタイルシートの編集には、プレビュー機能がございます(※プレビューできるのは、トップページのみです)。
登録する前にどのように変更されたかを確認することができますので、是非ご利用下さい。

プレビューで確認後、ページ最下部の「登録処理を完了する」ボタンをクリックして下さい。
これで編集は完了です。
下記に編集前と編集後のページサンプルを表示しておりますのでご確認下さい。