レスポンシブweb対応のWordPress無料テーマ「wsc7」を使ってみたので少し解説

公開日: 最終更新日:2014/07/11

ワードプレステーマ wsc7
Wordpressのレスポンシブデザイン無料テーマ「wsc7」を触ってみたので少し解説含む覚書メモです。
2011年10月25日にリリースされた「wsc7」はオープンブログソフトウェアのWordpressのテーマを開発するWSCプロジェクトの無料テーマの一つです。メディアクエリーを使ってレスポンシブデザインを実現しておりWordpressのスマホ対応の勉強用としても使えるシンプルなテーマです。

スポンサードリンク

WordPress無料テーマ「wsc7」の特徴

  • ブラウザのサイズによって、変化するレイアウト
  • iPhoneなど、スマートフォンにも対応
  • WordPressでCMSをスピーディーに構築したいすべてのデザイナーに!
  • デザイナーの感性を邪魔しない、限りなくプレーンなデザイン!
  • 検索エンジンに最適化された、堅実なコーディング!
  • フレームワークに選ぶだけで制作スピードがアップ!
  • PHPがわからなくても理解しやすい、シンプルなテンプレート構成!
  • CMSによく使われるプラグインがすぐ使えるよう、プラグインコードが組み込み済み!

via : wsc7

上記の配布サイトに記載されている内容ですが、
特徴として下記の3点をプラスします。

  • 国産テーマだから日本語対応作業は不要
  • 余分なjavascriptや画像がないシンプルなテーマ構成
  • 無料テーマには珍しく著作権リンクが必須ではない

wsc7テーマのフォルダー内ファイル構成

冒頭にも書きましたが、Wordpressテーマ制作の教材にも使えるシンプルなテーマです。ダウンロードしたテーマフォルダー内は以下の通りです。
wordpressテーマ wsc7 フォルダー内ファイル構成
※1. 固定ページのテンプレートは通常ページにプラスしてリキッドレイアウトとワンカラムレイアウトが用意されています。
※2. 404ページと検索結果ページは英語のままです。
※3. 使用している項目名は「languages」フォルダー内のja.poとja.moファイルを使っていますので名称変更はpoeditを使うかテーマファイルのコード直変更になります。

wsc7テーマのレイアウトのアウトライン

レスポンシブ対応をメディアクエリーを定義して実現している右カラムテーマのです。CSSを見れば解りますが概ね下記の様に定義されています。
wsc7 テーマフィル レイアウト

上記のCSSコードの通りメディアクエリーで920pxより小さい時の指定が多いです。headerやsideに関しては異なる指定があります。詳しくはダウンロードしてcssをご覧下さい。

まとめ

スマートフォンでサイトを閲覧するのが当たり前になった現在、レスポンシブデザインに最初に挑戦するのに選ぶテーマとしてはカスタマイズし易いしオススメです。但し、wsc7に限った話ではありませんがスマートフォン対応は投稿する記事が単純に写真と文書で構成される記事ならいいのですが、画像を横並びにするとか、テーブルを使う記事の場合は、投稿記事や固定ページ内をスマホに最適化する為にCSSに一工夫が必要です。

Post Categories: Wordpress  Tags:

AD

関連記事

wordpress プラグイン

WordPressで記事を書き始める前に入れた方がいいプラグイン

ワードプレスのインストールが無事終わったら、早速記事を書いてどの様に表示されるのか試してみたくなりますが、その前に最初に設置・設定してお

記事を読む

stinger3 1カラムテンプレートサンプル

「Stinger3」に1カラム テンプレートを追加する方法

このブログで使っているテーマ「Stinger3」はメインコンテンツ領域(横幅)が550pxとやや狭いです。いろんな方が横幅を広げるカスタ

記事を読む

Exec-PHPを使わずに投稿ページや固定ページでphpを使う

WordPressの固定ページで投稿タグが設定できるようにするfunction.phpのコードサンプル

WordPressの固定ページはデフォルトでは投稿タグを設定することができません。固定ページを1カラムのランディングページとして使う場合

記事を読む

all-in-one-seo

プラグイン『ALL in One SEO Pack』って使う必要はあるのか?

WordPressでSEO対策としてTITLEタグとメタタグのDescriptionとkeywordsをページ単位に設定できるプラグイン

記事を読む

wordpressテーマ stinger3

人気のWordPress無料テーマ「Stinger3」に変えてみた

ブログのテーマをスマホ対応済の人気無料テーマ「Stinger3」に変更しました。 一つ前に適用していたモノラボさんのテーマ CUBIC

