CSSだけでもけっこうイケルTwenty...

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

そこから踏み出す第一歩

@Webourgeon_com

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

自己紹介

フリーでWebなこととかそうでもないこととか

うえぶるじょん

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

Twitter @Webourgeon_com

Webourgeon(http://webourgeon.com/)というブログで主にWordPresssのことについて書いています

http://webourgeon.com


Twenty Eleven Twenty Ten

Twenty Eleven Twenty Ten

ファイルが多い！

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

というわけで今日は

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

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

そこから踏み出す第一歩

http://webourgeon.com/onlycss/



早速やってみましょう

1．準備する2．全体の調整3.　ヘッダー4.　メニュー

5.　投稿部分6．サイドバー7．コメントフォーム8．フッターウィジェット

1．準備する

1．子テーマをつくろう

準備する

2．ソースをみてみよう

3．便利なCSSテクニック

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

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

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

http://wpdocs.sourceforge.jp

http://wpdocs.sourceforge.jp

ここにCSSをどんどん

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

1-2．ソースをみてみよう

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

2.便利機能を使う

準備する

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

ブラウザでソースを見る

ロゴ部分

該当CSSを探す

便利機能を使う

HTMLの構造も分かりやすい

CSSもひと目でわかる！

便利機能を使う

1-3．便利なCSSテクニック

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

準備する

背景画像画像置き換え絶対配置WebフォントCSS3

（＊使い方注意）

（＊日本語はまだ難しい）

（＊未対応ブラウザ対策）

2．全体の調整背景やフォント色などの

基本設定を変えてみる

Before After

Twenty Tenのレイアウト構成

構造 #masthead

#wrapper

#header

#main

#footer

#container#content #primary

#secondary

#colophon

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

http://webourgeon.com/2010/10/06/constitution-of-the-theme-1/

http://webourgeon.com/2010/10/06/constitution-of-the-theme-1/



body { font-family: verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳＰゴシック","MS PGothic",Sans-Serif; color: #392917; background: #F6F2E8; border-top: solid 3px #392917; }

CSS

背景色

フォント



#wrapper{ padding: 0;}

外枠の余白をなしに

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

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

#wrapper{ padding: 0 20px;}

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

CSS


基本設定を変えてみるヒント

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

3カラムにしてみる

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

ヘッダーのデザインを

変えよう3．ヘッダーBefore

After


変えよう3．ヘッダー

1．ロゴを変える

3．サイトの説明文を移動する

2．カスタムヘッダーをつかう


変えよう3-1．ロゴを変える

構造#site-title#site-title a



http://www.google.com/webfontsGoogle web fonts

http://www.google.com/webfonts

http://www.google.com/webfonts

#site-title{ font-family: 'Fondamento', cursive; font-size: 40px;}#site-title a{ color: #392917; }

@import url(http://fonts.googleapis.com/css?family=Fondamento);



CSS

Webフォント

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

http://fonts.googleapis.com/css?family=Fondamento

http://fonts.googleapis.com/css?family=Fondamento

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

弱点



3-2．カスタムヘッダーヘッダーのデザインを

変えようBefore

After


変えよう

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


変えよう構造＃branding

img

#branding img { border-top: none; border-bottom: none;}


変えようCSS

上下のボーダーを消す

3-3．サイトの説明文を移動ヘッダーのデザインを

変えようBefore

After

After

#site-description


変えよう

3-3．サイトの説明文を移動構造

#site-title{ float: none;}#site-description { float: none; width: 940px; }

CSS

フロート解除


変えよう

3-3．サイトの説明文を移動

#site-description { position: absolute; top: 240px; left: 10px;}

条件によって表示が崩れる可能性あり

#wrapper{ position: relative; }

絶対配置


変えよう

3-3．サイトの説明文を移動

グローバルナビをデザインする

4．メニューBefore

After


4．メニュー

1．カスタムメニューをつかう

2．デザイン変更


4-1．カスタムメニューをつかう

構造

#access

.current_page_item

div.menu

ul li

.page_item

デフォルトの場合


4-2．デザイン変更

構造

.menu-item-type-custom

.menu.menu-item .rss

ul #menu-global

カスタムメニューの場合

.menu-header

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



#access { background: none; border-left: 1px dotted #B2ABA0;/* メニューの一番左にもボーダー */}

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

背景色を消してボーダーを入れます


4-2．デザイン変更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; /* 現在のページのフォント色変更 */}



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

CSS

画像置き換え



(display:none ?)

絶対配置を利用してメニューを右上に#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．「続きを読む」

5-1．記事部分の構成

.entry-title.post

.entry-meta

.entry-content

.entry-utility

記事部分のカスタマイズ

構造

5-2．カテゴリーごとに　　　記事タイトルにアイコン記事部分の

カスタマイズカテゴリーごとに違うアイコン


構造<div id="post-62" class="post-62 post type-post status-publish format-standard hentry category-cat-2">

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

#content .entry-title{padding: 5px 0 5px 35px;

}.category-cat-1 .entry-title{ background: url(img/cat-1.gif) no-repeat left center;}


CSS

背景画像

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

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

.entry-meta

.meta-prep

.entry-date .meta-sep

.author

構造


CSS

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

消す

5-3．投稿日・作成者


.entry-date{ position: absolute; top: -2px; left: 10px; background: #665949; 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絶対配置

CSS3



.entry-meta .author { background: url(img/pencil.gif) no-repeat left center; display: inline-block; height: 22px; padding-left: 20px;}

CSS

背景画像


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

AfterBefore


img.alignleft

img.alignright

img.aligncenter

5-4．写真をおしゃれに

構造

img.alignnone


CSS border: 1px solid #EEE3D8; border-radius: 5px; -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;

CSS3



Before After


.wp-caption-text

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



構造


CSS

CSS3

.wp-caption{ border: 1px solid #EEE3D8; border-radius: 5px; -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;}



CSS

.wp-caption p.wp-caption-text { color: #7E7971;

}


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

Before After


.meta-nav.more-link

5-5．「続きを読む」

構造


CSS .entry-content .more-link{ display: inline-block; padding: 8px; float: 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; -moz-border-radius: 5px; margin-bottom: 10px; background: #ACC776;}.more-link .meta-nav{ display: none;}.entry-content .more-link{ background: #ACC776;}#content .entry-content .more-link:hover{ background: #A4B480; color: #fff;}

CSS3

block要素のように

消す

5-5．「続きを読む」

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

Before After

サイドバーのカスタマイズ

.widget-title li.widget-container

#primary .widget-area

ulul li

構造

ulの入れ子に注意

6.サイドバー


CSS #main .widget-title{ background: #D3CBBF; padding: 5px 3px; border-left: 5px solid #7E7971; border-top-right-radius: 20px; -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;}

CSS3

6.サイドバー


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

6.サイドバー

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

Before

After

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

＃comments.reply-title

.comment-notes.comment-form-author.comment-form-email.comment-form-url

.comment-form-comment

.required

.form-submit

構造

7. コメントフォーム


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

CSS

背景画像



CSSinput[type="text"],textarea { background: #F4EFE6; border: 3px solid #D7CEC2; border-radius: 5px; -webkit-border-radius: 5px ; -moz-border-radius: 5px; 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;}

背景色

CSS3


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

After

Before

After

フッターのカスタマイズ

#footer-widget-area

#first .widget-area #second .widget-area

.widget-container

.widget-title

フッターのウィジェットは4つまで

8. フッターウィジェット

構造

フッターのカスタマイズ

#footer-widget-area .widget-area { margin-right: 20px; width: 460px;}#footer-widget-area #second { margin-right: 0;}

CSS

8. フッターウィジェット

幅変更

お疲れ様でした。

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

でも・・・

知ってる部分がある！！

<?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

footer.php

sidebar.php

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

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

読んだり、聞いたり。。

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

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

みんなで

WordPressを楽しみましょう!

ありがとうございました

本日のスライドはhttp://webourgeon.com/

で公開予定です

Twitter@Webourgeon_com

続きも書きます



CSSだけでもけっこうイケルTwenty...

Documents

Transcript of CSSだけでもけっこうイケルTwenty...