【カテゴリー/テーマ

スマートフォンサイト制作はするな!レスポンシブWebデザインで制作


スマートフォンサイト制作はするな!レスポンシブWebデザインでサイトを制作する

のが最近のトレンドになってる感じをうけます。

jquery mobileに慣れるまでの労力を考えれば

レスポンシブWebデザインでも良いと言ってくださるクライアント様については

レスポンシブWebデザインで

さくっとサイトを制作したほうが、納期、料金・コストともに幸せになれます。

まさにHTML5、CSS3の魔法の世界です。

今後、この流行が無くなった時は心配ですが、スマートフォンでいろいろなディスプレイサイズが

発売されるうちは、問題ないでしょう。

たぶん・・・

WordPress HTML5 CSS3対応 テーマ bones


Wordpress HTML5 CSS3対応 テーマ bones

Wordpressテーマをbonesに対応させるだけで、なんだか不思議・・・

今までのテキストベースの味気ないサイトが

賑やかに動きまくる!

こちらもHTML5,CSS3対応

Wordpress テーマのフレームワークという概念で動作します。

いろいろな拡張機能が利用できる反面、サイトの動作が重くなる?場合があるので

サクサク動作するサーバー向けなのかもしれません。

でも一度は利用しカスタマイズしてみるのもいいでしょう。


■レスポンシブwebデザイン

http://themble.com/bones/

ダウンロード(リンクが分かりずらい?)
http://themble.com/bones/#bones-showcase


○フルサイズの画面サンプル

Bones - The HTML5 WordPress Starter Theme

Bones - The HTML5 WordPress Starter Theme



○ipadの画面サンプル
Bones - The HTML5 WordPress Starter Theme

Bones - The HTML5 WordPress Starter Theme

WordPress HTML5 CSS3対応 テーマ Starkers HTML5 v3.0 Nathan Staines


こちらもHTML5,CSS3対応

iphone,ipad,android,Windows Phone,PCなどあらゆるデバイスの画面(解像度)にあった

レイアウトで動作します。

androidは多種多様な画面サイズなので重宝します。

将来的にはipadの7インチも発売されるという情報もあるので、今から対策を準備しておくのもいいかもしれません。

こういった感じのテーマが今後増えそうですね。


■レスポンシブwebデザイン

http://nathanstaines.com/articles/starkers-html5/

ダウンロード(リンクが分かりずらい?)
https://github.com/nathanstaines/starkers-html5


○フルサイズの画面サンプル


○ipadの画面サンプル

WordPress HTML5 CSS3対応 テーマ・テンプレート Roots Theme


ほとんどの各種最新ブラウザーでは、HTML5とCSS3の対応がほぼほぼ完了している状況です。

なので、今後は業務サービス以外でプロモーション的にサイトを開設する場合は

HTML5のサイトでも十分ありかもしれません。

また、iphone、ipad、androidなどのスマートフォンへ対応させることを考えるとhtml5で

サイトを構築するメリットは計り知れません。

単純に楽できます。

そこで、今回から何回かに分けておすすめのHTML5のテーマをご紹介したいと思います。


■レスポンシブwebデザイン

Roots Theme

http://www.rootstheme.com/

○フルサイズの画面サンプル

Wordpress HTML5 CSS3対応 テーマ・テンプレート Roots Theme

Wordpress HTML5 CSS3対応 テーマ・テンプレート Roots Theme



○ipadの画面サンプル
Wordpress HTML5 CSS3対応 テーマ・テンプレート Roots Theme

Wordpress HTML5 CSS3対応 テーマ・テンプレート Roots Theme



WordPress ページャー(pager)の設置 プラグイン テンプレート


Wordpressのほとんどのテンプレートでは、ページャー機能がnext,backの2つのリンクが表示される

簡易なものがほとんどです。

理由は若干ページの表示が遅くなる?のが原因かもしれません。(実際はほとんど遅くなりませんが・・・)

そんなページャー機能をカスタマイズして

WEBサービスで見かける記事単位に移動するリンクへと対応してみるのが、ユーザビリティの向上、SEO対策につながります。

そこで、どのようにカスタマイズすればいいのか?

①プラグインを導入する
②テンプレートファイルに直接コードを記載する

この2つが考えられます。

HTML、PHPの知識が無い場合は、必然的にプラグインの導入になります。

「プラグインにて導入」
メリットとして、導入が簡単、デザインを簡単に選べるなどです。
デメリットは、表示、システムが遅くなる可能性がある。ほかのプラグインと干渉を受ける場合がある。データベースに余計なデータが追加されるなどです。

「テンプレートにて導入」
メリットとして、設置する場所、デザインなどカスタマイズが自由
デメリットとして、PHPの知識が必要

おすすめなのがやはりテンプレートに直接コードを導入するです。

1 / 212