記事を読む

wordpress_logo04

WordPressの仕組みを理解する

WordPress(ワードプレス)は、深く仕組みを知らなくても簡単にブログやWebサイトが作れるようになっています。大概のレンタルサーバ

記事を読む

Exec-PHPを使わずに投稿ページや固定ページでphpを使う

WordPress管理画面の投稿一覧にカスタムフィールドの項目を追加表示する方法

良く使うWordPress管理画面の投稿一覧ですが標準の表示項目は以下の7個です。通常のブログならカスタマイズする必要もないのでしょうが

記事を読む

スマホ対応テーマ 画像をtableタグで表示すると入らない時の記事に使った画像

スマホ対応テーマ(レスポンシブデザイン)での投稿記事内の画像横並び表示方法

スマートフォン対応(スマホ最適化)したテーマを選んでも投稿する記事内のhtmlタグの書き方によっては表示が想定外って事もありますよね

記事を読む

Exec-PHPを使わずに投稿ページや固定ページでphpを使う

Exec-PHPを使わずに投稿ページや固定ページでphpを使いたい

投稿ページや固定ページに直接phpコードが書けるプラグイン「Exec-PHP」は、セキュリティ面に問題があるようなので使わない方が良い。

記事を読む

メタタグセット記事のアイキャッチイメージ

プラグイン『Meta Manager』の使い方と注意点

WordPressでSEO対策用プラグインの『ALL in One SEO Pack』は機能が豊富すぎて使いきれないので、メタタグのDe

記事を読む

Comment

  1. 古家良 より:

    こんにちは、初めてコメントします。

    いつもキレイなレイアウトだと感心していました。

    この度コメントさせて貰ったのは、参考意見を聞ければと思ってです。

    私もスティンガーを(5です)使って8月からサイト構築しています。

    そしてどうしても解決できないことがあります。

    それは、アウトラインを確認するとスティンガー5を使っているサイトが、軒並み、

    アウトラインの冒頭が

    Untitled BODY
    Untitled NAV

    となっていることです。私はこれが邪魔で仕方なく、色々と試みましたが修正できません。

    作者のenjirogさんのサイトも放置している??のか、

    〔Untitled BODY Untitled NAV〕がついたままです。

    それなのに〈スティンガーユーザ〉の中でNsThinkさんのサイトだけ

    アウトラインがすっきりキレイなのです。

    これはセクション部分をカスタマイズされたのかと感じますが、具体策が見当たりません。

    実際どうやって、このキレイなアウトラインを実現したのでしょうか?

    ご迷惑でなければ教えてください。

    • nsThink より:

      コメントありがとうございます。
      ご質問の答えにはなっていませんが、アウトラインに「Untitled ○○○」が出ないのは、
      当方のブログが古いバージョンのSTINGER3のテーマ(xhtmlベース)だからです。
      HTML5対応はSTINGER5からです。

  2. 古家良 より:

    ありがとうございます。

    3と5の違いを理解しました。

    他のテーマでも試してみましたが、新しいのは、みんな出るみたいですね。

    気にしないことにしました。

    ありがとうございました。

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

AD

WordPress(ワードプレス)も SEO(エスイーオー)も、今一つ解らない、アラフィフおやじのWeb勉強ノート

・なんでやねん?
・忘れたらアカン!
・えらいこっちゃ !!

などなど、諸々かきつけていきます。

livedoor-reader-btn
follow us in feedly
著作権表示が要らない素材サイト「pixabay」が使えるプラグイン

ブログにアイキャッチ画像を設定することは、魅力的な画像が記事本

Wordpress パソコン開発環境構築の記事
簡単に自分のパソコン(PC)にWordPress開発環境を作る方法

ワードプレス(Wordpress)で既に稼働中サイトのテーマをカス

スマホ対応テーマ 画像をtableタグで表示すると入らない時の記事に使った画像
スマホ対応テーマ(レスポンシブデザイン)での投稿記事内の画像横並び表示方法

スマートフォン対応(スマホ最適化)したテーマを選んでも投稿する

stinger3 1カラムテンプレートサンプル
「Stinger3」に1カラム テンプレートを追加する方法

このブログで使っているテーマ「Stinger3」はメインコンテンツ

ワードプレステーマ wsc7
レスポンシブweb対応のWordPress無料テーマ「wsc7」を使ってみたので少し解説

Wordpressのレスポンシブデザイン無料テーマ「wsc7」を触

→もっと見る