WordPressで子テーマを作る CSS編

このブログで使ってる実際のCSSを書いていきたいと思います。 Twenty Ten メイン部分のCSSカスタマイズ〜ナビゲーション | Webourgeon 子テーマのCSSについてはこの記事が分かりやすくとても参考になります。ですので、こちらでは詳細を省いてCSSを晒してコメントしています。

フォント

Twenty Tenのデフォルトでは日本語フォントが明朝体で表示されてしまうので変更。

*{
font-family: &quot;Hiragino Kaku Gothic Pro&quot;, &quot;MS UI Gothic&quot;, &quot;MS P Gothic&quot;, Osaka, Arial, helvetica, sans-serif;
}

サイドバーのテープとヘッダーの花の画像

サイドバーのテープとヘッダーの花の画像は描いたものを分割してそれを#branding、#access、#mainの背景に指定しています。また、#accessはborderをなくしたのでその分幅を調整しています。

#branding {
    background-image: url(images/header_b.png);
    background-position: right top;
    background-repeat: no-repeat;
    }
#access {
    background: #000000;
    background-image: url(images/header_a.png);
    background-position: right top;
    background-repeat: no-repeat;
    border: none;
    width: 940px !important;
    width: 938px;
}
#access .menu-header,
div.menu {
    width: 930px!important;
    width: 928px;
}
#main {
    background: #ffffff;
    background-image: url(images/header_s.png);
    background-position: right top;
    background-repeat: no-repeat;
    }

#brandingの画像非表示

本来は推奨されるものではありませんが、Twenty Tenの子テーマとしていじるのでご愛嬌。これで上部の画像ヘッダーが消えて一気にTwenty Tenっぽくなくなります。

#branding img {
    display: none;
}

#accessの色指定

「current_~」を用いて現在のページを示すところだけ違うスタイルにすることが可能です。「#access ul li.current_page_item:hover > a」はTwenty Tenには無いので追加指定しています。

#access a {
    color: #cccccc;
    display: block;
    line-height: 38px;
    padding: 0 10px;
    text-decoration: none;
}
#access li:hover &gt; a,
#access ul ul:hover &gt; a {
    background: #3399ff;
    color: #ffff00;
}
#access ul li.current_page_item:hover &gt; a {
    color: #ffff00;
    }
#access ul li.current_page_item &gt; a,
#access ul li.current-menu-ancestor &gt; a,
#access ul li.current-menu-item &gt; a,
#access ul li.current-menu-parent &gt; a {
    color: #ffffff;
}

エントリー

タイトルやカレンダー表示の変更、著者名の非表示など。.entry-titleではborder-leftを使ってタイトルの横に線を追加し、.entry-utilityは右寄せに。

.entry-title {
    padding-left: 5px;
    border-left: 5px solid #0066ff;
}
.entry-meta {
    padding-top: 5px;
    padding-bottom: 5px;
    }
.entry-meta .meta-prep{
     display: none;
}
.entry-date{
      display: block;
      background-image: url(images/calendar1.png);
      background-repeat: no-repeat;
      padding: 0 0 5px 30px;
}
.entry-utility {
    text-align: right;
}

CSSに関しては大まかにこの程度しかいじっていません。基本的にはTwenty Tenの形を崩していないので残りは色を変更しているだけです。またfooter部分についてはまだ検討中なのでこれから作っていきたいと思います。ソーシャルブックマークの追加や文言の変更などphpでいじった部分についてはまた次に。

ゲインオーバー

MUGA, I am.