これはかなりの優れもの、スマートフォン・タブレット対応WordPressのテーマファイル -Skeleton

商用利用も無料、Responsive Web Designに対応したWordPressのテーマファイルを紹介します。

ボタン、タブ、パネルなどのページでよく使用するエレメントをはじめ、さまざまなカラムも簡単にショートコードで利用できます。

デモのキャプチャ

Skeleton -A Responsive WordPress Theme
デモページ

[ad#ad-2]

Skeletonのデモ

SkeletonはMedia Queriesを使用して、表示サイズごとに最適なレイアウトを提供します。

デモのキャプチャ

デモページを幅1200pxで表示

デモのキャプチャ

デモページを幅800pxで表示

デモのキャプチャ

デモページを幅600pxで表示

Skeletonの主な特徴

  • Formalizeを使用して各ブラウザ間のエレメントの相違に対応。
  • Skeletonを使用してMedia Queriesを使った可変カラムに対応。
  • Option Frameworkを使用してテーマオプションのカスタマイズが可能。
  • bbPressのフォーラムスキンをインクルード。
  • 見出しや本文などバランスの取れたタイポグラフィ。
    デモ:Typography and Elements
  • スマートフォン用のマルチレベルのメニューをサポート。
  • テーマオプションパネルからフォントや背景画像を設定可能。
  • タブ、アコーディオン、CSS3ボタン、最近・関連記事のサムネイル表示、シンプルなレイアウトカラムなどをショートコードで簡単に利用可能。
    下記「ショートコードで設置できるエレメントを参照ください。

[ad#ad-2]

Skeletonのダウンロード

Skeletonのテーマファイル一式は、下記ページからダウンロードできます。

Skeletonのカスタマイズ

Skeletonを使って子テーマを作る際は、主に下記の3つのファイルに手を加えます。

  • style.css
  • functions.php
  • options.php

ショートコードで設置できるエレメント

Skeletonではページでよく利用するレイアウト・エレメントがショートコードで用意されています。

カラムのショートコード

[one_third]
Column One - Add anything you want here
[/one_third]

[one_third]
Column Two - Add anything you want here
[/one_third]

[one_third_last]
Column Three - Add anything you want here
[/one_third_last]
デモのキャプチャ

カラムのデモページ

6カラムまで用意されています。

  • one_third
  • two_thirds
  • one_half
  • one_fourth
  • three_fourths
  • one_fifth
  • two_fifth
  • three_fifth
  • four_fifth
  • one_sixth
  • five_sixth

CSS3ボタンのショートコード

[button align="center" color="white" size="small" link="http://www.simplethemes.com"]Small Button[/button]
デモのキャプチャ

ボタンのデモページ

タブのショートコード

[tabgroup]
[tab title="Tab 1" id="t1"]Tab 1 content[/tab]
[tab title="Tab 2" id="t2"]Tab 2 content[/tab]
[tab title="Tab 3" id="t3"]Tab 3 content[/tab]
[/tabgroup]
デモのキャプチャ

トグルパネルのショートコード

[toggle title="Button text One"]
Toggle Content One
[/toggle]
[toggle title="Button Text Two"]
Toggle Content Two
[/toggle]
[toggle title="Button Text Three"]
Toggle Content Three
[/toggle]
デモのキャプチャ

ボックスのショートコード

[callout align="center" width="400"]
This is a 400px centered callout box
[/callout]

[callout align="left" width="200"]
This is a 200px left aligned callout box
[/callout]

[callout align="right" width="100"]
This is a 100px right aligned callout box
[/callout]

[callout]
This is a callout that will expand the entire width of its parent container.
[/callout]
デモのキャプチャ

他にもたくさんのエレメントがショートコードで用意されています。
詳しくは、下記ページをご覧ください。

sponsors

top of page

©2024 coliss