追加CSSとは

CSS

• CSS（Cascading Style Sheet）はホームページのページを構成するプログラミング言語のひとつです。ホームページはHTML（Hyper Text Markup Lahgage）とCSSで構成されています。そこに、スクリプト言語というプログラミング言語を組み込んで、いろいろな機能を実現しています。
• CSSは名前の通り、表示する文字や画像などの色、位置、装飾を規定しています。装飾したい、文字や画像のタグ、ID、クラスなどで指定しますので、HTMLで指定しているタグ、ID、クラスを理解している必要があります。
• CSSで文字や画像の位置変更や装飾を規定する方法は、種類も多く、指定方法も複雑になります。HTML/CSSのリファレンスマニュアルを参考しながら指定します。
• 追加CSSとは、WordPressの機能の一つで、名前の通り、独自のCSSを追加できる機能です。特定の文字や画像の位置変更や装飾したい場合に使います。

追加CSSの利用ポイント

• 追加CSSを利用する場合は、HTMLとCSSの知識が必須になります。WordPressの基本思想は、プログラミングなしにホームページが作れることを目指していますので、利用することはあまりないかと思います。逆にこの機能を多用して、ページを作るのではWordPressを利用する意味が薄れてきます。しかし、文章の見栄えをよくするため、どうしても、ある部分の位置や表示を変えたいということが発生します。このように細かい装飾はWordPressの機能にはないので、そのために利用します。
• 例えば、『画像のサイズを変える。』　『画像の位置を少し変える。』　『単語のフォントを変える』　『題名の背景に画像をつけ強調する』など、細かい変更をしたいときに利用します。　
• ただし、CSSやHTML言語の制限によって、必ずしも要望通りに装飾できないことも多々ありますので、そこを理解して使用します。あくまでも、ページの見栄えを改善のため、微調整するのに利用するのがポイントです。

単純な追加CSSの使い方

以下に追加CSSを利用して、見栄え微調整した例を動画で示します。

題名の背景に画像をつけ強調する

.abc7 {
	color : rgb(0,255,0);
	background-image: url("https://sanageyama-system.com/twenty-one/wp-content/uploads/2021/04/チェック.png");
	 padding-left: 40px;	
}

文章の一部のフォントを変える

abc8 {
	color : rgb(255,0,0);
	font-family: 'HGP行書体';
}

画像のサイズを変える

.abc9{
	width: 400px; height: px;
}

画像の位置を少し変える

.abc10{ 
	 padding-left: 100px;
}

まとめ

• WordPressではページの見栄えや微調整を行うのに追加CSSという機能があります。この機能を利用するためには、HTMLとCSSの知識が必須になります。
• 追加CSSを利用することで、微妙な配置の変更、文章の一部の装飾、題名などの強調に利用できます。このブログの動画を見て使い方を覚えてください。