レスポンシブ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

関連記事

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

WordPressの固定ページの拡張子にhtmlをつけるfunction.phpのコードサンプル

WordPressを始めた頃にパーマリンク設定で悩んだこともあった。拡張子.htmlが付いた静的ページっぽい方がSEO的にも優位なのでは

記事を読む

ワードプレス ページング・ページネーション(wordpress paging)

プラグインを使わずに自分でページングを実装するfunction.phpのコードサンプル

Wordpressで選んだテーマにページング機能が付いていない場合は「WP-PageNavi」というプラグインを使うか、該当テーマ内のテ

記事を読む

wpテーマ-cubic

WordPressテーマ『mono-lab | CUBIC』を少しカスタマイズしてみた

現在はStinger3で運用しています。 このブログは(モノラボ)mono-lab | CUBIC というテーマを使っています。GPL

記事を読む

all-in-one-seo

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

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

記事を読む

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

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

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

記事を読む

著作権表示が要らない素材サイト「pixabay」が使えるプラグイン

ブログにアイキャッチ画像を設定することは、魅力的な画像が記事本文へと読み進みみたくなる要素の一つでありSNSでシェアされた時に目を引

記事を読む

Wordpress パソコン開発環境構築の記事

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

ワードプレス(Wordpress)で既に稼働中サイトのテーマをカスタマイズする時に直接テーマファイルを触るのは危険です。別途サーバー上に

記事を読む

meta_robots タグ設定

プラグイン「wordpress meta robots」を止めてカスタムフィールドで対応した方法

SEO対策の一つ「低品質コンテンツの対応」として、投稿ページや固定ページ単位にmeta robotsタグが設定できるプラグイン「word

記事を読む

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

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

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

記事を読む

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

カテゴリーページや投稿タグページに入力した説明文を反映させる方法

WordPressのテーマではカテゴリーページや投稿タグページに各々の編集画面で入力した説明文を表示するテーマは少ないのですが、今回入力

記事を読む

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」を触

→もっと見る