WordPress にデザインをかけようとするとデフォルトのCSSが細かすぎて厄介者だ！
毎日のようにWordpressを使っていると無駄を省きたいと考えるのは皆同じことだろう。
最近主流のデザインは
ヘッダーやフッターの背景は画面いっぱい、ヘーダーの内容・フッターの内容は指定幅、というものがほとんどだ。
下記のようなCSSを基本にスタートすると作業が早い。
※ID名・クラス名が増えているので、注意する。
herder.php と footer.php に<3つ（#header_inner、#main_inner、#footer_inner）を追記することが必須です。 ↓style.css
/*
Theme Name: Twenty Eleven
Theme URI: http://wordpress.org/extend/themes/twentyeleven
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2011 theme for WordPress is sophisticated, lightweight, and adaptable. Make it yours with a custom menu, header image, and background -- then go further with available theme options for light or dark color scheme, custom link colors, and three layout choices. Twenty Eleven comes equipped with a Showcase page template that transforms your front page into a showcase to show off your best content, widget support galore (sidebar, three footer areas, and a Showcase page widget area), and a custom "Ephemera" widget to display your Aside, Link, Quote, or Status posts. Included are styles for print and for the admin editor, support for featured images (as custom header images on posts and pages and as large images on featured "sticky" posts), and special styles for six different post formats.
Version: 1.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: dark, light, white, black, gray, one-column, two-columns, left-sidebar, right-sidebar, fixed-width, flexible-width, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, featured-images, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
Text Domain: twentyeleven
*/
/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
border: 0;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
:focus {/* remember to define focus styles! */
outline: 0;
}
body {
background: #fff;
line-height: 1;
}
ol, ul {
list-style: none;
}
table {/* tables still need 'cellspacing="0"' in the markup */
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
blockquote:before,
blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
a img {
border: 0;
}
narticle, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
/* ここからデザイン
------------------------------------------------------*/
html {}
body {
font-family: "メイリオ", meirio, Verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
font-size: 12px;
line-height: 20px;
}
#page {
}
/* カラム割
-------------------------------------------------------*/
/*
メニューバー、背景を画面幅いっぱいに、でもコンテンツは指定幅にという流行のレイアウトに対応
画面幅のカラム(インデントなし)
指定幅のカラム(インデントあり)
*/
#header {
}
#header_inner {
width: 1000px;
margin: 0 auto;
}
#main {
width: 1002px;
margin: 0 auto;
}
#main_inner {
float: left;
width: 1000px;
margin: 0 auto;
}
#footer {
clear: both;
}
#footer_inner {
width: 1000px;
margin: 0 auto;
}
/* メインカラムとサイドバーの関係 */
#primary {
float: right;
width: 696px;
}
#secondary {
float: left;
width: 300px;
}
/* レイアウト確認Border
#header, #header_inner, #main, #main_inner, #footer, #footer_inner, #primary, #secondary {border: 2px solid red; }*/
#header {
border: 1px solid skyblue;
}
#header_inner {
border: 1px solid limegreen;
}
#main_inner {
border: 1px solid gray;
}
#primary {
border: 1px solid mediumvioletred;
}
#secondary {
border: 1px solid mediumturquoise;
}
#footer {
border: 1px solid blueviolet;
}
#footer_inner {
border: 1px solid magenta;
}
/* EOF)カラム割 */
/* =Print
----------------------------------------------- */
@media print {
body {
background: none !important;
font-size: 10pt;
}
footer.entry-meta a[rel=bookmark]:link:after,
footer.entry-meta a[rel=bookmark]:visited:after {
content: " [" attr(href) "] "; /* Show URLs */
}
#page {
clear: both !important;
display: block !important;
float: none !important;
max-width: 100%;
position: relative !important;
}
#branding {
border-top: none !important;
padding: 0;
}
#branding hgroup {
margin: 0;
}
#site-title a {
font-size: 21pt;
}
#site-description {
font-size: 10pt;
}
#branding #searchform {
display: none;
}
#branding img {
display: none;
}
#access {
display: none;
}
#main {
border-top: none;
box-shadow: none;
}
#primary {
float: left;
margin: 0;
width: 100%;
}
#content {
margin: 0;
width: auto;
}
.singular #content {
margin: 0;
width: 100%;
}
.singular .entry-header .entry-meta {
position: static;
}
.entry-meta .edit-link a {
display: none;
}
#content nav {
display: none;
}
.singular .entry-header,
.singular .entry-content,
.singular footer.entry-meta,
.singular #comments-title {
margin: 0;
width: 100%;
}
.singular .hentry {
padding: 0;
}
.entry-title,
.singular .entry-title {
font-size: 21pt;
}
.entry-meta {
font-size: 10pt;
}
.entry-header .comments-link {
display: none;
}
.page-link {
display: none;
}
.singular #author-info {
background: none;
border-bottom: none;
border-top: none;
margin: 2.2em 0 0;
padding: 0;
}
#respond {
display: none;
}
.widget-area {
display: none;
}
#colophon {
display: none;
}
/* Comments */
.commentlist > li.comment {
background: none;
border: 1px solid #ddd;
-moz-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
margin: 0 auto 1.625em;
padding: 1.625em;
position: relative;
width: auto;
}
.commentlist .avatar {
height: 39px;
left: 2.2em;
top: 2.2em;
width: 39px;
}
.commentlist li.comment .comment-meta {
line-height: 1.625em;
margin-left: 50px;
}
.commentlist li.comment .fn {
ndisplay: block;
}
.commentlist li.comment .comment-content {
margin: 1.625em 0 0;
}
.commentlist .comment-edit-link {
display: none;
}
.
commentlist > li::before,
.commentlist > li.bypostauthor::before {
content: '';
}
.commentlist .reply {
display: none;
}
/* Post author highlighting */
.commentlist > li.bypostauthor {
color: #444;
}
.commentlist > li.bypostauthor .comment-meta {
color: #666;
}
.commentlist > li.bypostauthor:before {
content: none;
}
/* Post Author threaded comments */
.commentlist .children > li.bypostauthor {
background: #fff;
border-color: #ddd;
}
.commentlist .children > li.bypostauthor > article,
.commentlist .children > li.bypostauthor > article .comment-meta {
color: #666;
}
}
/* =IE7
----------------------------------------------- */
#ie7 article.intro {
margin-left: -7.6%;
margin-right: -7.6%;
padding-left: -7.6%;
padding-right: -7.6%;
max-width: 1000px;
}
#ie7 section.featured-post {
margin-left: -7.6%;
margin-right: -7.6%;
max-width: 850px;
}
#ie7 section.recent-posts {
margin-right: 7.6%;
}
/* =IE8
----------------------------------------------- */
#ie8 section.feature-image.large img {
width: 100%;
}