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.

超初心者のためのWordPressのサイトのデザインの微調整方法

908 views

Published on

超初心者のためのWordPressのサイトのデザインの微調整方法

Published in: Technology
  • Be the first to comment

超初心者のためのWordPressのサイトのデザインの微調整方法

  1. 1. 超初心者のための WordPressのサイトの デザインの微調整方法 ‑CSSカスタマイズ‑ kurudrive@Vektor,Inc. 1
  2. 2. 石川栄和@kurudrive 株式会社ベクトル 代表/フロントエンドエンジニア 趣味:スケボー/スプラトゥーン/将棋 自己紹介 2
  3. 3. 無料WordPressテーマLightning デモサイト ビジネスサイト向け汎用WordPressテーマ WordPress公式ディレクトリ登録済(無料)  3
  4. 4. 今日の内容 HTMLとCSS CSS指定の例 id名やclass名で指定する方法 idやclassで指定するメリット 複数のセレクタで指定する CSSの継承の注意 CSSを書く場所とそれぞれの特徴 4
  5. 5. 変更したい箇所の調べ方 特定のページだけ変更する 特定の画面サイズの時だけ指定する 5
  6. 6. HTMLとCSS HTMLの例 普段ブラウザで見ているサイトはHTMLという形式の記 法で文章などが書かれています。 表示する文字をタグと呼ばれる<>で括っています。 <h1>h1 タグは 見出し1 の意味です</h1> <p>文章は p タグを使います。</p> <h2>見出し2は h2 になります</h2> <p>文章は p タグを使います。</p> 6
  7. 7. CSSの例 そのHTMLのデザインを調整しているのがCSSです。 index.html <html> <head> <style type="text/css"> h1 { font-size:24px; color:#ff0000; } </style> </head> <body> <h1>h1タグは「見出し1」の意味です</h1> <p>文章はpタグを使います。</p> <h2>見出し2はh2になります</h2> <p>文章はpタグを使います。</p> </body> </html> 7
  8. 8. CSS指定の例 HTML <h1>これは見出しです</h1> <p>文章が入ります。</p> CSS h1 { font-size:24px; color:#330000; text-align:center; } p { font-size:16px; } 8
  9. 9. id名やclass名で指定する方法 HTML <div id="content"> <h1 class="post-title">投稿のタイトル</h1> </div> CSS #content { width:80%; } .post-title { font-size:18px; } id名で指定する場合は#そのid名の前に#を classで指定する場合はclass名の前に.をつけます。 9
  10. 10. idやclassで指定するメリット タグの種類が同じでも場所によってデザインを変更 できる タグの種類は変更になる場合がある ブロックエディタでもブロックに対してclass名を入力 する所がある 10
  11. 11. 複数のセレクタで指定する HTML <div id="content"> <h1 class="post-title event-title">投稿のタイトル</h1> </div> CSS 階層が深くなる場合は間にスペース空ける 同じタグ内での指定はh1.post‑title.event‑titleのよう につなげる div#content h1.post-title.event-title { font-size:18px; } 11
  12. 12. CSSの継承の注意 #指定や指定が多いものは優先度が高い テーマなどでのCSS指定 h1.design { font-size:24px; } 追加した指定 h1 { font-size:14; } /* 指定が弱いので効かない */ 12
  13. 13. index.htmlなどのファイル名で以下のコードを貼り付 けて確認してください。 <html> <head> <style type="text/css"> h1.design { font-size:24px; color:#ff0000; } h1 { font-size:14px; /* 指定が弱いので効かない */ } </style> </head> <body> <h1 class="design">h1 タグは 見出し1 の意味です</h1> <p>文章は p タグを使います。</p> </body> </html> 13
  14. 14. CSSを書く場所 外観>カスタマイズ画面追加CSS 子テーマのstyle.css プラグインなどで用意された場所 14
  15. 15. 外観>カスタマイズ画面[追加CSS] プレビューしながら作業できる 現在選択しているテーマにしか適用されない テーマを変更すると記述してある内容は反映されま せん。 データベースに保存される うっかり消してしまったりすると戻しにくい ※データベースのバックアップがあれば戻せるが... 15
  16. 16. 子テーマのstyle.css ファイルなので旧バージョンなど保持しやすい サーバーにアップするのが少し手間 16
  17. 17. プラグインなどで用意された場所 VKallInOneExpansionUnitの場合 管理画面>ExUnit>CSSカスタマイズ(サイト全 体に有効) 各投稿画面(該当の投稿にのみ有効) テーマを変更しても適用される (それが良い悪いはケースバイケース) 17
  18. 18. 変更したい箇所の調べ方 18
  19. 19. デベロッパーツールを開く デベロッパーツールは下記の手順で開けます。 1.Chromeでデザインを調整したいページを開く 2.画面のなにもない所などで右クリック 3.検証を選択 19
  20. 20. 20
  21. 21. 1.デベロッパーツール左上のアイコンをクリック 2.変更したい要素をクリック 3.該当のHTML部分がハイライトされる 4.指定した要素に効いているCSSが右側に表示される 5.表示されているCSSをコピーして、追加CSSなど に貼り付けて改変する (上書きしたい部分の行だけでOK) 21
  22. 22. 特定のページだけ変更する 特定のページにだけ指定したい場合はbodyタグに指定 されているclass名を利用します。 変更したいページのHTMLを表示してデベロッパーツー ルを活用して、タグについているclassを確認して指定 する事ができます。 <body class="post-template-default single single-post postid-620 single-format-standard post-type-post"> 22
  23. 23. class名の意味の例 single:投稿の詳細ページ single‑post:投稿タイプ「投稿」の詳細ページ postid‑620:投稿のidが620の投稿 post‑type‑post:投稿タイプが「投稿」 CSSの指定例 body.post-type-post .mainSection{ width:100%; } body.post-type-post .sideSection{ width:100%; } 投稿タイプが「投稿」の場合にメインエリアとサイド バーを横幅いっぱいにして1カラムにする 23
  24. 24. 余談:複数の一括指定は,で区切る body.post-type-post .mainSection{ width:100%; } body.post-type-post .sideSection{ width:100%; } は以下のように書ける body.post-type-post .mainSection, body.post-type-post .sideSection{ width:100%; } 24
  25. 25. 特定の画面サイズの時だけ指定する 表示画面のサイズによってCSSの指定が異なる場合が あります。デベロッパーツールでセレクタを確認した 際に@media(min‑width:970px)などの表示がある場 合がそれにあたります。 25
  26. 26. 特定の幅以上の時だけ指定する @media (min-width: 768px ) { .container { width: 800px; } } デベロッパーツールで見た時は@media(min‑width: 970px)の最後に{が無いので、コピーして貼り付け る時は注意してください。 26
  27. 27. 特定幅以上特定幅以下の指定 @media (min-width: 768px ) and ( max-width:992px) { .container { width: 800px; } } 27
  28. 28. そんな感じで頑張ってください。 ありがとうございました。 28

×