テーマ・スタイルマニュアル

テーマ・スタイルの管理

editor-tool.jpg

編集者専用メニュー

編集者以上の権限でログインすると、「編集者専用」メニューがサイドバーに表示されます。最初に「テーマ変更」メニュー、続いて「スタイル変更」「スタイル編集」メニューが表示されています。また画像ファイルを単独でアップロードできる「画像アップロード」メニューや「ファイルメンテナンス」、表作成の「テーブル」メニューも、ここに表示されますから、この中から必要な操作を選択します。

テーマとは

ek-MyWEBにおいて「テーマ」とはWebページの外観を構成する要素の基本形式を決定するテンプレートのセットで、ヘッダー画像の有無、メニューバーの有無、サイドバーの有無とカラム数(1・2・3)、それから各要素の表示順を意味し、具体的にはフォルダ名を示します。そして少なくとも1個のスタイルシート(default.css)を含みます。ek-MyWEBの「テーマ」はWordPressの「テーマ」を拡張した考え方で、ひとつのテーマの中で画像素材などを共有する複数のスタイルシートを切り替えて、レイアウトとカラーの異なるバージョンを混在させることができます。標準添付のdefault(バージョン2.0からはnew-default)以外のテーマは、当サイトのサポートページからダウンロードして、サイトの「./ek-Styles/」ディレクトリの下にアップロードします。ただしテーマを変更するとサイドバーも変わり、独自設定も無効となってしまうので、基本テーマを決定したあとのデザインの変更は、なるべくスタイルシートの編集で対応することをお勧めします。

theme-change.jpg

テーマの変更

システムで選択可能なテーマの一覧表が表示されます。インストール直後のときはデフォルトテーマだけですが、オプションテーマを追加すれば一覧表形式で表示されます。テーマのデフォルトスタイルのサムネイル画像(default.png)が添付されていれば、その画像が表示されます。またテーマ名をクリックすると、別ウインドウでトップページをプレビューできます。

左のテーマに変更する」ボタンをクリックして、トップページに戻ってから、ブラウザで「再表示」させると、テーマの変更結果を確認できます。それから「スタイルの変更」へ進むことができます。(バージョン1.2より)

*テーマを変更するとき、テーマに属するスタイルシート(複数)の構成も変わってしまうので、直前に設定していたものと同じファイル名のスタイルシートが存在しないと、スタイルが全く適用されない表示になってしまうことがあります。そのためテーマを変更する前に、全てのテーマに共通して存在する「default.css」スタイルに一旦戻してから、その後にテーマの変更を行うようにしてください。

スタイルとは

ek-MyWEBにおいて「スタイル」とは、同じ「テーマ」の中での、レイアウトやカラーのバリエーションを意味し、具体的にはCSS(スタイルシート)ファイル名を示します。サイドバーの左右などテーマを構成する要素の位置関係のほか、背景画像、テキストの色など、ほとんどスタイルシートを編集することで変更できます。

*正式なスタイルでない部品的なCSSファイルは、ファイル名の先頭に「_」(アンダーバー)をつけてください。すると一覧から除外できます。

style-change.jpg

スタイルの変更

選択されているテーマのディレクトリに存在する、スタイルの一覧表が表示されます。サムネイル画像がアップロードされていれば、その画像が表示されます。またcssファイル名をクリックすると、別ウインドウでトップページをプレビューできます。

左のスタイルに変更する」ボタンをクリックして、トップページに戻ってから、ブラウザで「再表示」させると、スタイルの変更結果を確認できます。このとき単に元のページにもどるだけでは、ブラウザのキャッシュが効いていて画面が変わらないことがあるので、注意してください。

*カラーバリエーションのスタイルを選択した場合、「Gray」を含んだ名前の親ファイルがないと正常に表示されないことがあります。なお本サイトのメニューにある「テーマバンク」で使われている選択表示プログラムは、「テーマ・スタイル変更」プログラムから変更機能を外したものです。

テーマとスタイルを固定する方法

