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

WordPress

Post on:2011年9月20日

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 -GitHub

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]