WordBench Totyo 2011でのスライド

1. CSSだけでもけっこうイケル
Twenty Tenのカスタマイズと
そこから 踏み出す第一歩
WordPressをわくわくしながらインストール
したけど、中のファイルを見たらそ∼っと
閉じたくなっちゃったあなたへ....
@Webourgeon_com

2. 自己紹介
うえぶるじょん
フリーでWebなこととかそうでもないこととか
Webourgeon(http://webourgeon.com/)というブログで
主にWordPresssのことについて書いています
WordPress
HTMLコーディング / Webデザイン
Flashアニメーション
？？？？？？
Twitter @Webourgeon_com

4. Twenty Eleven Twenty Ten

5. Twenty Eleven Twenty Ten
ファイルが多い！

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

10. というわけで 今日は
CSSだけでもけっこうイケル
Twenty Tenのカスタマイズと
そこから 踏み出す第一歩
についてお話ししたいと思います。

11. http://webourgeon.com/onlycss/

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

13. 1．準備する 準備する
1．子テーマをつくろう
2．ソースをみてみよう
3．便利なCSSテクニック

14. 1-1. 子テーマをつくろう 準備する
必要なことはここにある！
WordPress Codex 日本語版
http://wpdocs.sourceforge.jp/

16. ここにCSSをどんどん
上書きしていけばいいだけ

17. 1-2．ソースをみてみよう
準備する
1.ブラウザでソースを見る
2.便利機能を使う

18. ブラウザでソースを見る
ロゴ部分
該当CSSを探す
勉強になるけど
ちょっと
めんどくさい

19. 便利機能を使う

20. 便利機能を使う
HTMLの構造も分かりやすい
CSSもひと目でわかる！

21. 1-3．便利なCSSテクニック
準備する
使えると便利でそんなに難しくないCSSの小技
背景画像
画像置き換え （＊使い方注意）
絶対配置
Webフォント（＊日本語はまだ難しい）
CSS3 （＊未対応ブラウザ対策）

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

23. 構造
#masthead
Twenty Tenの #header
レイアウト構成
#wrapper #main
#container
#content #primary
#secondary
ここに詳しく
http://webourgeon.com/2010/10/06/constitution-of-the-theme-1/
#colophon #footer

24. 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;
}

25. 1．全体の調整
背景や フォント色などの
CSS 基本設 定を変えてみる
#wrapper{ #wrapper{
padding: 0; padding: 0 20px;
} }
外枠の余白をなしに
#content { #content {
margin: 0 280px 0 0; margin: 0 280px 0 20px;
} }
コンテンツの
左マージンをなしに

26. 1．全体の調整
背景や フォント色などの
基本設 定を変えてみる
ヒント
コンテンツとサイドバーの幅を変えてみる
コンテンツとサイドバーの位置を変えてみる
3カラムにしてみる

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

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

29. 3-1．ロゴを変える ヘッダーのデザインを
変えよう
構造
#site-title
#site-title a

30. 3-1．ロゴを変える ヘッダーのデザインを
変えよう
Google web fonts
http://www.google.com/webfonts

31. 3-1．ロゴを変える ヘッダーのデザインを
変えよう
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;
}

32. 3-1．ロゴを変える ヘッダーのデザインを
変えよう
弱点
Google Fonts には日本語がない
その他webフォントも
日本語フォントの使用は
まだ現実的ではない

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

34. 3-2．カスタムヘッダー
ヘッ ダーのデザイン
変えよう
カスタムヘッダーの使い方

35. 3-2．カスタムヘッダー
ヘッ ダーのデザイン
構造 変えよう
＃branding
img

36. 3-2．カスタムヘッダー
ヘッ ダーのデザイン
CSS 変えよう
#branding img {
border-top: none;
border-bottom: none;
}
上下のボーダーを消す

37. 3-3．サイトの説明文を移動
ヘッ ダーのデザイン
変えよう
Before After
After

38. 3-3．サイトの説明文を移動
ヘッ ダーのデザイン
構造 変えよう
#site-description

39. 3-3．サイトの説明文を移動
ヘッ ダーのデザイン
CSS 変えよう
#site-title{
float: none;
フロート解除
}
#site-description {
float: none;
width: 940px;
}

40. 3-3．サイトの説明文を移動
ヘッ ダーのデザイン
#wrapper{ 変えよう
position: relative;
}
#site-description {
position: absolute; 絶対配置
top: 240px;
left: 10px; 条件によって表示が
} 崩れる可能性あり

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

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

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

44. 4-2．デザイン変更 グローバルナビを
デザインする
構造 デフォルトの場合
#access
div.menu .page_item
ul li
.current_page_item

45. 4-2．デザイン変更 グローバルナビを
デザインする
構造 カスタムメニューの場合
.menu-header
ul #menu-global .menu
.menu-item
.rss
.menu-item-type-custom
ちょっと構造が変わります

46. 4-2．デザイン変更 グローバルナビを
デザインする
CSS 背景色を消してボーダーを入れます
#access {
background: none;
border-left: 1px dotted #B2ABA0;/* メニューの一番左にもボーダー */
}
#access .menu-header li, ボーダー
div.menu li {
border-right: 1px dotted #B2ABA0; /* 各メニュー右にボーダー */
}

47. 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; /* 現在のページのフォント色変更 */
}

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

49. 4-2．デザイン変更 グローバルナビを
CSS デザインする
絶対配置を利用してメニューを右上に
#access {
position: absolute;
top : 0;
right: 0; 絶対配置
width: auto;
}
#access .menu-header,
div.menu {
width: auto;
}

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

