テーマ「Twenty Eleven」の子テーマ - hanoi -

(最終更新日:2012年12月26日)

twentyeleven-wide01

テーマ「Twenty Eleven 」に以下のCSSを追加すると、

html {
font-size:16px;
overflow:auto;
overflow-x:hidden;
margin:0!important;
padding:0!important;
background-color: #222222;
}

* html {
overflow-x:hidden;
height:100%;
}

* html body {
height:100%;
}

header,footer {
width:100%;
margin:0 -500%;
padding:0 500%;
}

* html header {
position:relative;
}

:first-child+html header {
position:relative;
}

#page {
background-color:#ffffff;
margin:0 auto;
}

#site-title a {
color:#EEEEEE;
}

#site-title a:hover {
color:#ffffff;
}

#ie7 #site-title a {
color:#555555;
}

#ie7 #site-title a:hover {
color:#777777;
}

#site-description {
color:#AAAAAA;
}

input[type=text] {
border:1px solid #888888;
}

#branding #access {
position:relative;
top:0;
left:50px;
margin:0 -500%;
padding:0 500%;
}

#access div {
margin:0 .3%;
}

#ie7 #access ul {
height:45px!important;
}

#branding {
background-color:#555555;
}

#ie7 #branding {
background-color:transparent;
}

#branding img {
background-color:#111111;
border-top:5px solid #666666;
margin:0 -500% -16px;
padding:0 500%;
}

#branding #searchform,.one-column #branding #searchform {
position:absolute;
right:46%;
top:60px;
}

.hentry,.no-results,.singular .hentry {
position:static;
}

#ie7 .hentry,#ie7 .no-results,#ie7 .singular .hentry {
position:relative;
}

#ie7 header.entry-header {
margin:0;
padding:0;
}

.singular .entry-header,.singular .entry-content,.singular footer.entry-meta,.singular #comments-title {
width:90%;
margin:0 -500%;
padding:0 505%;
}

.singular .format-status .entry-content,.singular .format-aside .entry-content,.singular .format-link .entry-content {
padding:0 500%;
}

#ie7 .singular .entry-header,#ie7 .singular .entry-content,#ie7 .singular footer.entry-meta,#ie7 .singular #comments-title {
margin:0;
padding:0;
}

#ie7 .singular .entry-header {
width:auto;
}

.singular .entry-header .entry-meta {
padding-bottom:25px;
}

#ie7 .singular .entry-header .entry-meta {
margin-top:-70px;
}

#supplementary {
border:none;
}

#supplementary .widget a {
color:#cccccc;
}

#supplementary .widget a:hover {
color:#ffffff;
}

#supplementary .widget-title {
color:#aaaaaa;
}

#supplementary .widget ul li {
color:#888888;
}

#site-generator {
background:none repeat scroll 0 0 transparent;
border-top:1px solid #555555;
color:#CCCCCC;
}

#branding hgroup {
margin:0 auto;
padding:0 7.6%;
}

#colophon {
background-color:#222222;
border-top:1px solid #555555;
}

#nav-single {
position:static;
}

.singular.page .hentry {
padding:0;
}

#ie7 .entry-title {
position:relative;
}

.singular .entry-meta .edit-link a {
right:0;
left:auto;
top:30px;
}

.one-column.singular .entry-meta .edit-link a {
left:auto;
}

#content {
width:68.4%;
margin:0 24% 0 7.6%;
}

#secondary {
margin-right:2.6%;
width:15.8%;
}

article.comment {
width:100%;
}

article.feature-image.small {
position:relative;
}

.page-template-showcase-php #content,.left-sidebar.page-template-showcase-php #content {
width:84.8%;
}

.featured-posts section.featured-post {
width:100%;
top:40px;
}

section.feature-image.large {
width:100%!important;
}

#ie7 section.featured-post {
margin-left:0!important;
max-width:none;
}

section.featured-post {
width:83%!important;
}

.featured-posts {
margin:1.625em -9% 20px;
}

#ie7 .featured-posts {
margin-top:-20px;
}

.singular .image-attachment .entry-content {
margin:0 -500%;
}

img#wpstats {
background-color:#222222;
margin:0 -500%;
padding:0 500%;
}

ヘッダーやナビゲーションメニューが横いっぱいに広がります。

twentyeleven-wide02

arrow02

twentyeleven-wide01

更新履歴

2012年12月26日
  • jun 様のご指摘で一部の環境で横スクロールバーが表示されるバグを発見! html に「overflow-x:hidden;」を追加したら、なおった模様。そのまま、上のCSSに追記しました。

#2011