Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
CSSだけでもけっこうイケル Twenty Tenのカスタマイズと    そこから 踏み出す第一歩WordPressをわくわくしながらインストールしたけど、中のファイルを見たらそ∼っと閉じたくなっちゃったあなたへ....            ...
自己紹介うえぶるじょんフリーでWebなこととかそうでもないこととかWebourgeon(http://webourgeon.com/)というブログで主にWordPresssのことについて書いていますWordPressHTMLコーディング / W...
Twenty Eleven   Twenty Ten
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
構造                           #mastheadTwenty Tenの                                                     #headerレイアウト構成   #wr...
1.全体の調整                           背景や フォント色などの                           基本設 定を変えてみる    CSSbody {    font-family: verdana,...
1.全体の調整                           背景や フォント色などの   CSS                     基本設 定を変えてみる#wrapper{                 #wrapper{   ...
1.全体の調整            背景や フォント色などの            基本設 定を変えてみる ヒントコンテンツとサイドバーの幅を変えてみるコンテンツとサイドバーの位置を変えてみる3カラムにしてみる
3.ヘッダー           ヘッダーのデザインを                 変えようBefore         After
3.ヘッダー      ヘッダーのデザインを            変えよう 1.ロゴを変える 2.カスタムヘッダーをつかう 3.サイトの説明文を移動する
3-1.ロゴを変える     ヘッダーのデザインを               変えよう 構造        #site-title        #site-title a
3-1.ロゴを変える          ヘッダーのデザインを                    変えよう Google web fonts http://www.google.com/webfonts
3-1.ロゴを変える                            ヘッダーのデザインを                                      変えようCSS                @importでも使えるの...
3-1.ロゴを変える    ヘッダーのデザインを              変えよう  弱点Google Fonts には日本語がない       その他webフォントも       日本語フォントの使用は       まだ現実的ではない
3-2.カスタムヘッダー           ヘッ ダーのデザイン  Before   変えよう             After
3-2.カスタムヘッダー               ヘッ ダーのデザイン               変えようカスタムヘッダーの使い方
3-2.カスタムヘッダー                 ヘッ ダーのデザイン構造               変えよう     #branding        img
3-2.カスタムヘッダー                           ヘッ ダーのデザインCSS                        変えよう  #branding img {    border-top: none;    ...
3-3.サイトの説明文を移動                 ヘッ ダーのデザイン                 変えようBefore   After         After
3-3.サイトの説明文を移動              ヘッ ダーのデザイン 構造           変えよう         #site-description
3-3.サイトの説明文を移動                        ヘッ ダーのデザイン CSS                    変えよう#site-title{  float: none;                    フ...
3-3.サイトの説明文を移動                                  ヘッ ダーのデザイン#wrapper{                         変えよう   position: relative;}#si...
4.メニュー           グローバルナビを                 デザインするBefore         After
4.メニュー      グローバルナビを            デザインする 1.カスタムメニューをつかう 2.デザイン変更
4-1.カスタムメニューをつかう            グローバルナビを            デザインする
4-2.デザイン変更 グローバルナビを                              デザインする 構造       デフォルトの場合      #access          div.menu   .page_item     ...
4-2.デザイン変更 グローバルナビを                              デザインする 構造      カスタムメニューの場合 .menu-header      ul #menu-global .menu       ...
4-2.デザイン変更 グローバルナビを                                          デザインする   CSS         背景色を消してボーダーを入れます#access {   background: ...
4-2.デザイン変更 グローバルナビを                                       デザインする  CSS             テキストの色を調節します#access a {   color: #392917...
4-2.デザイン変更 グローバルナビを                                               デザインする CSSカスタムメニューで付けたクラス名を利用してRSSをアイコンに変えます#access li.r...
4-2.デザイン変更 グローバルナビを CSS                             デザインする絶対配置を利用してメニューを右上に#access {    position: absolute;    top : 0;   ...
5.記事部分   記事部分の         カスタマイズBefore          After
5.記事部分            記事部分の                  カスタマイズ 1. 記事部分の構成 2. カテゴリーごとに記事タイトルに    アイコン   3. 投稿日・作成者    4. 写真をおしゃれに    5.「続き...
5­1. 記事部分の構成            記事部分の                        カスタマイズ 構造              .entry-title      .post               .entry-m...
5­2.カテゴリーごとに               記事部分の   記事タイトルにアイコン               カスタマイズカテゴリーごとに違うアイコン
5­2.カテゴリーごとに               記事部分の   記事タイトルにアイコン                                 カスタマイズ  構造<div id="post-62" class="post-62 ...
5­2.カテゴリーごとに               記事部分の   記事タイトルにアイコン                                 カスタマイズ CSS#content .entry-title{   padding:...
5-3.投稿日・作成者                   記事部分の                               カスタマイズ   構造             .entry-meta.meta-prep           ...
5-3.投稿日・作成者                     記事部分の                                カスタマイズCSS      .entry-meta .meta-prep,.entry-      me...
5-3.投稿日・作成者                      記事部分の                                 カスタマイズCSS   .entry-date{         position: absolute...
5-3.投稿日・作成者                    記事部分の                               カスタマイズCSS      .entry-meta .author {         background...
5-4.写真をおしゃれに   記事部分の               カスタマイズ   Before               After
5-4.写真をおしゃれに       記事部分の                   カスタマイズ 構造               img.alignleft               img.alignright             ...
5-4.写真をおしゃれに                              記事部分の                                          カスタマイズCSS         border: 1px sol...
5-4.写真をおしゃれに    記事部分の                カスタマイズ    Before     After
5-4.写真をおしゃれに                                  記事部分の                                              カスタマイズ構造  <div id="attach...
5-4.写真をおしゃれに                            記事部分の                                        カスタマイズCSS   .wp-caption{         bord...
5-4.写真をおしゃれに                      記事部分の                                  カスタマイズCSS      .wp-caption p.wp-caption-text {   ...
5-5.「続きを読む」      記事部分の                 カスタマイズ Before              After
5-5.「続きを読む」                    記事部分の                               カスタマイズ 構造      .more-link   .meta-nav
5-5.「続きを読む」                               記事部分の       .entry-content .more-link{                                          ...
6.サイドバー             サイドバーの                    カスタマイズ   Before   After
6.サイドバー                               サイドバーの                                       カスタマイズ          #primary .widget-area  ...
6.サイドバー                               サイドバーの                                      カスタマイズ CSS   #main .widget-title{       ...
6.サイドバー                                     サイドバーの                                            カスタマイズ CSS   #main .widget-a...
7. コメントフォーム   コメントフォームの              カスタマイズ   Before               After
7. コメントフォーム                   コメントフォームの                                カスタマイズ #comments                 .reply-title      ...
7. コメントフォーム              コメントフォームの                         カスタマイズCSS      h3#comments-title, h3#reply-title{        backgr...
7. コメントフォーム                         コメントフォームの                                    カスタマイズCSS  input[type="text"],  textarea ...
8. フッターウィジェット     フッターの                  カスタマイズ         Before                  After          After
8. フッターウィジェット                     フッターの                                  カスタマイズ   構造#footer-widget-area                   ...
8. フッターウィジェット                               フッターの                                            カスタマイズ CSS       #footer-widg...
お疲れ様でした。
でも・・・ここまで出来たら欲が出ます・・・よね?
知ってる部分がある!!
<?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               画像              ナビゲーション   メニュー    ...
たくさんの先輩の方々のブログ、フォーラム、書籍、色々なところに情報がたくさんあります読んだり、聞いたり。。
自分が悩んだことできるようになったこと、今度は誰かの役に立つかもしれません。
みんなでWordPressを楽しみましょう!
ありがとうございました
本日のスライドはhttp://webourgeon.com/                         続きも書きますで公開予定ですTwitter @Webourgeon_com
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方
Next
Upcoming SlideShare
WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方
Next
Download to read offline and view in fullscreen.

Share

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

Download to read offline

WordBench Totyo 2011でのスライド

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

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

    May. 31, 2015
  • phuez

    Apr. 15, 2014

WordBench Totyo 2011でのスライド

Views

Total views

8,698

On Slideshare

0

From embeds

0

Number of embeds

158

Actions

Downloads

22

Shares

0

Comments

0

Likes

2

×