Your SlideShare is downloading. ×
  • Like
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 5,575 views
Published

WordBench Totyo 2011でのスライド

WordBench Totyo 2011でのスライド

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,575
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
20
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. CSSだけでもけっこうイケル Twenty Tenのカスタマイズと そこから 踏み出す第一歩WordPressをわくわくしながらインストールしたけど、中のファイルを見たらそ∼っと閉じたくなっちゃったあなたへ.... @Webourgeon_com
  • 2. 自己紹介うえぶるじょんフリーでWebなこととかそうでもないこととかWebourgeon(http://webourgeon.com/)というブログで主にWordPresssのことについて書いていますWordPressHTMLコーディング / WebデザインFlashアニメーション?????? Twitter @Webourgeon_com
  • 3. Twenty Eleven Twenty Ten
  • 4. Twenty Eleven Twenty Tenファイルが多い!
  • 5. なんですか?この宇宙語は?
  • 6. というわけで 今日はCSSだけでもけっこうイケルTwenty Tenのカスタマイズと そこから 踏み出す第一歩についてお話ししたいと思います。
  • 7. http://webourgeon.com/onlycss/
  • 8. 早速やってみましょう1.準備する 5. 投稿部分2.全体の調整 6.サイドバー3. ヘッダー 7.コメントフォーム4. メニュー 8.フッターウィジェット
  • 9. 1.準備する 準備する1.子テーマをつくろう2.ソースをみてみよう3.便利なCSSテクニック
  • 10. 1-1. 子テーマをつくろう 準備する 必要なことはここにある!WordPress Codex 日本語版 http://wpdocs.sourceforge.jp/
  • 11. ここにCSSをどんどん上書きしていけばいいだけ
  • 12. 1-2.ソースをみてみよう 準備する1.ブラウザでソースを見る2.便利機能を使う
  • 13. ブラウザでソースを見る ロゴ部分 該当CSSを探す 勉強になるけど ちょっと めんどくさい
  • 14. 便利機能を使う
  • 15. 便利機能を使うHTMLの構造も分かりやすい CSSもひと目でわかる!
  • 16. 1-3.便利なCSSテクニック 準備する使えると便利でそんなに難しくないCSSの小技 背景画像 画像置き換え (*使い方注意) 絶対配置 Webフォント(*日本語はまだ難しい) CSS3 (*未対応ブラウザ対策)
  • 17. 2.全体の調整 背景やフォント色などの 基本 設定を変えてみる Before After
  • 18. 構造 #mastheadTwenty Tenの #headerレイアウト構成 #wrapper #main #container #content #primary #secondary ここに詳しく http://webourgeon.com/2010/10/06/constitution-of-the-theme-1/ #colophon #footer
  • 19. 1.全体の調整 背景や フォント色などの 基本設 定を変えてみる CSSbody { font-family: verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku GothicPro",Osaka,"MS Pゴシック","MS PGothic",Sans-Serif; フォント color: #392917; background: #F6F2E8; 背景色 border-top: solid 3px #392917;}
  • 20. 1.全体の調整 背景や フォント色などの CSS 基本設 定を変えてみる#wrapper{ #wrapper{ padding: 0; padding: 0 20px;} } 外枠の余白をなしに#content { #content { margin: 0 280px 0 0; margin: 0 280px 0 20px;} } コンテンツの 左マージンをなしに
  • 21. 1.全体の調整 背景や フォント色などの 基本設 定を変えてみる ヒントコンテンツとサイドバーの幅を変えてみるコンテンツとサイドバーの位置を変えてみる3カラムにしてみる
  • 22. 3.ヘッダー ヘッダーのデザインを 変えようBefore After
  • 23. 3.ヘッダー ヘッダーのデザインを 変えよう 1.ロゴを変える 2.カスタムヘッダーをつかう 3.サイトの説明文を移動する
  • 24. 3-1.ロゴを変える ヘッダーのデザインを 変えよう 構造 #site-title #site-title a
  • 25. 3-1.ロゴを変える ヘッダーのデザインを 変えよう Google web fonts http://www.google.com/webfonts
  • 26. 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; }
  • 27. 3-1.ロゴを変える ヘッダーのデザインを 変えよう 弱点Google Fonts には日本語がない その他webフォントも 日本語フォントの使用は まだ現実的ではない
  • 28. 3-2.カスタムヘッダー ヘッ ダーのデザイン Before 変えよう After
  • 29. 3-2.カスタムヘッダー ヘッ ダーのデザイン 変えようカスタムヘッダーの使い方
  • 30. 3-2.カスタムヘッダー ヘッ ダーのデザイン構造 変えよう #branding img
  • 31. 3-2.カスタムヘッダー ヘッ ダーのデザインCSS 変えよう #branding img { border-top: none; border-bottom: none; } 上下のボーダーを消す
  • 32. 3-3.サイトの説明文を移動 ヘッ ダーのデザイン 変えようBefore After After
  • 33. 3-3.サイトの説明文を移動 ヘッ ダーのデザイン 構造 変えよう #site-description
  • 34. 3-3.サイトの説明文を移動 ヘッ ダーのデザイン CSS 変えよう#site-title{ float: none; フロート解除}#site-description { float: none; width: 940px;}
  • 35. 3-3.サイトの説明文を移動 ヘッ ダーのデザイン#wrapper{ 変えよう position: relative;}#site-description { position: absolute; 絶対配置 top: 240px; left: 10px; 条件によって表示が} 崩れる可能性あり
  • 36. 4.メニュー グローバルナビを デザインするBefore After
  • 37. 4.メニュー グローバルナビを デザインする 1.カスタムメニューをつかう 2.デザイン変更
  • 38. 4-1.カスタムメニューをつかう グローバルナビを デザインする
  • 39. 4-2.デザイン変更 グローバルナビを デザインする 構造 デフォルトの場合 #access div.menu .page_item ul li .current_page_item
  • 40. 4-2.デザイン変更 グローバルナビを デザインする 構造 カスタムメニューの場合 .menu-header ul #menu-global .menu .menu-item .rss .menu-item-type-custom ちょっと構造が変わります
  • 41. 4-2.デザイン変更 グローバルナビを デザインする CSS 背景色を消してボーダーを入れます#access { background: none; border-left: 1px dotted #B2ABA0;/* メニューの一番左にもボーダー */}#access .menu-header li, ボーダーdiv.menu li { border-right: 1px dotted #B2ABA0; /* 各メニュー右にボーダー */}
  • 42. 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; /* 現在のページのフォント色変更 */}
  • 43. 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 ?)
  • 44. 4-2.デザイン変更 グローバルナビを CSS デザインする絶対配置を利用してメニューを右上に#access { position: absolute; top : 0; right: 0; 絶対配置 width: auto;}#access .menu-header,div.menu { width: auto;}
  • 45. 5.記事部分 記事部分の カスタマイズBefore After
  • 46. 5.記事部分 記事部分の カスタマイズ 1. 記事部分の構成 2. カテゴリーごとに記事タイトルに アイコン 3. 投稿日・作成者 4. 写真をおしゃれに 5.「続きを読む」
  • 47. 5­1. 記事部分の構成 記事部分の カスタマイズ 構造 .entry-title .post .entry-meta .entry-content .entry-utility
  • 48. 5­2.カテゴリーごとに 記事部分の   記事タイトルにアイコン カスタマイズカテゴリーごとに違うアイコン
  • 49. 5­2.カテゴリーごとに 記事部分の   記事タイトルにアイコン カスタマイズ 構造<div id="post-62" class="post-62 post type-post status-publish format-standard hentrycategory-cat-2">
  • 50. 5­2.カテゴリーごとに 記事部分の   記事タイトルにアイコン カスタマイズ CSS#content .entry-title{ padding: 5px 0 5px 35px;}.category-cat-1 .entry-title{ background: url(img/cat-1.gif) no-repeat leftcenter; 背景画像}
  • 51. 5-3.投稿日・作成者 記事部分の カスタマイズ 構造 .entry-meta.meta-prep .author .entry-date .meta-sep
  • 52. 5-3.投稿日・作成者 記事部分の カスタマイズCSS .entry-meta .meta-prep,.entry- meta .meta-sep{ display: none; 消す }
  • 53. 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; }
  • 54. 5-3.投稿日・作成者 記事部分の カスタマイズCSS .entry-meta .author { background: url(img/pencil.gif) no-repeat left center; display: inline-block; 背景画像 height: 22px; padding-left: 20px; }
  • 55. 5-4.写真をおしゃれに 記事部分の カスタマイズ Before After
  • 56. 5-4.写真をおしゃれに 記事部分の カスタマイズ 構造 img.alignleft img.alignright img.aligncenter img.alignnone
  • 57. 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;
  • 58. 5-4.写真をおしゃれに 記事部分の カスタマイズ Before After
  • 59. 5-4.写真をおしゃれに 記事部分の カスタマイズ構造 <div id="attachment_36" class="wp-caption alignleft" style="width: 310px"> .wp-caption-text
  • 60. 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; }
  • 61. 5-4.写真をおしゃれに 記事部分の カスタマイズCSS .wp-caption p.wp-caption-text { color: #7E7971; }
  • 62. 5-5.「続きを読む」 記事部分の カスタマイズ Before After
  • 63. 5-5.「続きを読む」 記事部分の カスタマイズ 構造 .more-link .meta-nav
  • 64. 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; }
  • 65. 6.サイドバー サイドバーの カスタマイズ Before After
  • 66. 6.サイドバー サイドバーの カスタマイズ #primary .widget-area 構造 ul ul li.widget-title li.widget-container ulの入れ子に注意
  • 67. 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; }
  • 68. 6.サイドバー サイドバーの カスタマイズ CSS #main .widget-area ul li ul li{ background: url(img/link.gif) no-repeat 0 5px; padding-left: 10px; } 背景画像
  • 69. 7. コメントフォーム コメントフォームの カスタマイズ Before After
  • 70. 7. コメントフォーム コメントフォームの カスタマイズ #comments .reply-title .comment-notes .comment-form-author.required .comment-form-email .comment-form-url 構造 .comment-form-comment .form-submit
  • 71. 7. コメントフォーム コメントフォームの カスタマイズCSS h3#comments-title, h3#reply-title{ background: url(img/comment.gif) no-repeat left center; padding-left: 40px; 背景画像 height: 35px; }
  • 72. 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; }
  • 73. 8. フッターウィジェット フッターの カスタマイズ Before After After
  • 74. 8. フッターウィジェット フッターの カスタマイズ 構造#footer-widget-area .widget-container .widget-title#first .widget-area #second .widget-area フッターのウィジェットは4つまで
  • 75. 8. フッターウィジェット フッターの カスタマイズ CSS #footer-widget-area .widget-area { margin-right: 20px; width: 460px; 幅変更 } #footer-widget-area #second { margin-right: 0; }
  • 76. お疲れ様でした。
  • 77. でも・・・ここまで出来たら欲が出ます・・・よね?
  • 78. 知ってる部分がある!!
  • 79. <?php bloginfo( description ); ?>サイトの説明文のところらしい
  • 80. ループって何? 調べる ついでに覚える使い方をチェック
  • 81. 新しい子テーマを作るTwenty Tenからheader.phpをコピー
  • 82. #brandingの下に置いてみる
  • 83. サイトの説明文の位置が変わった! またCSSで調整すればOK!
  • 84. サイト名をロゴ画像に置き換えてみる または<img src="<?php bloginfo(stylesheet_directory); ?>/img/logo.gif" />
  • 85. ロゴが画像に変わった!余計なボーダーはCSSで調整すればOK!
  • 86. このように今まで見てきたHTMLのタグやCSSのid名・クラス名などを目印にテンプレートタグやPHPで何が出されているのか考えていきます。
  • 87. 入れ替えたり書き換えたり・・消したり足したり・・
  • 88. わからないところはどんどん調べて自分にとって必要なところから覚えていくのもひとつの方法ではないかと思います
  • 89. 実は。。。。ここまで来たらオリジナルのテーマ作成まであと一歩
  • 90. サイトの説明ロゴ 問い合わせ サイトマップ きちんとHTMLと 画像 CSSを書いたら ナビゲーションメニュー コンテンツ 何が当てはまるか考えよう ナビゲーション
  • 91. サイトの説明 ロゴ 問い合わせ サイトマップ header.php 画像 ナビゲーション メニュー コンテンツ index.phpsidebar.php 分割するときにHTMLの 構造をこわさないようにね ナビゲーション footer.php
  • 92. たくさんの先輩の方々のブログ、フォーラム、書籍、色々なところに情報がたくさんあります読んだり、聞いたり。。
  • 93. 自分が悩んだことできるようになったこと、今度は誰かの役に立つかもしれません。
  • 94. みんなでWordPressを楽しみましょう!
  • 95. ありがとうございました
  • 96. 本日のスライドはhttp://webourgeon.com/ 続きも書きますで公開予定ですTwitter @Webourgeon_com