WordBenchTokyo-20111126

CSSだけでもけっこうイケル
Twenty Tenのカスタマイズと
そこから踏み出す第一歩

WordPressをわくわくしながらインストール
したけど、中のファイルを見たらそ∼っと
閉じたくなっちゃったあなたへ....

@Webourgeon_com

自己紹介
うえぶるじょん
フリーでWebなこととかそうでもないこととか
Webourgeon(http://webourgeon.com/)というブログで
主にWordPresssのことについて書いています

WordPress
HTMLコーディング / Webデザイン
Flashアニメーション
？？？？？？

Twitter @Webourgeon_com

Twenty Eleven Twenty Ten

ファイルが多い！

なんですか？
この宇宙語は？

というわけで今日は

CSSだけでもけっこうイケル
Twenty Tenのカスタマイズと

そこから踏み出す第一歩

についてお話ししたいと思います。

http://webourgeon.com/onlycss/

早速やってみましょう

1．準備する 5. 投稿部分
2．全体の調整 6．サイドバー
3. ヘッダー 7．コメントフォーム
4. メニュー 8．フッターウィジェット

1．準備する準備する

1．子テーマをつくろう

2．ソースをみてみよう

3．便利なCSSテクニック

1-1. 子テーマをつくろう準備する

必要なことはここにある！

WordPress Codex 日本語版
http://wpdocs.sourceforge.jp/

ここにCSSをどんどん

上書きしていけばいいだけ

1-2．ソースをみてみよう
準備する

1.ブラウザでソースを見る

2.便利機能を使う

ブラウザでソースを見る

ロゴ部分

該当CSSを探す

勉強になるけど
ちょっと
めんどくさい

便利機能を使う

HTMLの構造も分かりやすい

CSSもひと目でわかる！

1-3．便利なCSSテクニック
準備する

使えると便利でそんなに難しくないCSSの小技

背景画像
画像置き換え（＊使い方注意）
絶対配置
Webフォント（＊日本語はまだ難しい）
CSS3 （＊未対応ブラウザ対策）

2．全体の調整背景やフォント色などの
基本設定を変えてみる

Before After

構造
#masthead
Twenty Tenの #header
レイアウト構成

#wrapper #main
#container
#content #primary

#secondary

ここに詳しく
http://webourgeon.com/2010/10/06/constitution-of-the-theme-1/

#colophon #footer

1．全体の調整
背景やフォント色などの
CSS
body {
font-family: verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic
Pro",Osaka,
"ＭＳＰゴシック","MS PGothic",Sans-Serif;
フォント
color: #392917;
background: #F6F2E8; 背景色
border-top: solid 3px #392917;
}

1．全体の調整
CSS 基本設定を変えてみる

#wrapper{ #wrapper{
padding: 0; padding: 0 20px;
} }

外枠の余白をなしに

#content { #content {
margin: 0 280px 0 0; margin: 0 280px 0 20px;
} }

コンテンツの
左マージンをなしに

1．全体の調整
ヒント

コンテンツとサイドバーの幅を変えてみる

コンテンツとサイドバーの位置を変えてみる

3カラムにしてみる

3．ヘッダーヘッダーのデザインを
変えよう
Before

After

3．ヘッダーヘッダーのデザインを
変えよう

1．ロゴを変える
2．カスタムヘッダーをつかう
3．サイトの説明文を移動する

3-1．ロゴを変えるヘッダーのデザインを
変えよう

構造
#site-title
#site-title a

変えよう

Google web fonts
http://www.google.com/webfonts

変えよう
CSS
@importでも使えるので
CSSファイルからだけでも指定できる

@import url(http://fonts.googleapis.com/css?family=Fondamento);
#site-title{
font-family: 'Fondamento', cursive; font-size: 40px;
}
#site-title a{
Webフォント
color: #392917;
}

変えよう

弱点

Google Fonts には日本語がない

その他webフォントも
日本語フォントの使用は
まだ現実的ではない

3-2．カスタムヘッダー
ヘッダーのデザイン
Before 変えよう

After

変えよう

カスタムヘッダーの使い方

構造変えよう
＃branding

img

CSS 変えよう

#branding img {
border-top: none;
border-bottom: none;
}
上下のボーダーを消す

3-3．サイトの説明文を移動
変えよう
Before After

After

構造変えよう

#site-description

CSS 変えよう

#site-title{
ﬂoat: none;
フロート解除
}
#site-description {
ﬂoat: none;
width: 940px;
}

#wrapper{ 変えよう
position: relative;
}

#site-description {
position: absolute; 絶対配置
top: 240px;
left: 10px; 条件によって表示が
} 崩れる可能性あり

