Twenty Ten

最終更新日:2015-12-09

twentyten10

テーマの解説(英語) Twenty Ten — WordPress.com
〃(日本語) テーマ「Twenty Ten」の補足解説
デモ(英語) Twenty Ten Demo | Just another WordPress.com site
使用例 Twenty Ten | Pearltrees
更新情報(英語)
〃(日本語)
レンタルサーバ等にインストールして使うタイプの WordPress 用テーマの解説等 テーマ検索機能よりインストール可能です。.
ソースコード Revision 5806: /twentyten

テーマの制作者

2015-12-09 at 17.22.jpg

Automattic

*1:ソースコード中の説明文を日本語に訳してくれております。

設定のバリエーション

6つのウィジェットエリアがあります。

1つのメニューエリアがあります。

個別投稿表示のときにアイキャッチ画像がヘッダー画像として表示されます。

WS000651

背景を変更することができます。

twentyten16

ヘッダー画像を選定することができます。(全8種類)

twentyten08twentyten07twentyten09twentyten11twentyten12twentyten13twentyten14

ヘッダー画像を変更することができます。

twentyten15

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;
}

twentyten19

arrow02

twentyten20

以下の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;
}

twentyten22

arrow02

twentyten21

以下のCSSを追加すると、固定ページまたは投稿記事を表示するときに、ヘッダー画像とナビゲーションメニューの上下が入れ替わります。

.single #branding img,.page #branding img {
margin-top:34px;
}

.single #access,.page #access {
margin-top:50px;
position:absolute;
}
固定ページ

eyecatchheader05

arrow02

eyecatchheader03

投稿記事

eyecatchheader04

arrow02

eyecatchheader02

メニューを白くする

以下の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

参考記事・トピック

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。