【swellカスタマイズ】css定義の方法

>>Amazonのお得な最新のタイムセール情報はここ

サーバー管理者歴17年の筆者が選んだレンタルサーバーはここ

ドコモ home 5G「キャッシュバック15,000円」を進呈中！

SWELLのcssの定義のやりかた

SWELLは何もしなくてもCOOLでカッコいいページは最初から可能です。

しかし・・しばらく使っていると色々やってみたくなりませんか？

「簡単にカッコいいSWELL」は言い方変えると

「誰がBLOG作っても似たようなBLOG」と同意義になるのに気が付く日はすぐに来ます。

デザインなんか拘らずに記事書けや

初心者はまず記事書け。 正論だと思います。否定するつもりもありません。

でも自分の相棒をさらに個性的に仕上げてみたらもっと好きになれませんか？笑
（注釈：相棒=自分のBLOG）

そんな人も一定数いると信じてこの記事を「CSSはわかんねーからパス」て人の為に書こうと思います。

わたしはWEBデザインやっているプロではありません。

素人の横好きですからデザインセンスに関してはカスです。

なのでカッコいいcssの構文は説明しません。

ていうかむしろできませんｗ

まずcssの記述場所でBLOGに影響する場所の違いを理解しよう

プログラムかじったことのある方なら

グローバル変数とローカル変数って聞いたことあると思います。

SWELLのCSSの追加方法はこの考え方が色濃くあると思います。

グローバル変数は 全ての部分にその内容が影響をする。

ローカル変数は ごく限られた範囲内で影響する。

つまりSWELLのCSS宣言は

この全体に影響する部分と部分的に影響する部分で

記述が可能であるとまず理解しておきます。

まず全体的に影響する部分。

ここでcssを定義するとBLOG全体にその効果が現れます。

２箇所あります。

1. 外観＞カスタマイズ＞追加CSS
2. 外観＞テーマファイルエディター＞スタイルシート

どちらも効果範囲は同じなのでどちらに追加してもいいのですが

使い分ける考え方の基本を覚えます。

外観＞カスタマイズ＞追加CSS

使い分けの方法として 外観＞カスタマイズ＞追加CSS の方は

リアルタイムで変更を変更した画面で参照できるので（要 再読み込み）

css実装の実験段階は 外観＞カスタマイズ＞追加CSSに記述するのが

圧倒的に使いやすいでしょう。

外観＞テーマファイルエディター＞スタイルシート

まず同じcssを両方で定義した場合は 上記の 「外観＞カスタマイズ＞追加CSS」 が優先の原則を理解しましょう。

完全にcss動作が安定し更に触る必要がしばらく無いなら

外観＞テーマファイルエディター＞スタイルシート の方に格納した方が

スペースが広いので 可読性が良いと思います。

使い方の具体例

万が一 後日css変更したい欲求に駆られた場合、 スタイルシートに記述したオリジナルは触らずに

外観＞カスタマイズ＞追加CSS で再定義すれば そちらが優先されますので

同じパラメーター同士なら簡単に上書きします。

再定義してないパラメーターは

外観＞テーマファイルエディター＞スタイルシート のパラメーターがそのまま適用されるので

動作確認の際はその辺りは留意してください。

再定義して気に入らなかったら 追加CSSで再定義したものを消してしまえば
スタイルシートに記述してあるオリジナルに即復活という事が可能になります。

例をあげると

外観＞テーマファイルエディター＞スタイルシートに記述したh4タグの定義部分

上記のcssの意味は

• 67: h4タグを再定義するぜー
• 68: padding 「表示要素の内側に設けられた余白は無し」
• 69: border-bottom 「h4タグの下線部分は 太さ1pxで直線で 色は #3f4c58」
• 70: LETTER-SPACING 「文字間隔は3pxあけてね」

外観＞カスタマイズ＞追加cssで同じh4を再定義してみる

LETTER-SPACING:3px; （文字間隔のcss）だけ rem文にして再定義しないようにして実験。
（rem とは説明文扱い(cssの記述にならない) 行頭に// でrem化）

H4タグの下線が 青く太くなって 再定義した部分が有効化しつつ

定義していない LETTER-SPACING:3px; （文字の間隔を3px空ける）は

外観＞テーマファイルエディター＞スタイルシートに

記述したものがそのまま生きているのがわかりますね。

これでグローバルに影響するcss記述部分の各部位と依存関係の説明は終わりです。

次回の記事はローカルに記述するCSSについて説明します。

あわせて読みたい

【swellカスタマイズ】コンタクトフォーム7のカスタマイズ コンタクトフォーム7のカスタマイズ編 今回記事にするローカルなCSSはページ単位しか影響しない 記述の仕方になります。 例題として　SWELLで Contact Form 7 コンタク…