| テーマの解説（英語） | Twenty Ten — WordPress.com |
| 〃（日本語） | テーマ「Twenty Ten」の補足解説 |
| デモ（英語） | Twenty Ten Demo | Just another WordPress.com site |
| 〃（日本語） | Twenty Ten | Just another WordPress.com site |
| 更新情報（英語） | |
| 〃（日本語） | |
| ソースコード | Revision 5806: /twentyten |
*1：ソースコード中の説明文を日本語に訳してくれております。
設定のバリエーション
６つのウィジェットエリアがあります。
１つのメニューエリアがあります。
個別投稿表示のときにアイキャッチ画像がヘッダー画像として表示されます。
背景を変更することができます。
ヘッダー画像を選定することができます。（全８種類）
ヘッダー画像を変更することができます。
CSS編集のバリエーション
以下のCSSを追加するとIEでのフォント表示がきれいになります。
body,input,textarea,.page-title span,.pingback a.url {
font-family:Meiryo,'Trebuchet MS',Verdana,sans-serif;
}
以下のCSSを追加するとサイドバーが左側に移動します。
.home #container,.page-template-default #container,.archive #container,.search #container,.single #container {
float:right;
margin-right:-260px;
}
.home #primary,.page-template-default #primary,.archive #primary,.search #primary,.single #primary {
float:left;
padding-left:15px;
}
以下のCSSを追加すると、投稿記事のアーカイブ表示を抜粋表示から記事タイトルのリストに変更することができます。
.search #container,.archive #container {
margin-bottom:50px;
}
.search #content,.archive #content {
margin-left:0;
}
.search #content .entry-title,.archive #content .entry-title {
float:left;
margin-bottom:20px;
width:510px;
font-size:14px;
}
.search .entry-meta,.archive .entry-meta {
float:left;
padding-left:20px;
padding-right:7px;
}
.search .entry-content,.search .entry-summary,.archive .entry-content,.archive .entry-summary {
display:none;
}
.search .entry-utility,.archive .entry-utility {
display:none;
}
.search .meta-sep,.search .author,.search .meta-prep,.archive .meta-sep,.archive .author,.archive .meta-prep {
display:none;
}
.search #nav-below,.archive #nav-below {
clear:both;
margin-top:30px;
}
.search .hentry:nth-child(2n+1),.archive .hentry:nth-child(2n+1) {
background-color:#F0F0F0;
}
.search .hentry:hover,.archive .hentry:hover {
background-color:#e0e0e0;
}
.search .hentry,.archive .hentry {
background-color:#FaFaFa;
height:40px;
padding-bottom:10px;
margin-bottom:0;
padding-left:10px;
padding-top:25px;
}
以下のCSSを追加すると、固定ページまたは投稿記事を表示するときに、ヘッダー画像とナビゲーションメニューの上下が入れ替わります。
.single #branding img,.page #branding img {
margin-top:34px;
}
.single #access,.page #access {
margin-top:50px;
position:absolute;
}
固定ページ
投稿記事
メニューを白くする
以下のCSSを追加すると、
#access {
background:#fff;
}
#access a {
color:#000;
}
#access li {
box-shadow:0 2px 5px rgba(255,255,255,0.2);
-moz-box-shadow:0 2px 5px rgba(255,255,255,0.2);
-webkit-box-shadow:0 2px 5px rgba(255,255,255,0.2);
}
#access ul ul a {
background:#fafafa;
}
#access li:hover > a,#access ul ul :hover > a {
background:#ddd;
color:#333;
}
#access ul li.current_page_item > a,#access ul li.current_page_parent > a,#access ul li.current-menu-ancestor > a,#access ul li.current-menu-item > a,#access ul li.current-menu-parent > a {
color:#000;
}
* html #access ul li.current_page_item a,* html #access ul li.current_page_parent a,* html #access ul li.current-menu-ancestor a,* html #access ul li.current-menu-item a,* html #access ul li.current-menu-parent a,* html #access ul li a:hover {
color:#666;
}
メニューが白くなります。
見出しを装飾する
WordPress.com のテーマ「Twenty Ten」の見出しを装飾するためのCSS