通常は「テーマ・スタイルの変更」で選択されたディレクトリ名とスタイルシート名は、データベース内に記録されます。しかし設定ファイル(ek-config.php)に、次のように直接記述することで、いずれかあるいは双方を固定することが可能です。ek-MyWEBはサブディレクトリにもインストールできますが、この方法によって親ディレクトリとデータベースを共有しながら、異なるテーマとスタイルシートを適用することができます。なお記述したスタイルシートが存在しない場合は、デフォルト(default.css)が適用されますが、テーマディレクトリ名を誤るとスタイルが適用されない、文字と添付画像だけの画面となります。

$ek_StyleDir = './ek-Styles/default/';
$ek_StyleCss = 'myBlue1.css';

ジャンルごとにテーマ・スタイルを設定する方法

カテゴリー個別にテーマ・スタイルを設定することはできませんが、「男性向け商品」と「女性向け商品」などのように、ジャンル(大まかなメニュー分類)単位なら、ジャンルごとにサブディレクトリを設置してek-MyWEBをインストールします。そして同じデータベースを共有するとともに、適当なテーマ・スタイルを固定します。この場合当然ですが、テーマのサイドバー(ek-Sidebar.php)の、メニュー表示を調整する必要があります。

style-edit.jpg

スタイルの編集

現在適用しているスタイルシート(CSSファイル)の内容を、簡易テキストエディタで編集して、別のスタイルシートとして保存できます。表示される警告は、現在のCSSファイルのパーミッションが、書き込み禁止であることを示しています。事前に書き込み可能に設定しておけば、直接そのファイルの中身を書き換えることができます。

簡易テキストエディタによる編集は、記述を誤ると画面がくずれてしまう危険を伴うので、本格的なスタイルシートの編集には不向きですが、バックグラウンドの画像や色指定の変更などには、手軽に対応できます。

インポートによるスタイルの編集

バージョン1.2から基本スタイルが共通なカラーバリエーションは、親ファイルをインポート(取り込み)する形式で記述されています。この方がカラーの変更箇所だけを記述すればよいので、編集が楽でリスクも少なくて済みます。また要素の位置調整などは、親ファイルを編集することで全てのカラーバリエーションに影響を与えることができます。

*このサイトで提供されているオプションのテーマ・スタイルキットに含まれているスタイルシートのうち、サイズの小さなCSSファイルは親ファイルをインポートしなければ正常に表示できないので、サイズの大きな親ファイルを必ず同時にアップロードしてください。

インポート元のスタイルの編集

スタイル編集画面の最下部にある「ファイル名を指定して編集する」は、現在適用されているスタイルシート以外のファイルを編集するためのものですが、インポート元の親ファイルを編集する必要があるときは、ここで編集対象を切り換えることができます。(この機能はバージョン1.2_RC3からです)

upload-only.jpg

画像アップロード

スタイルシートで用いる画像素材(GIFおよびPNG)は、圧縮操作をせずに、直接スタイルシート用のディレクトリ、またはサムネイル用のディレクトリへアップロードできます。ヘッダーなどに配置する大きいサイズJPEGファイル、Flashファイル、PDFファイルも、ここからアップロードできます。

*アップロードマニュアル」を併せてご覧ください。


独自テーマ・スタイルの作成

現在のテーマ・スタイルを利用する方法

独自のテーマを作成するには、「テンプレートの編集」から現在のテーマを構成しているヘッダーファイル、フッターファイル、サイドバーファイルを編集します。さらに独自のスタイルを作成するには、現在のスタイルシートの中から、比較的似ているイメージのスタイルシートを選び、その編集画面からCSSコードを「コピー」して手元のパソコンに保存します。それからスタイルシートの特徴がよく出ているページ(HOMEページなど)を表示して、そのHTMLソースをブラウザ(Firefox3以上がおすすめ)から取得して、これもパソコンへ保存します。画像はブラウザ画面から「イメージを保存」で取得できます。それからDreamweaverなど、スタイルシートの編集に適したホームページ作成ソフトでスタイルシートを仕上げ、ふたたびスタイル編集メニューから、新しいCSSコードを「貼り付け」で流し込んで、新しいスタイルシートの名前で保存します。新しい画像は「画像アップロード」からアップロードします。

オプションのテーマ・スタイルキットを利用する方法

「ダウンロード」ページからオプションのテーマ・スタイルキットが提供されています。見本については「テーマバンク」をご覧ください。テーマ・スタイルキットも随時内容が追加あるいは更新されています。当サイトから提供されるスタイルシートには、使われているカラーの基本HSBおよびRGBコードが記載されているので、カスタマイズも容易です。

