『Twenty Ten』で作る簡単オリジナルテーマ

あけましておめでとうございました？
ああ、もう4月も近いですね。今年初めての記事です。
ということで、サイトのテーマをリニューアルして心機一転していきます。
今回のリニューアルではWordPressにデフォルトで含まれる『Twenty Ten』を少しいじっただけのお手軽自作テーマを使用しました。
そのレシピをざっくり紹介。

Twenty Tenはデフォルトのテーマであると同時に洗練されたデザインとソースコードで構成されています。WordPressの機能を存分に生かして作られているので、テーマの自作のベースとしてはうってつけです。

今回、自作といっても基本的なパーツ構成は変えずに、要所をちょこっと修正するだけにとどまりました。以下が今回施した修正の要点をまとめます。

主にはstyle.cssの編集です。ここに記述した事以外にもちょいちょいいじっていますが、ほとんどインライン要素についてなので、好みによって調整するといった形になります。

１．外枠を角丸にする

IEは無視です。#wrapperに以下のようなコードを追記します。

style.css

#wrapper {
    border-radius: 20px;            /* 追記 */
    -webkit-border-radius: 20px;    /* 追記 */
    -moz-border-radius: 20px;       /* 追記 */
    background: #fff;
    margin-top: 20px;
    padding: 0 20px;
}

２．背景を半透明にする

opacityを使う手もありますが、それだと内包する要素も透過してしまうので、ここでは無難に半透明のPNG背景画像を仕込みました。
俺の場合はフリーソフトの『GIMP』で背景色にしたい色でキャンバス全体を塗り、透明度を適当に指定します。（当サイトは40くらい）PNG画像の大きさは適当です。

そうして作ったPNG画像をテーマディレクトリのimages内に保存し、CSSで普通に敷き詰めます。(画像のファイル名はalpha_bg02.pngとしました）

style.css

#wrapper {
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    background: url(images/alpha_bg02.png) left top repeat transparent; /* 追記 */
    margin-top: 20px;
    padding: 0 20px;
}

ちなみに子要素にも同じ背景画像を使うことで、その部分はさらに透明度が落ちるようになっています。

３．背景画像の変更

Twenty Tenの基本機能として、背景画像が管理画面で変更可能です。管理画面から「外観＞背景」を開きます。
「画像をアップロード」からローカルの画像ファイルをアップロードすることで、背景を変更することが出来ます。
表示オプションで配置もある程度自由自在です。

当サイトでは草のシルエットをスクロール無し（固定）で水平方向にリピートをかけています。
しかしながら、左右の位置あわせは出来ても、なぜか上下方向についてはtop固定になってしまって変更できません。けしからん。
これだと縦に長いディスプレイで見られると下が見切れてしまってカコワルイ。

ということで機能追加されることに期待しつつ、暫定対処としてstyle.cssで中央下寄せ（つまりcenter bottom）にします。
デフォルトで言うとの207行目にあるbodyに対して!importantを仕掛けます。

style.css

body {
    background: #f1f1f1;
    background-position: center bottom !important;  /* 追記 */
}

たまにはこういった強引さも必要です。

４．ヘッダ画像の撤去

デフォルトだとヘッダ用の画像がはじめからはめ込まれた状態になっています。
うちではこのような画像は使う気がないので、消します。管理画面から「外観＞ヘッダー」を開きます。
「ヘッダー画像を削除」のボタンをポチっとすれば完了。

ヘッダ画像は使いたいけど大きさを変えたい！って思う方は、functions.phpの下記部分の数値をいじってください。
デフォルトは940×198ピクセルに指定されています。

functions.php

define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyten_header_image_width', 940 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyten_header_image_height', 198 ) );

５．タイトルロゴの設置

サイトタイトルはテキストで入れられているので、自作のロゴに差し替えました。
特別な方法は取らず、imagesディレクトリに保存した画像を以下のような感じでheader.phpに埋め込みます。

header.php

<<?php echo $heading_tag; ?> id="site-title">
    <span>
        <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img src="<?php bloginfo('template_directory');?>/images/title_logo.png" alt="<?php bloginfo( 'name' ); ?>"></a>
    </span>
</<?php echo $heading_tag; ?>>

ただし、このままだとレイアウトがちょっとおかしくなるので、style.cssの一部をコメントアウトします。

style.css

#branding img {
    /*
    border-top: 4px solid #000;
    border-bottom: 1px solid #000;
    display: block;
    float: left;
    */
}

ここが何に影響するかちょっとわからないですが、特に問題は無いようです。

この様な方法の代わりに管理画面から差し替え可能なヘッダ画像をここに流用することもありかもしれませんな。
でも俺の場合はいざという時にヘッダ画像を表示できるように、あえてデフォルトのままにしています。

以上！その他も少々いじりましたが、構想・素材の準備・ソース修正を合わせて計3時間程度の低コストなリニューアルでした。
これだけでも結構オリジナリティ出てるとは思いませんか？
自作なんて面倒くさいからやったこと無いって人も是非『Twenty Ten』をいじってオリジナルテーマを作ってみましょう！

１．外枠を角丸にする

２．背景を半透明にする

３．背景画像の変更

４．ヘッダ画像の撤去

５．タイトルロゴの設置

コメント

関連記事