超初心者のためのWordPressのサイトのデザインの微調整方法
•
4 j'aime•17,948 vues
超初心者のためのWordPressのサイトのデザインの微調整方法
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à 超初心者のためのWordPressのサイトのデザインの微調整方法
Similaire à 超初心者のためのWordPressのサイトのデザインの微調整方法 (20)
Plus de Hidekazu Ishikawa
Plus de Hidekazu Ishikawa (20)
Dernier
Dernier (10)
超初心者のためのWordPressのサイトのデザインの微調整方法
- 4. 今日の内容 HTMLとCSS CSS指定の例 id名やclass名で指定する方法 idやclassで指定するメリット 複数のセレクタで指定する CSSの継承の注意 CSSを書く場所とそれぞれの特徴 4
- 6. HTMLとCSS HTMLの例 普段ブラウザで見ているサイトはHTMLという形式の記 法で文章などが書かれています。 表示する文字をタグと呼ばれる<>で括っています。 <h1>h1 タグは 見出し１ の意味です</h1> <p>文章は p タグを使います。</p> <h2>見出し２は h2 になります</h2> <p>文章は p タグを使います。</p> 6
- 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. idやclassで指定するメリット タグの種類が同じでも場所によってデザインを変更 できる タグの種類は変更になる場合がある ブロックエディタでもブロックに対してclass名を入力 する所がある 10
- 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. CSSの継承の注意 #指定や指定が多いものは優先度が高い テーマなどでのCSS指定 h1.design { font-size:24px; } 追加した指定 h1 { font-size:14; } /* 指定が弱いので効かない */ 12
- 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 タグは 見出し１ の意味です</h1> <p>文章は p タグを使います。</p> </body> </html> 13
- 18. 変更したい箇所の調べ方 18
- 20. 20
- 22. 特定のページだけ変更する 特定のページにだけ指定したい場合はbodyタグに指定 されているclass名を利用します。 変更したいページのHTMLを表示してデベロッパーツー ルを活用して、タグについているclassを確認して指定 する事ができます。 <body class="post-template-default single single-post postid-620 single-format-standard post-type-post"> 22
- 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%; } 投稿タイプが「投稿」の場合にメインエリアとサイド バーを横幅いっぱいにして１カラムにする 23
- 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
- 26. 特定の幅以上の時だけ指定する @media (min-width: 768px ) { .container { width: 800px; } } デベロッパーツールで見た時は@media(min‑width: 970px)の最後に{が無いので、コピーして貼り付け る時は注意してください。 26
- 27. 特定幅以上特定幅以下の指定 @media (min-width: 768px ) and ( max-width:992px) { .container { width: 800px; } } 27