ここまでアストラの設定変更のみでカスタマイズしてきました。ですがついに CSS の出番です。
リストデザインの変更
最初に CSS 無しのリストスタイルを見てみましょう。
下が通常のスタイルです。
- リスト１
- リスト２
- リスト３
気にならない人もいるでしょう。どこがおかしいの？と思う方も。ですが私たちはリストマークを文章内に配置したいと思っています。上のデザインはマーク後の文章先頭を他の文章とツラ合わせしています。
では次に CSS を当ててみましょう。
- リスト１
- リスト２
- リスト３
上のリストスタイルは、リストに対してCSS を適用したわけではありません。ブロック自体に CSS を適用してあります。
CSS による見出しデザイン
既にお気付きの方もいらっしゃると思いますが、見出しにも CSS を当てています。このサイトで適用しているCSS は次のとおりです。
- 見出し
- ボックス
- ボックス用見出し
- リスト用ボックス
- 画像枠
- 画像彩度
これらの詳細についてはまた次の機会にご説明しようと思います。
アストラカスタマイズ一気読み
・子テーマのインストール
・アストラの初期設定
・プラグインの追加
・個別投稿のデザイン
・投稿一覧のデザイン
・サイドバーの設置
・コンテナレイアウトの変更
・CSS リストマージンの変更
・CSS タイトルデザイン
Powered by Realcommunications
