操作マニュアル(スタイル編)

テーマデザイナーズを使った、テーマ用のスタイル作成、変更作業の流れをご紹介致します。

スタイルとは、テーマのデザインを構成する部品の様なものです。

スタイルの新規作成

作成するスタイルカテゴリーの選択

※スタイルカテゴリーとは、「カラーテーブル」、「グローバルメニュー」、「見出し1」と言った、テーマ作成に必要な全てのスタイルの分類を指します。

この中から新たに作成したいスタイルカテゴリーを選び、スタイルカテゴリー名をクリックます。(※図1-1

Fotolia_70326610_XS
図1-1

作成するスタイルのベーススタイルを選択

⇒現在使用出来るスタイルが表示されます。

スタイルデータのリストの中から、イメージに近いベースとなるスタイルを選び、「コピーして作成」をクリックします。(※図1-2

Fotolia_70326610_XS
図1-2

スタイルデータの編集

⇒ベーススタイルのデザインを引き継いだ状態で、編集画面に遷移します。

3種類のスタイルシートの編集を行います。「css_pc」、「css_tablet」、「css_smart」

「htmlを表示」をクリックすると、そのスタイルの骨組みとなる「html」が表示されます。(※図1-3

基本的には、この「html」にスタイルを適応する要領で、「css」を編集して行きます。また、テーマデザイナーズで使用するスタイルには、ある一定の簡単なルールに則って編集していただく必要があります。スタイルの編集ルールは、こちらをご確認ください。

Fotolia_70326610_XS
図1-3

「css_pc」エリアでは、よく使うスタイルコードを登録して、再利用する事が出来ます。

また、色の指定に「#fff」ではなく、テーマデザイナーズ専用の「貼り付けカラーコード(例.#maincolor)」(※図1-4)を使用する事で、ベースカラーが変わると自動的に色も変わる、汎用的なスタイルデータが作成出来ます。

Fotolia_70326610_XS
図1-4

スタイルデータの確認

「preview」をクリックすると、現時点でのスタイルデータのデザインが「プレビューエリア」に表示され確認が出来ます。(※図1-5

※「css_tablet」、「css_smart」のデザインは、編集画面などでは確認できません。

Fotolia_70326610_XS
図1-5

スタイルデータの保存

作成中のスタイルデータを保存したい場合、「スタイル名(必須)」、「公開フラグ」を指定して、「regist」ボタンをクリックします。(※図1-6

Fotolia_70326610_XS
図1-6

既存スタイルの編集

編集したいスタイルの選択

「テーマ作成ページ」の編集したいスタイルがあるスタイルカテゴリーをクリックします。

⇒現在使用できるスタイルが表示されます。

検索メニューの「MYデータのみ表示」をチェックして、「Fotolia_70326610_XS」をします。(※図2-1

Fotolia_70326610_XS
図2-1

⇒自分が作成したテーマのみが表示されます。

リストの中から編集したいスタイルの「編集」をクリックします。(※図2-2

その後の流れは、スタイルの新規作成の「3」と同じになります。

Fotolia_70326610_XS
図2-2

既存スタイルの削除

「テーマ作成ページ」の削除したいスタイルがあるスタイルカテゴリーをクリックします。

⇒現在使用できるスタイルが表示されます。

検索メニューの「MYデータのみ表示」をチェックして、「Fotolia_70326610_XS」をします。(※図3-1

Fotolia_70326610_XS
図3-1

⇒自分が作成したテーマのみが表示されます。

リストの中から削除したいテーマの「削除」をクリックします。(※図3-2

「はい」か「いいえ」を聞かれたら「はい」をクリックします。

⇒テーマが削除されます。

Fotolia_70326610_XS
図3-2

スタイルの編集ルール

テーマデザイナーズに掲載されているスタイルデータは、基本的なcssのルールに則って作成されていますが、セレクタの指定方法だけ、独自のルールがあります。

このルールに従っていただかないと、テーマデザイナーズ内でのスタイルが正常に反映されなかったり、他のスタイルの表示に悪影響を及ぼす恐れがあります。

以下にスタイルカテゴリーごとのセレクタ指定ルールを掲載致します。

表1.スタイルカテゴリーセレクタ指定表

スタイルカテゴリー 指定セレクタ
レイアウト 「.layout」を常に前につける
ジェネラルスタイル 「#generalStyle」を常に前につける
ヘッダーレイアウト 「#header」を常に前につける
グローバルメニュー 「#mainNav」を常に前につける

フロントページ

「#frontPage」を常に前につける
固定ページ 「#fixPage」を常に前につける
単一ページ 「#singlePage」を常に前につける
一覧ページ 「#archivePage」を常に前につける

ヘッダーウィジェット、ライトウィジェット
レフトウィジェット、センターウィジェット
リストスタイル、コピーライトウィジェット
フッターウィジェット

「ul.listStyle」を常に前につける
見出し1、見出し2、見出し3、見出し4 「.midashi」を常に前につける
テーブルスタイル 「table.tableStyle」を常に前につける
ボタンスタイル 「.buttonStyle」を常に前につける
ページネーション 「.pagenation」を常に前につける
検索スタイル 「#searchStyle{」を常に前につける
テーブルスタイル 「table.tableStyle」を常に前につける
カレンダースタイル 「.calendarStyle」を常に前につける
フッタースタイル 「#footer」を常に前につける

※standard premium のスタイルデータを参考にしてください