WordPressのテーマのデザインを整えよう
こんにちは。継続の錬金術士なおキーヌです。
ブログ毎日更新は242日目になります。
WordPressの基本的な機能はだいぶ覚えてきたと思うのでちょっとPHPから離れて
HTMLとCSSによるデザインをやっていきましょう。
デザインといっても特に難しいことをするわけではなく、
ごく簡単なHTMLとCSSで見た目を整えていくだけです。
今のままだととてもブログとは言えないので
シンプルなテーマを目指して作っていきます。
それではWordPress自作テーマ講座第13回目を始めましょう。
CSSでキレイに整えよう
今はモバイルファーストといってスマートフォンから先に構成していくのですが、
意外とスマートフォンのWebデザインって難しいんですよ。
小さい画面の中、いかにきれいに見やすくレイアウトできるかが勝負です。
今回はパソコンで見られるように整えていきましょう。
今回はphpを使わないので、最初にHTMLとCSSで作成したものを流用してください。
<div class="headText">
<h1>自作テーマ第１号</h1>
<p>はじめてのテーマ自作</p>
</div>この部分の見た目を整えてみます。
現状、真っ赤な背景で白文字。
見やすいのですがなんか素人感がすさまじいですよね。
ペルソナ5のようにスタイリッシュなデザインができるなら原色赤もうまく使えるのですが、
素人には原色はうまく使いこなすのは至難の業なので、おとなしく良い感じの色にしてみましょう。
私は青系が好きなので、青系のマテリアルカラーからとってきました。
header {
display:block;
width:100%;
background-color:#1565C0;
}
/**--------------------**/
/** header **/
header .headText {
width:960px;
margin:0 auto;
}
header .headText h1 {
color:#fff;
font-size:18px;
}これだけで結構いいカラーになりました。
初心者のうちは現在主流のカラーを調べてつかっておけば大体なんとかなります。
この辺は色彩感覚とかをつかまないと難しいので完全に慣れです。
しかしマテリアルデザインとかで公開されているカラーをつかえば、
素人でも結構プロっぽい色使いができるようになります。
「headText」クラスで横幅960px、マージン上下０の左右autoにしているものがあると思います。
これはまずheadTextクラスがついているタグの横幅を960pxに固定して、
なおかつマージンの上下を０にして左右は自動にしろという命令です。
上下０は特に何もなりませんが、左右自動というのは現状の自分の幅と
画面全体で左右を均等にしろという命令になります。
こうすることでボックスが中央にいくので、
画面全体を使わなくてもすむようになります。
ブログで画面全体を使っているというデザインはあまり見かけません。
というのも最近ではモニタの解像度も大きくなってきているので、
画面全体を使うと全部みないといけないのでユーザーが疲れてしまいます。
そこで中央に寄せて幅を縮めることでモニタサイズが小さくても大きくても
同じレイアウト・デザインを維持することができ可読性がモニタによってあまり変わりません。
Webデザインの指名としてはどの環境でも等しくみられるようにする。
これが基本中の基本です。
ブログなんて読まれなければ価値のないネット上のごみデータになってしまいます。
なので基本的に可読性を優先してデザインしていきまsy法。
余白をしっかりとって可読性を上げる
現状、h1の部分が画面上部に行き過ぎているので狭苦しい感じがします。
背景がない場合は横幅は自動でセンターにもってきているので広く見えますが、
これに別の色を付けるとボックスギリギリの状態に文字がいることになり又窮屈になります。
それではボックスに余白をつけてみましょう。
header .headText {
width:960px;
margin:0 auto;
padding:20px 10px;
}パディングの上下を20px、左右を10px設定してみました。
良い感じに隙間が空いたのではないでしょか。
この時点でちょっとブログぽくなってきましたね！
余白というものは可読性においても、デザインにおいてもとても大切です。
デザイン知識がない古い人間はとにかく空きスペースに情報を詰めまくろうとするので、
古い人間がトップにいる非デザイン会社のデザインを担当する人はとても苦労しているのではないでしょうか。
詰め込むのは楽天とチラシだけでいいです。
余白デザインを意識してブログを作っていきましょう！
主題と本文のコントラストを付けてやる
h1とpの文字の大きさがそこまで差がありません。
この大きさの差のことをコントラストと言います。
主に色の明暗で使われる言葉ですが、文字同士でも使うことは多いです。
今はまだましですが、文章とタイトルが同じ大きさで同じ太さのフォントだと
どっちがタイトルなのかわからない上にタイトルとしてすら認識されないかもしれません。
なのでh1とpの大きさに差をつけてみましょう。
pはいい感じの大きさなので、h1を大きくします。
body {
background-color:#fff;
font-size:12px;
}
header .headText h1 {
color:#fff;
font-size:250%;
}まずフォントの大きさの基準を決めます。
bodyタグで起点となるフォントサイズを指定して、
それをもとにそれぞれのタグを調整するのがCSSの基本です。
昔は全てpx指定していましたが、そうすると後々変更するとき面倒になるので
ベースとなる文字の大きさを最初に決めておきます。
htmlかbodyにcssを設定するとその中に含まれているhtml全てに適用されるので、
少し注意が必要なので気を付けてください。
h1をみてもらうと、フォントサイズが250％とすごいことになっていますね。
これでいい感じにタイトルとサイト概要のコントラストがついたのではないでしょうか。
最近ではemやremといった単位を使いますが、一旦わかりやすいようにパーセントで表しました。
この辺はWebデザインをしていると好みが分かれてきますので好きな指定方法で大丈夫です。
ちなみに私はremをよく使います。
WordPress自作テーマ講座第13回まとめ
少し忙しかったのでcssの簡単な基礎講座になってしまいましたが、
ブログを作るうえで避けて通れない箇所だと思います。
もしCSSをやったことがないという人はこれを機にCSSを覚えてください。
ブログを運営していると、今まではいらなかったけど急にああいう表現がしたい！
尊敬する人のブログでやっているようなことをやってみたい！
ということが絶対に出てくるので、CSSをいじられるようになっておくと
すぐにやりたいことが実現できるようになります。
プログラミングみたいなもんですね。
それでは。