4．メニューグローバルナビを
デザインする
Before

After

4．メニューグローバルナビを
デザインする

1．カスタムメニューをつかう
2．デザイン変更

4-1．カスタムメニューをつかう
グローバルナビを
デザインする

4-2．デザイン変更グローバルナビを
デザインする
構造デフォルトの場合

#access
div.menu .page_item

ul li

.current_page_item

デザインする
構造カスタムメニューの場合

.menu-header
ul #menu-global .menu
.menu-item
.rss

.menu-item-type-custom

ちょっと構造が変わります

デザインする
CSS 背景色を消してボーダーを入れます
#access {
background: none;
border-left: 1px dotted #B2ABA0;/* メニューの一番左にもボーダー */
}

#access .menu-header li, ボーダー
div.menu li {
border-right: 1px dotted #B2ABA0; /* 各メニュー右にボーダー */
}

デザインする
CSS
テキストの色を調節します
#access a {
color: #392917; /* メニューのリンク色変更 */
}
#access li:hover > a,
#access ul ul :hover > a {
background: none;
color: #71512E;
}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
color: #632220; /* 現在のページのフォント色変更 */
}

デザインする
CSS
カスタムメニューで付けたクラス名を利用して
RSSをアイコンに変えます
#access li.rss{
background: url(img/rss.gif) no-repeat center center;
border-right: none;
width: 50px;
text-indent: -9999px;
画像置き換え
} 使用に注意！
(display:none ?)

CSS デザインする
絶対配置を利用してメニューを右上に
#access {
position: absolute;
top : 0;
right: 0; 絶対配置
width: auto;
}
#access .menu-header,
div.menu {
width: auto;
}

5．記事部分記事部分の
カスタマイズ
Before

After

5．記事部分記事部分の
カスタマイズ
1. 記事部分の構成

2. カテゴリーごとに記事タイトルに
アイコン

3. 投稿日・作成者
4. 写真をおしゃれに
5．「続きを読む」

51．記事部分の構成記事部分の
カスタマイズ
構造
.entry-title
.post
.entry-meta

.entry-content

.entry-utility

52．カテゴリーごとに
記事部分の
記事タイトルにアイコン
カスタマイズ
カテゴリーごとに
違うアイコン

記事部分の
カスタマイズ
構造
<div id="post-62" class="post-62 post type-
post status-publish format-standard hentry
category-cat-2">

記事部分の
カスタマイズ
CSS
#content .entry-title{
padding: 5px 0 5px 35px;
}
.category-cat-1 .entry-title{
background: url(img/cat-1.gif) no-repeat left
center; 背景画像
}

5-3．投稿日・作成者記事部分の
カスタマイズ
構造
.entry-meta

.meta-prep
.author

.entry-date .meta-sep

カスタマイズ
CSS

.entry-meta .meta-prep,.entry-
meta .meta-sep{
display: none; 消す
}

カスタマイズ
CSS .entry-date{
position: absolute; 絶対配置
top: -2px;
left: 10px;
background: #665949; CSS3
border-bottom-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
padding: 5px 10px;
}

カスタマイズ
CSS
.entry-meta .author {
background: url(img/pencil.gif)
no-repeat left center;
display: inline-block; 背景画像
height: 22px;
padding-left: 20px;
}

5-4．写真をおしゃれに記事部分の
カスタマイズ
Before
After

カスタマイズ
構造
img.alignleft

img.alignright

img.aligncenter

img.alignnone

カスタマイズ
CSS
border: 1px solid #EEE3D8;
border-radius: 5px; CSS3
-webkit-border-radius: 5px ;
-moz-border-radius: 5px;
-webkit-box-shadow: 2px 2px 4px rgb(211, 203, 191);
-moz-box-shadow: 2px 2px 4px rgb(211, 203, 191);
-ms-box-shadow: 2px 2px 4px rgb(211, 203, 191);
box-shadow: 2px 2px 4px rgb(211, 203, 191);
background: #FFFFFE;
max-width: 630px !important; /* prevent too-wide
images from breaking layout */
padding: 5px;

カスタマイズ
Before After

カスタマイズ
構造

<div id="attachment_36" class="wp-caption
alignleft" style="width: 310px">

.wp-caption-text

カスタマイズ
CSS .wp-caption{
border: 1px solid #EEE3D8;
border-radius: 5px;
-webkit-border-radius: 5px ; CSS3
-webkit-box-shadow: 2px 2px 4px rgb(211, 203,
191);
-moz-box-shadow: 2px 2px 4px rgb(211, 203, 191);
-ms-box-shadow: 2px 2px 4px rgb(211, 203, 191);
box-shadow: 2px 2px 4px rgb(211, 203, 191);
background: #FFFFFE;
max-width: 630px !important; /* prevent too-wide
images from breaking layout */
padding: 5px;
}