デフォルトテーマとdefault.cssファイル

インストール直後はグレーを基調とした「default(バージョン2.0からはnew-default)」テーマの「default.css」スタイルシートが適用されています。このスタイルはデータベースの読み出しに障害があるときの、緊急表示用のスタイルとして機能します。そのためデフォルトテーマとその中の「default.css」スタイルシートは削除しないでください。

サムネイル画像の作成

テーマ・スタイルのサムネイル画像を作成しておくと、選択しやすくなります。ek-MyWEBのテーマのサムネイルは、そのテーマのdefault.cssを適用した画面をキャプチャーして、160x100~160x120ピクセルにリサイズしたPNG形式のファイルで、ファイル名は「default.png」となります。同じようにスタイルシートのファイル名と同じPNG形式のファイルを作成して、テーマディレクトリの中に保存しておけば、一覧で確認できます。

WordPressテーマの活用

ek-MyWEBはWordPressの補助的なプログラムから発展してきたので、WordPress用のテーマを流用することも、比較的容易です。この場合コンテンツ部分の横幅が、450ピクセル以上のものを選んでください。これより狭いと入力フォームの表示がくずれることがあります。

【作業の手順】まずek-Mywebでは「default.css」が最低必要ですから、「style.css」ファイルからコピーまたはインポート形式で作成します。それから「header.php」からWordPress固有の書式を外して「ek-Header.php」を、「sidebar.php」から「ek-Sidebar.php」を、「footer.php」から「ek-Footer.php」を作成します。いずれもPHPプログラムが難解な場合は、WordPressのブラウザ表示からhtmlソースを取得して切り分け、加工するという方法があります。

サイドバーをコンテンツの先に表示する場合は「ek-Header0.php」の末尾に「include('ek-Sidebar.php');」を、コンテンツの後に表示する場合は「ek-Footer.php」の先頭に「include('ek-Sidebar.php');」を書き込みます。また「ek-AdminMenu.php」は他のテーマからコピーします。それから適切な名前をつけたフォルダを「ek-Styles」ディレクトリの中にアップロード(コピー)します。

ヘッダー部とサイドバー部は比較的短時間のうちに出来上がりますが、コンテンツ部はブラウザでプレビューしながら、こまかい修正を加える必要があります。なお実例が当サイトの「テーマバンク」に、「wp_」のついたアイテム名で紹介されています。

*逆の手順で作業を行えば、ek-MyWEBのテーマをWordPressで活用することも可能となります。この場合もコンテンツ部分のスタイルを修正、あるいは書き加える必要が生じます。実例はこちらのサイトにあります。

タブレットモードでヘッダー画像を表示する

デフォルトのタブレット表示モードではヘッダー画像が表示されなくなります。ヘッダー画像を表示するようにするには、次のように「ek-Header.php」ファイルの19行と25行目(new_defaultの場合)の先頭に「//」を書き加え、注釈扱いとします。

<div id="wrap2">
<?php
if (! array_key_exists('ek-MyWEB_OneColumn',$_COOKIE)) include('ek-Sidebar.php');
if ($ek_HeadGraph[$cat_navi] != "") {
// if (! array_key_exists('ek-MyWEB_OneColumn',$_COOKIE)) {
?>
<div id="header2">
<img alt="" src="<?php echo $ek_UploadsDir.$ek_HeadGraph[$cat_navi] ?>" />
</div>
<?php
// }
}
?>

タブレットモードでヘッダー背景画像を縮小表示する

new_default1」テーマでタブレットモードにすると、ヘッダーの背景画像がカットされてしまいます。styleで自動的に画像を縮小することは背景に対しては設定できませんが、あらかじめヘッダー1用の画像として縮小した画像(720x175ピクセル)を用意しておき、切り替えることで自動的に縮小されたように見せることができます。「ek-Header.php」の3行目を次のように変更します。

<div id="header" style="background: url('<?php if (array_key_exists('ek-MyWEB_OneColumn',$_COOKIE)) echo $ek_UploadsDir.$ek_HeadGraph[1]; else echo $ek_UploadsDir.$ek_HeadGraph[0] ?>') no-repeat">

Powered by ek-MyWEB.com 2.0 RC3