wordpress-customizeWordPressのカスタマイズ
WordPressのカスタマイズ

【逆引き】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;

Category : WordPressのカスタマイズ

この記事がお気に召したら、いいね!お願いします♪

最新情報をお届けします

ほんわかクリエイター るこ

Web系のお仕事をしています。
むちゅめ(6歳/早生まれ/小学生1年生)大好きな親バカ系。
LOFT、無印、生活の木、伊東屋が好き。
自然溢れる場所に惹かれはするものの、めんどくさがりの省エネ派。ぐでたまを尊敬してます。

ブログ一覧へ戻る