レスポンシブweb対応のWordPress無料テーマ「wsc7」を使ってみたので少し解説
公開日:
最終更新日:2014/07/11
Wordpressのレスポンシブデザイン無料テーマ「wsc7」を触ってみたので少し解説含む覚書メモです。
2011年10月25日にリリースされた「wsc7」はオープンブログソフトウェアのWordpressのテーマを開発するWSCプロジェクトの無料テーマの一つです。メディアクエリーを使ってレスポンシブデザインを実現しておりWordpressのスマホ対応の勉強用としても使えるシンプルなテーマです。
WordPress無料テーマ「wsc7」の特徴
- ブラウザのサイズによって、変化するレイアウト
- iPhoneなど、スマートフォンにも対応
- WordPressでCMSをスピーディーに構築したいすべてのデザイナーに!
- デザイナーの感性を邪魔しない、限りなくプレーンなデザイン!
- 検索エンジンに最適化された、堅実なコーディング!
- フレームワークに選ぶだけで制作スピードがアップ!
- PHPがわからなくても理解しやすい、シンプルなテンプレート構成!
- CMSによく使われるプラグインがすぐ使えるよう、プラグインコードが組み込み済み!
via : wsc7
上記の配布サイトに記載されている内容ですが、
特徴として下記の3点をプラスします。
- 国産テーマだから日本語対応作業は不要
- 余分なjavascriptや画像がないシンプルなテーマ構成
- 無料テーマには珍しく著作権リンクが必須ではない
wsc7テーマのフォルダー内ファイル構成
冒頭にも書きましたが、Wordpressテーマ制作の教材にも使えるシンプルなテーマです。ダウンロードしたテーマフォルダー内は以下の通りです。
※1. 固定ページのテンプレートは通常ページにプラスしてリキッドレイアウトとワンカラムレイアウトが用意されています。
※2. 404ページと検索結果ページは英語のままです。
※3. 使用している項目名は「languages」フォルダー内のja.poとja.moファイルを使っていますので名称変更はpoeditを使うかテーマファイルのコード直変更になります。
wsc7テーマのレイアウトのアウトライン
レスポンシブ対応をメディアクエリーを定義して実現している右カラムテーマのです。CSSを見れば解りますが概ね下記の様に定義されています。
1 2 3 4 5 6 7 8 9 10 |
/*wrap*/ #wrap{max-width:900px;margin:auto;text-align:left;clear:both;} #main{text-align:left;overflow:hidden;padding:20px 0;width:600px;margin-right:40px;float:left;} @media screen and (max-width: 920px) {#main{max-width:640px;margin:auto;display:block;float:none;width:auto;padding:20px 10px;}} #main-wide{float:left;text-align:left;overflow:hidden;padding:20px 0;background-color: #fff;max-width:900px;} @media screen and (max-width: 920px) {#main-wide{width:94%;margin-left:10px;padding:20px 0;}} #main-liquid{width:99%;margin:auto;padding:20px 0;} @media screen and (max-width: 920px) {#main-liquid{width:94%;padding:20px 0;}} |
上記のCSSコードの通りメディアクエリーで920pxより小さい時の指定が多いです。headerやsideに関しては異なる指定があります。詳しくはダウンロードしてcssをご覧下さい。
まとめ
スマートフォンでサイトを閲覧するのが当たり前になった現在、レスポンシブデザインに最初に挑戦するのに選ぶテーマとしてはカスタマイズし易いしオススメです。但し、wsc7に限った話ではありませんがスマートフォン対応は投稿する記事が単純に写真と文書で構成される記事ならいいのですが、画像を横並びにするとか、テーブルを使う記事の場合は、投稿記事や固定ページ内をスマホに最適化する為にCSSに一工夫が必要です。
AD
関連記事
-
-
人気のWordPress無料テーマ「Stinger3」に変えてみた
ブログのテーマをスマホ対応済の人気無料テーマ「Stinger3」に変更しました。 一つ前に適用していたモノラボさんのテーマ CUBIC
-
-
プラグイン『Meta Manager』の使い方と注意点
WordPressでSEO対策用プラグインの『ALL in One SEO Pack』は機能が豊富すぎて使いきれないので、メタタグのDe
-
-
簡単に自分のパソコン(PC)にWordPress開発環境を作る方法
ワードプレス(Wordpress)で既に稼働中サイトのテーマをカスタマイズする時に直接テーマファイルを触るのは危険です。別途サーバー上に
-
-
WordPress管理画面の投稿一覧にカスタムフィールドの項目を追加表示する方法
良く使うWordPress管理画面の投稿一覧ですが標準の表示項目は以下の7個です。通常のブログならカスタマイズする必要もないのでしょうが
-
-
著作権表示が要らない素材サイト「pixabay」が使えるプラグイン
ブログにアイキャッチ画像を設定することは、魅力的な画像が記事本文へと読み進みみたくなる要素の一つでありSNSでシェアされた時に目を引
-
-
Exec-PHPを使わずに投稿ページや固定ページでphpを使いたい
投稿ページや固定ページに直接phpコードが書けるプラグイン「Exec-PHP」は、セキュリティ面に問題があるようなので使わない方が良い。
-
-
プラグイン『ALL in One SEO Pack』って使う必要はあるのか?
WordPressでSEO対策としてTITLEタグとメタタグのDescriptionとkeywordsをページ単位に設定できるプラグイン
-
-
WordPressの固定ページの拡張子にhtmlをつけるfunction.phpのコードサンプル
WordPressを始めた頃にパーマリンク設定で悩んだこともあった。拡張子.htmlが付いた静的ページっぽい方がSEO的にも優位なのでは
-
-
WordPressの仕組みを理解する
WordPress(ワードプレス)は、深く仕組みを知らなくても簡単にブログやWebサイトが作れるようになっています。大概のレンタルサーバ
-
-
WordPressの固定ページで投稿タグが設定できるようにするfunction.phpのコードサンプル
WordPressの固定ページはデフォルトでは投稿タグを設定することができません。固定ページを1カラムのランディングページとして使う場合
Comment
こんにちは、初めてコメントします。
いつもキレイなレイアウトだと感心していました。
この度コメントさせて貰ったのは、参考意見を聞ければと思ってです。
私もスティンガーを(5です)使って8月からサイト構築しています。
そしてどうしても解決できないことがあります。
それは、アウトラインを確認するとスティンガー5を使っているサイトが、軒並み、
アウトラインの冒頭が
Untitled BODY
Untitled NAV
となっていることです。私はこれが邪魔で仕方なく、色々と試みましたが修正できません。
作者のenjirogさんのサイトも放置している??のか、
〔Untitled BODY Untitled NAV〕がついたままです。
それなのに〈スティンガーユーザ〉の中でNsThinkさんのサイトだけ
アウトラインがすっきりキレイなのです。
これはセクション部分をカスタマイズされたのかと感じますが、具体策が見当たりません。
実際どうやって、このキレイなアウトラインを実現したのでしょうか?
ご迷惑でなければ教えてください。
コメントありがとうございます。
ご質問の答えにはなっていませんが、アウトラインに「Untitled ○○○」が出ないのは、
当方のブログが古いバージョンのSTINGER3のテーマ(xhtmlベース)だからです。
HTML5対応はSTINGER5からです。
ありがとうございます。
3と5の違いを理解しました。
他のテーマでも試してみましたが、新しいのは、みんな出るみたいですね。
気にしないことにしました。
ありがとうございました。