WordPressテーマの自作におけるCSSのコツ
テーマの自作で半分はCSSの調整だったりします。WordPressにおけるCSSのコツや最近取り入れてみたトレンド等をご紹介します。
テーマに関する記述を明記
|
1 2 3 4 5 6 |
/* Theme Name: KITAMULABO Author: Kei Kitamura Author URI: https://ktmr.jp Description: Less is more. */ |
インストールしているテーマ一覧でオリジナルなのにちゃんと解説があるとなんかテンション上がります。これはstyle.cssの冒頭に上の記述をするだけ。画像はテーマフォルダに「screenshot」という名前の画像ファイルを上げておけば読み込んでくれます。拡張子はjpgでもphpでもいいみたいです。
横並びに詰めて記述
|
1 2 3 4 5 6 7 8 9 |
/* 共通設定：タグ */ html{font-size: 62.5%;max-width:1080px;margin:0 auto;} body {text-align:center;line-height:1.6;font-family:serif;color:#303030;width:100%;-webkit-text-size-adjust: 100%;margin:0px auto;padding:0;box-sizing:border-box;margin-bottom:0;} a {color:SteelBlue;text-decoration:none;overflow:hidden;} blockquote {position: relative;margin:20px 0;padding:10px;border-left: 5px solid #CCC;} blockquote:after{position: absolute;bottom: 0;right: 0;content: '”';font-size:6em;opacity:.1;} header {margin-top:100px;} footer {clear:both;font-size:1.2rem;margin: 0 0 50px;text-align:center;border-top:solid 0.5px #a0a0a0;} img{max-width: 100%;height:auto;} |
CSSの記述の仕方ですが、僕はこうやって詰めて横並びに記述することが多いです。邪道なのはわかってるんですが、こうすることでページ全体が少なくすむので全体をまとめるのが早いような気がします。
!importantが重要
CSSで同じセレクタの優先度は原則、後に書いてあるほうが優先です。しかし、プログラムでいろんなCSSが読み込まれているWordPressでは、強制的に上書きしたい場合、以下のように!importantを付けておきます。
|
1 |
.wp-block-image{margin:0!important;} |
こうすることで既存のタグなど、はじめからWordPressがスタイルを指定しているものに対してもオリジナルのデザインにすることができます。上の例では既存のギャラリーのマージンを0に変更しています。
モバイル対応の記述
スマホやタブレット等のモバイルに対応してスタイルを変更したい場合は、画面サイズの最大値によって切り替えます。下記ではmax-widthが720pxまでの画面では以下のスタイルでって記述です。
|
1 2 3 4 5 6 |
/* モバイルでの表示設定 */ @media screen and (max-width: 720px) { header{margin-top:20px;} .site_name{font-size:2rem;} .description {font-size:1.2rem;} } |
最近はスマホでの閲覧が半分以上になってきているのでモバイル対応は必須。逆にPCでの閲覧を少数派として、〇〇以上の画面サイズに対して以下のスタイルを適用としてもいいです。どっちのスタイルの記述が少ないかで判断します。またこの記述はCSSの最後の方に書いておくほうがトラブルが少ないです。
Flexboxが今どきで便利
上記のモバイル対応等、ウィンドウ幅によってレイアウトを柔軟に変更するレスポンシブルデザインがトレンドです。レスポンシブルデザインに対応しやすいスタイル、Flexboxを導入してみました。フロートデザインはもう古いみたいですね。Flexboxかなり便利です。使い方、解説は下記のサイトがわかりやすいです。
セレクタを使いこなせ
CSSのセレクタはidやclassだけじゃない。最初の子要素、何番目の子要素、兄弟等、色んなセレクタがあって柔軟な指定が可能です。下記のサイト勉強なります。
疑似要素がおもしろい
::before と::after ２種類の疑似要素ってのがあって、セレクタの前後に任意の文字列を追加できるっていうスタイルがあるんですが、さらにaタグ等に::afterを合わせるとtitleとかを引っ張り出すことができるっていう。以下参考。
まとめ
CSSは知れば知るほど自由度がまして、色んな事ができるようになります。１年ぐらい経つとまた新しいトレンドも出てくるので面白いです。ぜひご活用ください。