CSSデザイン設定
CSSデザイン設定では、CSSファイルの追加や更新、削除ができます。
CSSファイルを簡単に、直接編集することが可能です。
設定方法
機能詳細
以下の画像がCSSデザイン設定の編集画面です。
CSSデザイン設定は、「ファイル編集エリア」と「CSS編集エリア」の２つのエリアに分かれます。
■ファイル編集エリア
CSSファイルの指定やファイルの追加、フォルダの作成、削除ができます。
○フォルダツリー
編集対象のCSSファイルを選択できます。
○編集サイト
編集対象のサイト種別を指定します。（PC・SP）
○対象
選択した編集対象のCSSファイルのパスが表示されます。
○ファイル作成
フォルダツリーで選択中のフォルダに、新規CSSファイルを作成します。
○ファイル作成
フォルダツリーで選択中のフォルダに、新規フォルダを作成します。
○削除
フォルダツリーで選択中のファイル及びフォルダを削除します。
○コピー新規登録する
現在選択・表示しているCSSと同一の内容で、新規CSSを開きます。
※新規登録と同様です。
○リネーム（ボタン）
ファイル名を書き換えてリネームボタンを押すと、ファイルがリネームされます。
○全ページ・パーツダウンロード
サーバにアップされているデザインファイルをダウンロードします。（Zip形式で圧縮）
■CSS編集エリア
CSSファイルの編集時に利用します。
○CSS編集領域
CSSファイルの内容を入力します。
○更新する
編集した内容で保存します。
デザインの編集３：CSS/その他機能
編集方法
CSSデザイン設定
CSSデザイン設定は CMS＞デザイン管理＞CSSデザイン設定にあります。
w2Commerceで標準で用意しているCSSの確認、編集ができます。
また、新規にCSSを作成し、同様に確認、編集が可能です。
○スマートフォン対応
編集画面のデフォルトはPCサイトのコンテンツですがスマートフォンのコンテンツを編集する場合は
編集サイトを選択する箇所で「SmartPhone用サイト」を選択すると編集することができます。
○編集対象コンテンツ
・フォルダ作成（ディレクトリ作成）
作成したCSSを格納するディレクトリを作成、リネームすることができます。
①フォルダ作成
②フォルダリネーム
○編集方法
下記の方法で編集します。
・ファイル編集
選択したCSSファイルの中身を編集することができます。
1.CSSファイルのアップロードおよび、ディレクトリの移動はコンテンツマネージャーから行ってください。
2.編集内容を更新すると即時反映します。そのため複数のCSSを段階的に編集すると一時的にデザインが崩れます。
3.フォルダを削除した場合、配下のファイルも削除されます。
また、削除したファイルは元に戻すことができませんのであらかじめご了承ください。
その他機能
○デザインファイルのダウンロード
PC/スマートフォンサイトのデザインファイル内容をダウンロードすることが可能です。
デザインファイルをダウンロードする方法は2通りあります。
※PC/スマートフォンサイトページのバックアップ、及びテスト環境から本番環境への更新に利用する機能です。
※デグレーションを防ぐために、定期的にファイルのバックアップを行うことをお勧めします。
①ページ管理・パーツ管理・CSSデザイン設定の各メニューからダウンロードする
各メニューにて編集可能なファイルをダウンロードする場合は、各メニューからダウンロードします。
各メニューの画面上部の「全ページ・パーツダウンロード」リンクをクリックすることでダウンロードすることが可能です。
※ダウンロード対象はCMS機能に対応しているファイルのみになります
②コンテンツマネージャーからダウンロードする
デザインファイル全てをダウンロードしたい場合、コンテンツマネージャーからダウンロードを行う必要があります。
○デザインファイルの復元方法
ページ管理・パーツ管理・CSSデザイン設定の各メニューから取得したバックアップファイルの復元方法はコンテンツマネージャーから可能です。
PCサイトのROOTを選択し、バックアップファイルを選択してファイルアップロードボタンをクリックすることで可能です。
CSSデザイン設定
CSSデザイン設定では、CSSファイルの追加や更新、削除ができます。
CSSデザイン設定は、下記の２つのエリアに分かれます。
利用方法
ファイル編集エリア
CSSファイルの指定やファイルの追加、フォルダの作成、削除ができます。
○フォルダツリー
編集対象のCSSファイルを選択できます。
○編集サイト
編集対象のサイト種別を指定します。（PCサイト、SmartPhone用サイト）
※SmartPhoneの種別はSmartPhoneオプションがONの場合に表示されます。
○拡大・縮小
編集対象のページを表示するエリアを拡大・縮小することができます。
最大サイズ、最小サイズ、1回に拡大・縮小するサイズが決まっています。
※上記サイズはｗ２側の設定で変更が可能です。
○対象
選択した編集対象のCSSファイルのパスが表示されます。
○ファイル作成
フォルダツリーで選択中のフォルダに、新規CSSファイルを作成します。
○ファイル作成
フォルダツリーで選択中のフォルダに、新規フォルダを作成します。
○削除
フォルダツリーで選択中のファイル及びフォルダを削除します。
○コピー新規登録する
現在選択・表示しているCSSと同一の内容で、新規CSSを開きます。
※新規登録と同様です。
○リネーム（ボタン）
ファイル名を書き換えてリネームボタンを押すと、ファイルがリネームされます。
○全ページ・パーツダウンロード
サーバにアップされているデザインファイルをダウンロードします。（Zip形式で圧縮）
CSS編集エリア
CSSファイルの編集時に利用します。
○CSS編集領域
CSSファイルの内容を入力します。
○更新する
編集した内容で保存します。
Cloudflare（クラウドフレア）とは？仕組やメリットをわかりやすく解説！
クラウドフレアはWebサイトへ不正攻撃対策とサイト表示速度アップを両立できるCDNサービスです。
EC事業ご担当者様の中には
○画像やデータが増えてきてサイトが重い
○不正攻撃対策をしたいけどコスパが心配で導入に踏み切れない
といった課題感をお持ちの方も多数いらっしゃるかと思いますが、
クラウドフレアを導入することでこれらのお悩みを解決することができます！
本記事ではクラウドフレアの仕組やメリットについて詳しく解説しています。
上記のようなお悩みをお持ちのご担当者様は是非ご一読ください。
目次
クラウドフレアの仕組やメリットについて解説！
CDNとは
クラウドフレアも該当するCDNとは「Content Delivery Network」の略称で、
端的に説明するとウェブサイトへのリクエストに対する処理を最適化するための仕組みです。
CDNはユーザーがWebサイト（サーバー）にアクセスする際のユーザーとWebサーバーの間に設置されます。
CDN利用時のイメージ図
CDNはリクエストされた情報をキャッシュとして保持し、また負荷分散の機能も持ち合わせているので
・直近リクエストされた情報を素早く返すことができる
・瞬間的にアクセス数が急増しても負荷分散を実現することができる
という点で、高いページ表示速度とアクセス急増への対策が求められるECサイトにとって最適なサービスと言えます。
クラウドフレアのメリット
サイト表示速度の改善
クラウドフレアは日本国内だけでなく世界中にサーバーを設置しているため
世界各地のユーザーからのアクセスに対し、物理的に近いサーバーからサイト表示することができます。
さらに、ウェブサイト内のデータをキャッシュ化し、画像やJS、CSSを軽量化/圧縮することもできるため、
サイトの表示スピードの高速化を実現することが可能です。
表示速度が向上することによって、コンバージョン率やユーザー満足度の向上が狙えるだけでなく
画像軽量化によるSEO評価向上も期待できます。
セキュリティ対策（WAF）
WAF（Web Application Firewall）が標準搭載されていることもクラウドフレアのメリットのひとつです。
WAFはWebサイトの脆弱性に対する攻撃やbotによる攻撃などのサイバー攻撃からWebサイトを守るセキュリティの1つです。
進化し続けるサイバー攻撃から顧客情報をはじめとした資産を守るためにWAFの導入が推奨されていますが、
・技術的にもコスト的にもWAFの導入ハードルが高い
・導入後も継続的な保守/運用に大きなコストかかる
という課題があります。
クラウドフレアであれば、WAFが標準搭載されているので難しい設定をする必要はありません。
サイトパフォーマンスを改善するついでに、さまざまな攻撃からWebサイトを保護してくれます。
ページ管理
フロントのページ全体のレイアウトやデザインの確認・編集・追加を行うことができます。
使い方
ページ一覧
ページ管理の一覧画面は、以下の画像のとおりです。
キーワード（ページタイトル・ファイル名）、グループ、タイプによる検索を行うことができます。
「新規作成」ボタンより、ページの新規作成ができます。
新規作成・編集画面
■新規登録/編集画面
①管理用ページ名
管理用のタイトルとなります。エンドユーザには表示されません。
②公開状態
公開 ：エンドユーザは閲覧可能となります。
非公開 ：エンドユーザは閲覧不可となります。
※公開範囲設定より優先されます。
③グループ設定
管理用のグループとなります。
④URLの編集
URLを編集することができます。
※カスタムページのみ
※すでに存在しているファイルを指定することはできません
■詳細メニュー
⑤公開範囲設定
公開期間 ：ページを公開する期間
公開会員ランク ：ページを閲覧できる会員ランク
公開ターゲットリスト：ページを閲覧できるユーザーをターゲットリストで指定
※デフォルトは全ユーザー公開設定となっております。
※各条件をすべて満たしているユーザーのみ閲覧できます。
※状態が「非公開」となっている場合はユーザーは閲覧することはできません。
⑥プレビュー
編集中の内容をブラウザ上で確認できます。
⑦更新
編集内容をページに反映します。
※「更新」ボタンを押し、更新完了のインフォメーションが表示された時点で該当ページに編集内容が反映されます。
※更新完了のインフォメーションが表示されない場合、編集内容はページに反映されていません。
⑧詳細バー
– 複製して新規作成する ※カスタムページのみ
– 削除する ※カスタムページのみ
– 復元する
– リセットする
⑨SEOディスクリプション
ページのディスクリプションを設定することができます。
※ディスクリプション：ページ説明文
レイアウト/コンテンツ編集
[PC][SP]それぞれでパーツの配置、コンテンツの編集を行うことができます。レイアウト編集では、ドラッグ&ドロップで簡単にページデザインができ、
コンテンツ編集では、HTML/CSSを用いて詳細なデザインが可能です。
⑩PC及びSPのサイト表示
例)
SP使用しないに選択されている場合、本ページをPC端末及びスマフォ端末で閲覧した際に常にPCページが表示されます。
※PC及びスマフォの両方を使用しないにすることはできません。
※本ページを利用しない場合は状態を「非公開」に設定してください。
⑪HTMLページタイトル
ブラウザで本ページを確認した際にタブ等に表示されるタイトル名となります。
⑫レイアウト編集
レイアウト編集では、ページのデザインをドラッグ&ドロップで簡単に実施可能です。
削除したいパーツをクリックし、×ボタンを押すことでパーツを削除できます。
※ドラッグアンドドロップで配置した状態（赤枠がパーツ管理で作成したパーツです。）
右端にパーツが表示されるので、お好きな箇所に配置ください。
⑬コンテンツ編集
HTMLにて、より詳細なページデザインを実施できます。
編集できる領域は、metaタグ等を記載するhead部分およびページのコンテンツ部分です。
運用例
■設定手順
1.「新規作成」ボタンを選択
2.パーツ一覧の中から利用するパーツを配置
3.ページ内に表示するコンテンツ内容をコードエディターで編集
4.本ページの公開範囲(公開日時・公開会員ランク・公開ターゲットリスト)を設定
公開状態を「公開」に設定
5.プレビューで編集内容を確認し「更新」ボタンを選択
6.エンドユーザー閲覧
※ステップ2~4は順不同
※デザイン等を大規模に調整する場合はページを一度「非公開」に変更して実施することをお勧めします
影響範囲
w2Commerceフロント（PC・スマフォ）
w2Commerce管理画面（CMS）
VerUP後ステータス
機能オン、設定済み
【導入時向け動画】１４．各種ページデザイン（ページ管理・パーツ管理）
本動画の概要
動画のアジェンダ
１．ページ管理機能とパーツ管理機能の概要
２．ページ管理機能やパーツ管理機能を使ったデザインを編集方法
関連機能
