ワードプレス

ワードプレスのCSSカスタムで初心者が知っておきたいプロパティ15選

初心者向けCSSプロパティ

 

どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。

ワードプレス(WordPress)ではCSSコードを使って、初心者から上級者まで幅広くブログをカスタマイズできます。

 

CSSは簡単に言えば、見栄えを良くするためのドレスアップシステムみたいなもので、コードを追加していくだけで、ブログのデザインを思い通りに変更できる代物です。

そこでCSSコードの中でも特によく使用するプロパティがあるんですが、初心者の方はそもそも「プロパティってなんだよ!」と思うかもしれませんね。

 

今回はそんなプロパティについての説明と、初心者なら知っておきたいプロパティ15選をご紹介していきます。

プロパティってなに?

プロパティとは、CSSのデザインを反映させるための要素の1つで、変更する対象を指定するものです。

CSSのコードは基本的に「セレクタ」「プロパティ」「値」の3要素で構成されています。

 

セレクタ {
プロパティ : 値 ;
}

 

例えば、セレクタが「ブログ」、プロパティが「背景色」、値が「青色」ならブログの背景は青色になります。

また、「{}」で囲うことで対象となるセレクタにのみプロパティの内容が反映され、複数指定することも可能です。

 

ここでは複数のセレクタに応用でき、私も良く使っているプロパティをご紹介していくので、CSSでカスタムする際に活用してみて下さい。

 

良く使うCSSプロパティ15選

知っておいて損のないプロパティ15選と使い方なども簡単に説明しますので、すぐに活用できるかと思います。

 

font-size(文字サイズ)

font-size(フォントサイズ)はブログのタイトルやカテゴリー、記事内の文字サイズを自由に調整することができます。

 

 

基本は「px(ピクセル)」での指定になりますが、「em」や「%」などで指定することもできます。

 

margin(外側の余白)

margin(マージン)は、対象物の外側の余白を指定することができます。

 

 

 

指定の方法は上記のように色々あるので、使いやすいもので指定していきましょう。

 

padding(内側の余白)

padding(パディング)は、対象物の内側の余白を指定することができます。

 

 

 

内容はmarginとほぼ一緒で、外側を指定するか内側を指定するかの違いなので、合わせて覚えておいて下さい。

ただ、使っているとよくどっちがどっちかわからなくなる時があるので、少し注意しておきましょう。

 

font-weight(文字の太さ)

font-weight(フォントウェイト)は、文字の太さを段階に分けて太くしたり細くしたりすることができます。

 

 

100単位ずつの9段階(900まで)の数値で指定することもできますが、基本的に使用するのは「bold」の太字にすることがほとんどです。

数値を変化させても見た目は標準か太字になるので、使用することはあまりないと思います。

 

color(文字色)

color(カラー)は文字の配色を変更する時に使います。

 

 

このように「#fff」などの色コードと呼ばれるものを変更することで、指定した色に変化させることができます。

どんな色コードがあるかは「原色大辞典」を参考にするといいでしょう。

 

background(背景色)

background(バックグラウンド)は、対象の背景色を変更できます。

 

 

指定の方法は「color」の時と同様ですが、「linear-gradient」の値を使用することでグラデーションを作り出すことも可能です。

 

text-align(対象の揃え位置)

text-align(テキストアライン)は、文章や指定したエリアの対象物の揃え位置を変更できます。

 

 

「justify」を指定すると、単語などの文字間隔は均等に調整されるようになりますが、私の場合はほとんど使用する機会はない値です。

 

float(回り込み位置)

float(フロート)は、対象の回り込みをどうするかを指定することができます。

 

 

 

このプロパティは画像の左右に文章を回り込ませたい時などに使用したり、並列に並べたい時にも活用できます。

ただし、携帯やスマホといったモバイルで見ると、横幅が狭いので表示崩れを起こしてしまう場合がある為、パソコンでは回り込みにしてモバイルでは「none」で解除するような使い方になります。

 

text-decoration(文字の装飾)

text-decoration(テキストデコレーション)は下線や上線、打ち消し線や点滅などの文字装飾を指定できます。

 

 

このプロパティは文字を強調したいときに使用することができますが、テキストリンクの下線をなくしたいときにもよく活用されています。

 

width(領域の横幅)

width(ワイド)は、対象領域の横幅を変更できます。

 

 

「px」や「%」で指定することができるので、使いやすい方を使用されるといいでしょう。

 

height(領域の高さ)

height(ヘイト)は、対象領域の高さを変更できます。

 

 

使い方から値の数値や決め方は「width」と同様になります。

 

display(要素の表示形式)

display(ディスプレイ)は、対象をどのように表示させるかの形式を指定できます。

 

 

 

この他にも要素を指定できる値はありますが、主に使用することが多いのは上記の4つになるので、これだけ覚えれば十分だと思います。

 

また、1つ使用上の注意点としては、「inline」の要素内では「width」「height」の指定ができず、文字数やサイズで左右されるので覚えておきましょう。

 

box-shadow(対象の影)

box-shadow(ボックスシャドウ)は、指定した対象に影をつけることができます。

 

 

各pxをそれぞれ調整することで、影の位置やぼかしを入れて浮き上がっているように見せることもできます。

 

transition(変化する時間)

transition(トランジション)は、色の変化や物の動きなどに対するモーションにかかる時間を指定することができます。

 

 

「0.7s」の数値をより高くすることで、変化にかかる秒数を遅らせることが可能です。

この場合は0.7秒をかけて、対象を指定した色や形に変化させるということになります。

 

border(領域の枠線)

border(ボーダー)は、ボックス内に点線や二重線などの枠線を指定することができます。

 

 

枠線の太さや種類、配色などを自由に組み合わせて使用することが可能です。

 

まとめ

CSSでカスタマイズを行っていく上で、使いやすいプロパティを知っておくと色々と応用ができるので、「これ試せるかも!」「あれが使えたな。」なんて閃くこともあります。

 

複数のプロパティを上手く組み合わせることで、自分流のデザインや面白い変化を加えることができますし、CSSに少しずつ慣れてくるとカスタムが楽しくなってきますよ。

 

ここでご紹介したCSSプロパティ15選は、使用する頻度も多いのでこの機会にぜひ覚えて帰って頂けたらと思います。

 

合わせて読んでほしい

ワードプレスの用語ってわかる?初めに意味を知っておきたい30項目

ABOUT ME
フリーマン
フリーマン
1988年生まれで兵庫県に在住してます。気になることをただひたすらに書き続けて、ブログ運営10ヶ月目で月間10万PV超えを達成。 将来的な資産を作る為に資産運用も実践中。>>詳細プロフィール