カスタマイズ
CSS
.wp-caption p.wp-caption-text {
color: #7E7971;
}

5-5．「続きを読む」記事部分の
カスタマイズ
Before
After

カスタマイズ
構造

.more-link .meta-nav

.entry-content .more-link{
カスタマイズ
CSS display: inline-block;
padding: 8px;
block要素のように
ﬂoat: right;
text-decoration: none;
font-weight: bold;
color: #FFF;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-radius: 5px;
-webkit-border-radius: 5px; CSS3
margin-bottom: 10px;
background: #ACC776;
}
.more-link .meta-nav{ 消す
display: none;
}

6.サイドバーサイドバーの
カスタマイズ
Before After

カスタマイズ
#primary .widget-area
構造 ul
ul
li
.widget-title li.widget-container

ulの入れ子に注意

カスタマイズ
CSS #main .widget-title{
background: #D3CBBF;
padding: 5px 3px;
border-left: 5px solid #7E7971;
border-top-right-radius: 20px;
CSS3
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topright: 20px;
border-bottom-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
}

カスタマイズ
CSS
#main .widget-area ul li ul li{
background: url(img/link.gif) no-repeat 0 5px;
padding-left: 10px;
} 背景画像

7. コメントフォームコメントフォームの
カスタマイズ
Before

After

カスタマイズ
＃comments
.reply-title
.comment-notes
.comment-form-author
.required
.comment-form-email
.comment-form-url

構造
.comment-form-comment

.form-submit

カスタマイズ
CSS

h3#comments-title, h3#reply-title{
background: url(img/comment.gif)
no-repeat left center;
padding-left: 40px; 背景画像
height: 35px;
}

カスタマイズ
CSS
input[type="text"],
textarea {
background: #F4EFE6; 背景色
border: 3px solid #D7CEC2;
border-radius: 5px;
-webkit-border-radius: 5px ;
CSS3
box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
padding: 2px;
}

8. フッターウィジェットフッターの
カスタマイズ
Before

After

After

カスタマイズ
構造
#footer-widget-area

.widget-container
.widget-title

#ﬁrst .widget-area #second .widget-area
フッターのウィジェットは4つまで

カスタマイズ
CSS
#footer-widget-area .widget-area {
margin-right: 20px;
width: 460px; 幅変更
}
#footer-widget-area #second {
margin-right: 0;
}

でも・・・

ここまで出来たら
欲が出ます・・・よね？

知ってる部分がある！！

<?php bloginfo( 'description' ); ?>

サイトの説明文のところらしい

ループって何？

調べる

ついでに覚える

使い方をチェック

新しい子テーマを作る

Twenty Tenから
header.phpをコピー

#brandingの下に置いてみる

サイトの説明文の位置が変わった！

またCSSで調整すればOK!

サイト名をロゴ画像に置き換えてみる

または
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/logo.gif" />

ロゴが画像に変わった！

余計なボーダーは
CSSで調整すればOK!

このように今まで見てきたHTMLのタグや
CSSのid名・クラス名などを目印に

テンプレートタグやPHPで
何が出されているのか
考えていきます。

入れ替えたり書き換えたり・・

消したり足したり・・

わからないところはどんどん調べて
自分にとって必要なところから
覚えていくのも
ひとつの方法ではないかと思います

実は。。。。

ここまで来たらオリジナル
のテーマ作成まであと一歩

サイトの説明
ロゴ問い合わせサイトマップ

きちんとHTMLと
画像
CSSを書いたら
ナビゲーション

メニューコンテンツ

何が当てはまるか考えよう


サイトの説明
ロゴ問い合わせサイトマップ

header.php
画像

メニューコンテンツ index.php
sidebar.php

分割するときにHTMLの
構造をこわさないようにね

footer.php

たくさんの先輩の方々のブログ、
フォーラム、書籍、
色々なところに情報が
たくさんあります

読んだり、聞いたり。。

自分が悩んだこと
できるようになったこと、

今度は誰かの役に立つかも
しれません。

みんなで
WordPressを
楽しみましょう!

ありがとうございました

本日のスライドは
http://webourgeon.com/
続きも書きます
で公開予定です

Twitter
@Webourgeon_com

WordBenchTokyo-20111126

More Related Content

What's hot

Similar to WordBenchTokyo-20111126

WordBenchTokyo-20111126