SWELLで cssで遊ぶその１

2022 4/05

contents

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

7500万点の素材が無料

SWELLのcssの定義のやりかた知りたい

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

つまりSWELLのCSS宣言は

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

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

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

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

２箇所あります。

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

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

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

外観＞カスタマイズ＞追加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で cssで遊ぶ その１