51. 5．記事部分 記事部分の
カスタマイズ
1. 記事部分の構成
2. カテゴリーごとに記事タイトルに
アイコン
3. 投稿日・作成者
4. 写真をおしゃれに
5．「続きを読む」

52. 5­1． 記事部分の構成 記事部分の
カスタマイズ
構造
.entry-title
.post
.entry-meta
.entry-content
.entry-utility

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

54. 5­2．カテゴリーごとに
記事部分の
記事タイトルにアイコン
カスタマイズ
構造
<div id="post-62" class="post-62 post type-
post status-publish format-standard hentry
category-cat-2">

55. 5­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; 背景画像
}

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

57. 5-3．投稿日・作成者 記事部分の
カスタマイズ
CSS
.entry-meta .meta-prep,.entry-
meta .meta-sep{
display: none; 消す
}

58. 5-3．投稿日・作成者 記事部分の
カスタマイズ
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;
}

59. 5-3．投稿日・作成者 記事部分の
カスタマイズ
CSS
.entry-meta .author {
background: url(img/pencil.gif)
no-repeat left center;
display: inline-block; 背景画像
height: 22px;
padding-left: 20px;
}

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

61. 5-4．写真をおしゃれに 記事部分の
カスタマイズ
構造
img.alignleft
img.alignright
img.aligncenter
img.alignnone

62. 5-4．写真をおしゃれに 記事部分の
カスタマイズ
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;

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

64. 5-4．写真をおしゃれに 記事部分の
カスタマイズ
構造
<div id="attachment_36" class="wp-caption
alignleft" style="width: 310px">
.wp-caption-text

65. 5-4．写真をおしゃれに 記事部分の
カスタマイズ
CSS .wp-caption{
border: 1px solid #EEE3D8;
border-radius: 5px;
-webkit-border-radius: 5px ; CSS3
-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;
}

66. 5-4．写真をおしゃれに 記事部分の
カスタマイズ
CSS
.wp-caption p.wp-caption-text {
color: #7E7971;
}

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

68. 5-5．「続きを読む」 記事部分の
カスタマイズ
構造
.more-link .meta-nav

69. 5-5．「続きを読む」 記事部分の
.entry-content .more-link{
カスタマイズ
CSS display: inline-block;
padding: 8px;
block要素のように
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; CSS3
-moz-border-radius: 5px;
margin-bottom: 10px;
background: #ACC776;
}
.more-link .meta-nav{ 消す
display: none;
}

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

71. 6.サイドバー サイドバーの
カスタマイズ
#primary .widget-area
構造 ul
ul
li
.widget-title li.widget-container
ulの入れ子に注意

72. 6.サイドバー サイドバーの
カスタマイズ
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;
}

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

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

75. 7. コメントフォーム コメントフォームの
カスタマイズ
＃comments
.reply-title
.comment-notes
.comment-form-author
.required
.comment-form-email
.comment-form-url
構造
.comment-form-comment
.form-submit

76. 7. コメントフォーム コメントフォームの
カスタマイズ
CSS
h3#comments-title, h3#reply-title{
background: url(img/comment.gif)
no-repeat left center;
padding-left: 40px; 背景画像
height: 35px;
}

77. 7. コメントフォーム コメントフォームの
カスタマイズ
CSS
input[type="text"],
textarea {
background: #F4EFE6; 背景色
border: 3px solid #D7CEC2;
border-radius: 5px;
-webkit-border-radius: 5px ;
-moz-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;
}

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

79. 8. フッターウィジェット フッターの
カスタマイズ
構造
#footer-widget-area
.widget-container
.widget-title
#first .widget-area #second .widget-area
フッターのウィジェットは4つまで

80. 8. フッターウィジェット フッターの
カスタマイズ
CSS
#footer-widget-area .widget-area {
margin-right: 20px;
width: 460px; 幅変更
}
#footer-widget-area #second {
margin-right: 0;
}

81. お疲れ様でした。

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

83. 知ってる部分がある！！

84. <?php bloginfo( 'description' ); ?>
サイトの説明文のところらしい

85. ループって何？
調べる
ついでに覚える
使い方をチェック

86. 新しい子テーマを作る
Twenty Tenから
header.phpをコピー

87. #brandingの下に置いてみる

88. サイトの説明文の位置が変わった！
またCSSで調整すればOK!

89. サイト名をロゴ画像に置き換えてみる
または
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/logo.gif" />

90. ロゴが画像に変わった！
余計なボーダーは
CSSで調整すればOK!

91. このように今まで見てきたHTMLのタグや
CSSのid名・クラス名などを目印に
テンプレートタグやPHPで
何が出されているのか
考えていきます。

92. 入れ替えたり書き換えたり・・
消したり足したり・・

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

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

95. サイトの説明
ロゴ 問い合わせ サイトマップ
きちんとHTMLと
画像
CSSを書いたら
ナビゲーション
メニュー コンテンツ
何が当てはまるか考えよう
ナビゲーション

96. サイトの説明
ロゴ 問い合わせ サイトマップ
header.php
画像
ナビゲーション
メニュー コンテンツ index.php
sidebar.php
分割するときにHTMLの
構造をこわさないようにね
ナビゲーション
footer.php

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

98. 自分が悩んだこと
できるようになったこと、
今度は誰かの役に立つかも
しれません。

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

100. ありがとうございました

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