Simple

テーマだからこそ必要なシンプルさが有ります。
それは見た目だけではありません。

SStyleはゼロから最小の物を厳選して追加したため、圧倒的にシンプルな構造が特徴的です。

それは訪問者への見た目だけではありません。

サイト制作者に向けて

テーマはそのまま使われることは殆ど無く、カスタマイズして独自のデザインを盛り込んで使用するはずです。
そのためSStyleはカスタマイズしやすい最小限の構造で作成されています。

HTMLは見た目を整えるためだけにつけられたdivタグやtableタグを持たず、意味を持った最小限で構成されています。
CSSは統一したデザインルールに基づき、おどろくほど短くまとめられています。
使用されている画像ファイルは最小限で全て置き換え可能です。
JavaScriptもMedia Queryも使用していません。

divタグやtableタグを使わない理由

見た目を整えるためにdivタグやtableタグを使うことは、HTMLに見た目の制約を持ち込むことを意味します。
これを持たないSStyleはスタイルシートだけでほとんど別物のデザインに変更することが可能です。
実サンプルとして、初期データにWhiteを用意しました。defaultとの違いはスタイルシートだけですが、大幅に見た目を変えることが出来ます。

短いスタイルシート

正しいHTMLで文章構造を記載し、文章構造に対して1:1に紐付いたデザインのルールを適用することでスタイルシートのコード量も少なくなっています。
default、whiteともにスタイルシートの行数は200行未満です。すぐに修正する場所を見つけて全体のデザインを切り替えることが出来ます。

ボタンをスタイルシートで表現するなどにより使用する画像データを最小限に抑えています。
これによりカスタマイズするために用意する必要がある画像データの数も最小限です。

JavaScriptやMediaQueryは便利ですが、サイトに「状態」を持ち込んでしまうためサイトをカスタマイズするときには正しくすべての状態を理解しておかないと、おもわぬ副作用が発生する場合があります。

そこでSStyleはMediaQueryやJavaScriptを使用せずに、正しいHTMLを用意し、環境依存のコードを持ち込まないことでレスポンシブデザインに対応させました。

このシンプルな構造のためJavaScriptやMediaQueryを追加したくなった時も、既存のコードとの相性を気にすることなく自由にカスタマイズすることが出来ます。

サイト運営者にむけて

お問い合せページを除く全てのページはBlogを元に構成されておりBlogの書き換えを覚えるだけでいつでもページのコンテンツを書き換えることが出来ます。
あのページはこうやって書き換えて、このページはこうやって書き換えて・・・ とあれこれ覚える必要はありません。

管理画面ログイン中に公開ページを開いた時ツールバーの表示は最小となっており、実際の閲覧者に近い状態でページを確認することが出来ます。

各種管理操作を行いたいときは画面上部にカーソルを持っていくかタップしてください。

サイトの修正はスマートフォンを使って遠隔地で行うことも出来ます。

※固定ページの使用も可能です。固定ページを使用する場合は右上のシステムナビをご利用ください。

サイト閲覧者に向けて

ページを開くと一番最初に表示されるのがコンテンツです。そしてコンテンツを読み終わるとナビゲーションが表示されます。
この構造がすべてのページで統一されています。
ページは状態を持たないステートレスな構造で、行動と結果が常に1:1で結びつくようになっています。