Menu/Prof
スズキマコト
自由人
元々は楽器屋のギター兄ちゃん。
趣味でプログラミングしてるうちに
本職になってしまった人。

過去に喋っていた言語
c pascal Assembler
perl PHP Python Ruby など
javascriptなどは都度必要に応じて。
最近Mac買ったのでswift勉強してます。

体ぶっ壊して死にかけたので人生RESET中。

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

Some visuals are licensed via Canva Pro (includes commercial rights).
Usage complies with Canva’s license terms at the time of use.
License policy: canva.com/policies/content-license-agreement

X
     この記事はプロモーションを含みます
contents

SWELLのcssの定義のやりかた

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

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

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

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

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

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

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

でも自分の相棒をさらに個性的に仕上げてみたらもっと好きになれませんか?
(注釈:相棒=自分のBLOG)

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

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

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

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

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

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

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

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

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

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

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

つまりSWELLのCSS宣言は

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

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

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

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

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

2箇所あります。

  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について説明します。

シェアしてくれると喜びます
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

makotoのアバター makoto Blogger&YouTuber

サーバー管理者として17年ほど仕事でサーバー触ってました。
www,mail,dns,sql各鯖をすべてFreeBSDで運用してましたが現世ではかなりレアなタイプになるみたいですね笑

viやシェルスクリプトとかperlとかgccとかFreeBSDとか実はbashよりtcshが好きとか時々寝ぼけるのは
その名残でしょう。

今まで縁の下の力持ち的な他人のためにプログラムを書き他人のためにサーバー構築し他人のためにWEBサイトを創る的な世界から
自分の好きなことに集中できる環境は実に気持ち良いですね。
現役は引退済みなので難しいことはやりませんしやれません。

現在 ほぼ自由人。

contents