HTML5+CSS3のレスポンシブWebデザインテーマ 「winkey14」

/*==============================================================================
  Theme    : winkey14
  Update   : 2014/05/28
  Version  : 0.9.2
  Copyright (C) 2012-2014 by hiroron
  Author   : hiroron (hiroron AT hiroron DOT com)
  License  : GPLv2
  Homepage : http://www.winkey.jp/
==============================================================================*/



== 概要 ==

テーマ「winkey14」は"Geeklog初"の「HTML5+CSS3」で作られた「winkey12」のGeeklog2.1対応版です。
レスポンシブwebデザインを採用しておりスマートフォン、タブレット、PCとで自動的に端末に応じて最適なレイアウトで表示されます。
アウトライン化（文書構造）にも注意して作成しており、メインコンテンツとなる記事や静的ページなどは<article>タグで囲い、サイドボックスなど補助的要素は<aside>タグで囲い、サイトの文書構造をきちんと表すようにしています。

管理画面はログインしないと見れない領域になるため不特定多数の目に触れないこと、検索エンジンなどのクローラーに収集されないこと、今後のバージョンアップに追従しやすいよう、などのためいじっておらずベーステーマの"Modern Curve"のままです。

※色々なWordpressテーマにインスピレーションをえて作成しました。

+主な特徴
  +レスポンシブWEBデザインでPCでもスマホでも対応
  +HTML5バリデーションチェックでエラーなし(0個)
  +文書構造(アウトライン)を綺麗に表現しクローラーに優しい
  +フォントアイコンを利用(Retinaディスプレイ対応)
  +スマホならメニューや検索がアイコン化してタップで表示
  +ブロック管理の(左)に配置されたものはコンテンツの右側へ配置
  +ブロック管理の(右)に配置されたものはコンテンツの下側へmasonryで自動的に3列に整列して配置
  +カスタムメニュープラグインでの階層メニューに対応
  +複数あるcssファイルをまとめて1ファイルとして読み込む

（当テーマのベースはGeeklog2.1付属の"Modern Curve"をベースに作成しています）



== 使う際の注意点 ==

*ヘッダ部分のサイト名とメニューの文字が重なる

デザインの仕様上、ヘッダ部分のメニューとサイト名が長いと文字が重なってしまいます。
親メニューは４、５個を推奨としcustommenuプラグインで階層化メニューにすることを前提としてあります。
またサイト名もシンプルに短め（約８文字）を推奨としています。（スマートフォンの見た目で影響）



== テーマのファイルを設置(アップロード) ==

解凍してできた「winkey14」ディレクトリをそのまま「layout」フォルダへアップロードしてください。

winkey14  --> /public_html/layout/



== テーマを変更 ==

Geeklogサイトへ管理者でログイン＞コンフィギュレーション＞テーマ

     テーマ：Winkey14
DOCTYPE宣言：HTML5


※あわせて画像＞記事の画像で幅と高さの最大値を"610"に変更しておくと記事でめいっぱいのサイズとなり画像を扱う記事でちょうど良いサイズとなります。




== HTML5対応ハック ==

Geeklog2.1をHTML5に対応するようコアファイルに下記の修正が必要です。

 * aタグのrel=categoryの削除

   * private/system/lib-story.php : STORY_renderArticle関数内 : 129行目 と 140行目

元ソースコード
<code>
                    $topicimage,
                    $topicurl,
                    array('rel'=>"category")
                )
                , false, true
</code>

修正ソースコード: rel属性を削除
<code>
                    $topicimage,
                    $topicurl,
                    array()
                )
                , false, true
</code>





 * HTML5のtimeタグのdatetime用の出力

   * private/system/lib-story.php : STORY_renderArticle関数内 : 107行目

元ソースコード
<code>
    // Date formatting set by user therefore cannot be cached
    $article->set_var('story_date', $story->DisplayElements('date'), false, true);

</code>

修正ソースコード: datetimeの出力を追加
<code>
    // Date formatting set by user therefore cannot be cached
    $article->set_var('story_date', $story->DisplayElements('date'), false, true);
    $article->set_var('story_datetime', $story->DisplayElements('datetime'), false, true );

</code>



   * private/system/classes/story.class.php : DisplayElements関数内 : 1807行目

元ソースコード
<code>
        case 'date':
            $return = COM_getUserDateTimeFormat($this->_date);

            $return = $return[0];
            break;

        case 'unixdate':
            $return = $this->_date;
</code>

修正ソースコード: datetimeを返すコードを追加
<code>
        case 'date':
            $return = COM_getUserDateTimeFormat($this->_date);

            $return = $return[0];
            break;

        case 'datetime':
            $return = strftime('%FT%T', $this->_date);

            break;

        case 'unixdate':
            $return = $this->_date;
</code>



   * public_html/lib-common.php : COM_siteHeader関数内 : 1189行目
                                : COM_siteFooter関数内 : 1881行目

元ソースコード
<code>
    $header->set_var( 'theme', $_CONF['theme'] );

    $header->set_var('charset', COM_getCharset());
</code>

修正ソースコード: datetime_html5の出力を追加
<code>
    $header->set_var( 'theme', $_CONF['theme'] );
    $header->set_var( 'datetime_html5', strftime('%FT%T', $curtime[1]) );

    $header->set_var('charset', COM_getCharset());
</code>



== custommenuプラグインを使う場合 ==

winkey14テーマデフォルトの見た目でメニューに関するCSSはcustommenu.cssの内容をlayout.cssへ取り込んでいる為、余計な読み込みを発生させないように削除(/winkey14/custommenu/custommenu.css)しております。
カスタムメニュー用のオリジナルCSSを定義する場合はファイルを作成してから編集して下さい。
※そのままlayout.cssへ追加してもcustom.cssへ追加してもOKです。


== cssカスタマイズ ==

layout/winkey14/custom.cssを作成するかlayout/winkey14/css/custom.cssの末尾に追加することでカスタマイズできます。
これらはcss読み込みの順番が最後となるため指定の上書きが可能です。
当テーマではlayout/winkey14/custom.cssを配布物に含めていないため新バージョンが出て上書きすることもないため
こちらを作成してカスタマイズすることをおすすめします。



== バージョン履歴 ==

0.9.2  2014/05/28
 * css/custom.css(formmail用css記述)の読み込みを追加 (thanks Ivy)
0.9.1  2014/05/16
 * HTML5+CSS3のレスポンシブwebデザインテーマ「winkey14」を初リリース



== 配布サイト ==

WinKey: http://www.winkey.jp/



== スペシャルサンクス ==

みるく(milk) : http://white-stage.com/

アイコンフォント
  Entypo : by Daniel Bruce : License CC BY-SA 3.0

