追加CSSでSWELLをカスタムする方法
ブログサイトを自由にカスタムしたいけど、どうやってやるのか分からなくて困っていませんか？
SWELLの追加CSSを使えばおしゃれなブログサイトに変更することが出来ます。
このブログでは、SWELLテーマをダウンロードしたあとにCSSでおしゃれにカスタムする方法を紹介しています。
- 追加CSSの使い方を1から知る
- CSSの書き方ルール
- よく使うCSSの紹介
- CSSでカスタムするときの注意点
テトCSSを使わずカスタマイズしたい方はこちらのブログがおすすめです。
まずはCSSの基本から、いってみましょう！
SWELLの追加CSSを使うカスタムの基本
SWELLテーマは、カスタマイズが可能なWordPressの有料テーマです。
追加CSS欄にCSSを記述することで、自分だけのデザインを実現できます！
SWELLのCSSの記述場所はどこ？
SWELLでCSSを記述するところは2箇所あります。
1箇所目
WordPressの「外観」→「カスタマイズ」→「追加CSS」
２箇所目
WordPressの「外観」→「テーマファイルエディター」
今回は１箇所目の「追加CSS」に記述する方法を解説してゆきます！
２箇所目の「テーマファイルエディター」は上級者向けなので、慣れないうちは触らないようにしましょう！
そもそも追加CSSで何が出来るの？
追加CSSは知ってるけど、そもそも追加CSSで何が出来るか知りたいですよね。
「追加CSS」にCSSを記述することで、テーマ全体やプラグインなどにデザインの指示を与えられます。
CSSを使うことで、背景色、フォント、レイアウトなどを自由に設定できます。これにより、サイトの独自性が高まり、訪問者にとって魅力的なデザインに仕上げることができます。
基本的なCSSのルールを理解しておくことが重要ですが、デザイン指示のパターンをいくつか覚えておけば、SWELLのブログサイトのカスタマイズは簡単なので心配いりません。
追加CSSの基本操作
まずは、「追加CSS」の画面を開きましょう。
簡単４ステップです。
一番下段に「追加CSS」があります
黄枠内がCSSを書いていくスペースです
CSSを書けたら「公開」または「下書き保存」をクリック
「公開」ボタン隣の歯車マークをクリックして「下書き公開」が表示できます
下書き保存の場合はプレビュー用のURLが発行されます。これで公開前でも画面で確認可能です。
テト基礎から知っておきたいという方に、ざっくりとCSSの記述方法を解説してゆきます。
CSSの基礎（記述方法）についての解説が不要な方は次の章まで読み飛ばしてください。
カスタムのためのCSSの基礎
SWELLテーマでCSSを使ってデザインをカスタムするために、まずは指示を出したいデザイン要素に名前をつける必要があります。
名前の付け方ルール
つける名前には２つ種類があって「クラス」と「ID」と呼びます。
いくつか覚えるべきネーミングルールがあるのでご紹介しますね。
- クラスはclass、IDはidと書く
- cssに書くときは、classの場合.（ドット）、idの場合#（ハッシュタグ）を頭に書く
- ページ内で同じid名を使えるのは一回きり
- ページ内で同じclass名は何度も使って良い
- 先頭文字を数字にしてはいけない（例 .7name、#7name）
- ハイフンを2つ連続で使用してはいけない（例 .–name、#–name）
- ハイフン直後に数字を使用してはいけない（例 .-7name、#-7name）
ここで、忘れず覚えておいてほしいことは、
ページ内で同じid名を使えるのは一回きり ということです。
あとの項目は「へぇ～」となんとなく知っておくくらいで今は問題ありません。
同じページ内で使えるidは一回きり、classは何度も使えると、（意味はまだ分からずとも）覚えてください。
記述の仕方のルール
ここで覚えてほしいことは、追加CSSにどのようにCSSを記述するかです。
CSS全般を学ぶのはハードルが高いですが、SWELLの追加CSSのために覚えなければいけない記述方法は比較的少ないです。
例えば、テキストの色を青くしたいときはこのように書きます。
p { color :blue; }このとき書いているpとは、テキストのことです。
CSSではテキストのことを”p”と書きます。
上記では「テキストのカラーをブルーにして」という指示を出しています。
基本的な記述方法のルール
↓この書き方が基本的な記述方法のルールなので覚えましょう。
セレクタ { プロパティ :値; }セレクタ ＝ p とか div とか 先述したID（#◯◯◯）とかclass（.◯◯◯）が入ります。
プロパティ ＝ color とか font-size とか background などが入ります。
値 ＝ 色、サイズ、位置、数字などが入ります。
色々な記述例
セレクタ、プロパティ、値を変えてそれぞれ記述してみるとこんな感じです。
h2 { background-color: gray; }
.midashi { font-size: 24px; }
#contents { width:100%; }セレクタ { プロパティ : 値; } の基本ルールを忘れずにいましょう！
複数のセレクタ（要素）にまとめて指示を書く方法
セレクタとセレクタをカンマ（,）で区切って半角スペースを空けます。
こうすることで、複数の要素に同じ指示をまとめて出すことが出来ます。
h2, .midashi, #contents { background-color: gray; }よくわからなかったら、慣れるまでは下記のように別々で書いても特に問題はありません。
h2 { background-color: gray; }
.midashi { background-color: gray; }
#contents { background-color: gray; }追加CSS内にメモを残したいとき
追加CSSを記述してゆく内に、どれがどのデザインに対して記述したものかわからなくなってきます。
そうならないために、「コメントアウト」と呼ばれるメモを残す方法があります。
/*この間に書かれたテキストは反映されない*/
/*メモ出来ちゃう*/開始は「/*」終わりは「*/」と記述します。
/**/の間に書いたテキストは表のページに反映されずに済むのです。
まずは基本の記述方法を覚えること。
その後は「セレクタ」「プロパティ」「値」にはどんなものがあるかザーと表を見て把握することです。
始めから覚えるのは無理なのでどんどん追加CSSに記述していってみましょう！
そのうちに覚えています。
SWELL追加CSSでデザインを変える
SWELLの追加CSSを使えば、カスタマイザーでは出来なかったデザイン変更が出来ます。
ここからは代表的なCSSを紹介してゆきます！
フォントの種類を自由に変更
フォントを変更することで、テキストの見やすさやデザイン性が向上します。
Google Fontsなどの外部フォントを利用し、サイトに合ったフォントを選ぶことで、個性を強調できます。
見出しデザインを工夫
見出しを目立たせるためには、サイズや色を工夫することが効果的です。
CSSを使って独自のデザインを適用することで、情報の階層をわかりやすく示すことができます。
文章の行間や文字間の調整
行間や文字の大きさを調整することで、文章が読みやすくなります。特に長文の場合、これらの設定が重要です。
又、おしゃれな見出しとして使うときに役立ちます。
リンクの色や装飾の変更
リンクの色や装飾を変更することで、訪問者がどこをクリックするべきかを視覚的に示すことができます。カラーコントラストを意識することが重要です。
角に丸みをもたせる
ボタンや画像、カードデザインなどの角を丸くすることができます。ページの印象がより柔らかく、親しみやすい印象になります。
ボタンのデザインを変更
ウェブサイトにおいてボタンはとても重要です。ボタンの見た目が良ければ、よりクリックされやすくなります。
追加CSSで作ったデザインを確認する
追加CSSでデザインの指示を書けたら、すぐにデザインの確認が出来ます。
以下の手順です。
追加CSSに入力 ＞ 「公開」をクリック ＞ サイトのURLを開いてリロードする
テト操作方法がわからない方は「追加CSSの基本操作」に戻って見てみてください。
追加CSSでオリジナルデザインにする方法
自分だけのCSSを追加CSSに記述することで、オリジナルデザインに仕上げることができます。
次のステップで見てゆきましょう！
変えたいデザイン要素を選ぶ
自分のサイトに必要な要素を考えて、要素のセレクタを確認しましょう。
追加CSSに記述する
自分のスタイルに合わせて、独自のCSSを記述します。
この過程を経ることで、他のサイトと差別化した魅力的なデザインが実現できます。
お気に入りのデザインを保存する
気に入ったデザインを保存しておくことで、後からも簡単に再利用できます。
SWELLでは「パターン」の機能を使って、デザインを他の記事でも楽に使用できるように保存しておくことが出来ます。
まとめ
SWELLのカスタムCSSを活用することで、サイトを自分好みにデザインできます。
デザインやレイアウトの変更、アニメーションの追加など、多様な方法でオリジナルデザインが可能です。
ぜひ、これらの技を使って魅力的なサイトを作ってみてください。
