このサイトはアストラの無料版で作っています。そしてプラグインをあまり使わないということにもこだわっています。プラグインを追加したり、アストラをプロにすれば出来ることも増えると思います。ですが、お金を一切かけずにプラグインの少ないサイトを作りたいのです。プラグインの少なさはトラブルの少なさにつながります。
そもそも CSS って？
まず最初に CSS の基本をワードプレス初心者の方に向けてお話します。CSS をざっくりと説明すると、サイトの要素をどのように修飾（表示）するかを指示する仕様です。サイトの要素とは「文字」や「画像」のことです。なのでテーマに関係なく見出しや表のデザインが変更可能ということなのです。
CSS による一括変更
テーマによっては、投稿一覧画像の明暗が変更出来ます。投稿アイキャッチに色味をかけたりも出来ます。ですがアストラには、画像に変化を加える機能がありません。そこで CSS によって画像効果を追加するのですが、この方法はサイト内の全ての画像に変更がかかります。
/* 画像 */
img {
border: solid 1px #999;
}上記 CSS を記入するだけで、サイト全ての画像に枠線が表示されます。投稿ページに投稿した画像のみなら良いのですが、ヘッダーに置いたサイトロゴまで枠線付きで表示されてしまいます。
画像１のロゴの周りにある枠線が分かりますでしょうか？
CSS を任意のブロックのみに適用
そこで CSS のクラスを作って任意のブロックにのみ枠線を適用します。これはもちろん指定したブロックにはデザインが適用されます。ですが逆にこちらが指定出来ない場所、例えばアイキャッチ画像などにはデザインを適用できません。
/* 画像 */
.waku img {
border: solid 1px #999;
}上記を追加 CSS に記載すれば、高度な設定の追加 CSS クラス欄に「waku」と記載したブロックの画像にのみ枠線が描かれます。
