レスポンシブでアクセシブルなGeeklogの新テーマ「square」をリリースしました。

レスポンシブWebデザインでアクセシブルなHTML5のGeeklogテーマ「square」は、「WAIproCSS Ver2.7.1 for Geeklog2.1.0」をベースに作成したテーマです。PCは2カラム、タブレットやスマートフォンでは1カラム(iPadとAndroidのlandscapeは左右ブロック２カラム)レイアウトになります。

キャプチャ画像：テーマsquareのPC,iPad,スマホの表示例
テーマ「square」 PC・iPad・iPod touchのキャプチャ画像です。

テーマ「square」のデザインを見ていただく為だけにダウングレードしたテーマsquareをこのサイトに入れております。 (このサイトは、HTML5に対応していないので、XHTML 1.0にしています) テーマのお試しで「square」を選んでいただくとテーマをご覧頂く事ができるので参考にしてください。

尚、このサイトでは見出しとグローバルナビゲーションにWebフォントを使用していますが、 同じフォントをテーマに梱包する事は出来ませんので、Webフォントを利用されたいかたはご自身のサイトで適用してください。

テーマ「square_for_2.1.0」のダウンロードについて

テーマ「square_for_2.1.0」のダウンロードは、GitHub/milk54/geeklog-square又はWhite Stageダウンロードセクションからどうぞ。

レスポンシブWebデザインテーマ「square」の利点

テーマ「square」の特徴及び仕様

テーマ「square」のアクセシビリティについて

テーマ「square」の注意点

トップページのみイメージ画像を表示する方法

静的ページでIDを「site_image」、話題を「ホームページのみ」、投稿モードを「HTML」にし、センターエリアやブロックで囲むにはチェックを入れず、 内容を

<div  class="top-image"><img src="/layout/square/images/custom/site_image.png" alt="" width="1541" height="91"></div>
と記述し、表示エリアを「ページの最上部」として(後は変更なしです。タイトルは分かりやすいものであれば何でも良いです。)保存してください。

画像を変更される場合は、幅1541px高さ91pxの独自画像を用意し、ファイル名「site_image.png」とした画像を テーマフォルダのimages/custom/ に上書き保存してください。

ロゴ画像を変更する方法

幅285px高さ38px、ファイル名「logo.png」のロゴ画像をテーマフォルダのimages/custom/ に上書き保存してください。

ロゴ画像をテキストに変更する方法

header.thtmlファイルの31行目

<h1 class="site_name"><a href="{site_url}"><img src="{layout_url}/images/custom/logo.png" width="285" height="38" alt="{site_name}"{xhtml}><!-- {site_name} --></a></h1>

を下記のように変更して下さい。↓
<h1 class="site_name"><a href="{site_url}"><!-- <img src="{layout_url}/images/custom/logo.png" width="285" height="38" alt="{site_name}"{xhtml}> -->{site_name}</a></h1>

表示と読み上げ確認について

次の環境で表示確認しております。

次の環境で読み上げ確認しております。

ライセンスについて

テーマ「square」のライセンスは、WAIproCSSのライセンスに準じます。WAIproCSSのライセンスは下記の通りになります。

This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software　Foundation; either version 2 of the License, or (at your option) any laterversion.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

--日本語訳--

このプログラムは、フリーソフトウェアです。フリーソフトウェア財団が発表しているようにGNU一般向けライセンスの条件の下で。再配布するか、修正する事が出来ます。

ライセンスのバージョン2.0、もしくは(オプションによっては)それ以降のバージョンをご使用下さい。

このプログラムは、お役に立てる事を願って配布されていますが、何の保証もないプログラムです。特定の目的の為に販売または他のプログラムに適合させるという保障は含まれておりません。詳細は、GNU一般向けライセンスをご覧下さい。

コメント (0件)

White Stage
https://white-stage.com/article.php/square