CSSの書き方

見出しのデザインをカスタマイズしても反映されない原因と対策

2017年7月7日 CSSの書き方

サイトで使うh1やh2の見出しをおしゃれなデザインにしたいというニーズは多いです。また、おしゃれかどうかは別にして、使用中のテーマとは違うデザインに変えたいこともあります。ここでは、インターネットで見つけた見出しのサンプルCSSを自分のサイトで使うときに必要な修正ポイントを説明します。

この記事を読む

ラジオボタンやチェックボックスを画像クリック型にする方法

2017年5月20日 CSSの書き方

ラジオボタンやチェックボックスを画像に置き換える方法を紹介します。見やすいフォームを作成できれば、問い合わせや成約の増加につながるかもしれませんね。Contact Form 7プラグインで作成した問い合わせフォームとJazzy Formsプラグインで作成した見積もりフォームを例に説明します。

この記事を読む

WordPressの編集画面で使える便利なCSS（センタリング・余白・枠線）

2016年10月15日 CSSの書き方

WordPressの編集画面にコピーペーストして使える便利なCSSを紹介します。活用する場面は、少しだけデザインを調整したいときです。たとえば、申し込みボタンをセンタリングしたり、画像の下に余白を入れたり、一部の文章を枠線で囲みたいときです。

この記事を読む

CSSで画像に文字を重ねる方法

2016年10月4日 CSSの書き方

CSSを使って画像の上に文字を重ねる方法を紹介します。難しそうですが、ポイントだけおさえれば、普通にdivブロックを作るのと変わりません。参考にしてください。仕上がりイメージは次のようになります。 CSSで重ねる画像と文字を準備まずは、後で重ねる画像と文字を準備します。この時点では、単に画像と文 ...

この記事を読む

CSSでリンクの下線を消したり点線にする方法

2016年10月2日 CSSの書き方

リンクには下線が付くのが一般的ですが、リンクの下線を消したり、文字と下線の間に余白を入れたり、下線を点線にしたいこともあります。ここでは、CSSを使って下線をいろいろと設定する方法を紹介します。リンクの下線を消す下線を消すにはCSSで「text-decoration: none;」を指定します ...

この記事を読む

CSSを使って画像に額縁風の枠線を付ける方法

2016年9月6日 CSSの書き方

CSSを使って画像に枠線を付けたい場合もあります。たとえば、次のような太い枠線を表示して額縁風に見せたいという要望も多いです。ここでは、CSSを使って画像の枠線を表示する方法を紹介します。 CSSで画像に枠線を付ける「border」 CSSの「border」を使うと画像などに枠線を付けることができ ...

この記事を読む