サイトを育てる【逆引き】WordPressテーマカスタマイズでよく使うCSSプロパティ

セレクタ(要素){
プロパティ:値;
}

文字の色を変えたい

color:#ffffff;

#fffffの部分を変えると色が変わります。

デザインソフトを持ってなくても、色コードを調べられる?
Color Hex Color Codeを使うと調べられます。

背景色を変えたい

background-color:#000000;

#000000の部分を変えると色が変わります。

背景画像を変えたい

background:url(画像のURL) 繰り返し 横位置の配置 縦位置の配置;

wordpressのメディアから画像をアップロードし、画像のURLをコピー&ペーストしてください。
背景画像の繰り返しは「no-repeat(繰り返しなし)」「repeat(繰り返し)」「repeat-x(X軸のみ繰り返し)」「repeat-y(Y軸のみ繰り返し)」の4種類から選ぶことができます。
横位置の配置は、left center rightから、縦位置の配置は、top center bottomから選ぶことができます。

文字のサイズを変えたい

font-size:1.5rem;

remは、サイズの単位です。
センチメートル、インチ、ヤードのように、単位が複数有ります。

単位説明
px絶対サイズ指定
pt画面のサイズに対する文字サイズ(1pt=1/72インチ)ちょっと使いづらい。
em親要素の文字サイズに対する1文字分(デフォルト:1em=16px)
remhtml(ルート要素)の文字サイズに対するパーセンテージ(デフォルト:100%=1文字分=16px)
%親要素の文字サイズに対するパーセンテージ(デフォルト:100%=1文字分=16px)

文字の太さを変えたい

font-weight:bold;

太字にするなら「bold」

font-weight:normal;

太字になっているものを標準の太さに戻すなら「normal」

文字のスタイルを変えたい

font-style:italic;

斜体にしたいときはfont-style:italic;

text-decoration:underbar;

下線を引きたいときはtext-decoration:underbar;

background: linear-gradient(transparent 40%,#ffffd9 40%);

マーカー状のデザインにしたい場合は、background:(背景)に、グラデーションを指定します。

文字にドロップシャドウをつけたい

text-shadow:;

ブロック要素にドロップシャドウをつけたい

ブロック要素とは、箱状になっているタグのことをいいます。
殆どのタグがブロック要素です。

box-shadow: 0 0 0 5px rgba(0,0,0,0.2);

水平方向の位置、垂直方向の位置、ぼかしの距離、ぼかしの広がり、色指定
の順で指定されています。
ボックスの内側に影を付けたい場合は、insetをつけます。

box-shadow: 0 0 0 5px rgba(0,0,0,0.2) inset ;

ブロック要素以外のタグのことをインライン要素と言います。
例)span、strong、など文中で使うタグです。

要素の内側の余白を変えたい

padding:10px;

上下左右に10px

padding:10px 15px;

上下10px、左右15px

padding:10px 5px 20px 5px;

上10px、右5px、下20px、左5px
上から時計回りに指定します。

要素の外側の余白を変えたい

margin:10px;
margin:0 auto;

要素の配置を変えたい

floatと呼ばれるものを使うのが手っ取り早いです(WordPressで画像を回り込みにするときに入るタグがfloatです)
段組や回り込みをする方法は、floate、table-cell、flex-boxなどがあります。

float:left;
float:right;
float:none;

ブロック要素内の配置を変えたい

text-align:left;
text-align:center;
text-align:right;
サイトを育てる一覧へ