wordpress-customize【逆引き】WordPressテーマカスタマイズでよく使うCSSプロパティ

WordPressのカスタマイズ

記事を書くときに、ちょっとだけ飾りをつけたい。
とんなときによく使うCSSのプロパティをご紹介します。
逆引きになっているので、やりたいことで調べてコピペしてみてくださいね。

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

文字の色を変えたい

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

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

背景色を変えたい

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

背景画像を変えたい

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

文字のサイズを変えたい

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

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

文字の太さを変えたい

太字にするなら「bold」

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

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

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

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

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

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

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

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

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

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

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

上下左右に10px

上下10px、左右15px

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

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

要素の配置を変えたい

フロートタグと呼ばれるもの。
段組や回り込みをする方法は、フロート、テーブルセル、
float:left;
float:right;
float:none;

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

text-align:left;
text-align:center;
text-align:right;

UX/UI Designer luelue

イラストレーター→デザイナー→Webデザイナー→Webディレクターとして働く小学一年生のママ。
出産前に描いた「仕事と子育てとの両立」についての見通しが甘く、出産してはじめて、今までのようには働けないのだと気づきました。
好きな仕事だからこそ諦めることが悔しくて、以来、今の自分にできる最善な働き方を求め行動しています。
どんな立場であれ、女性は人生のステージが変わるたびに「生き方が180度ひっくり返ってしまう」と感じた経験から、人生の転機に少数精鋭で働くことを選んだ女性オーナー様を、起業とは切っても切れない 「自分メディアづくり」で応援しています。

コメントは受け付けていません。

ブログ一覧へ戻る