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

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

体ぶっ壊して死にかけたので人生RESET中。
\ ポイント最大10倍! /

【SWELL】cssを部分定義する方法

contents

SWELLで cssの部分定義

今まで 定義したCSSは

  • 全体に効果がある
  • ページ毎に効果がある

でしたね。

実はSWELLにはまだ細かく定義できる部分が残されてます。

実はこれが1番面白いかもw

実際の画面を見てみよう

ちょっとスクロールしてみてください。

  MBP最高!

  MBP最高!

  MBP最高!

これらは各行のPタグに対して個別にCSSを効かせてます。

ただしこのエフェクトはjavascriptでスクロールを検知して発動させてます。

そのやり方を見たい方はこちら(別TABで開きます)

ページの下部にある カスタムCSS&JS の CSS用コードに CSSを記述して

編集ページの画面右側の ブロック 内の最下部にある 高度な設定 > 追加CSSクラス で

記述したCSSのclassを記入します。

ここで記述するとブロック単位で任意のCSSを発動させることが可能になりますので

夢が広がりまくりですね!

応用:同じように SWELLのエディターの標準機能であるこれも

このSWELLエディターで出現してくるお馴染みのTOOLバーの中でも

狭い範囲のCSSを指定できます。

上の画像のドロップダウンメニューの中に 太字 と Quicksand があるのが見えると思いますが

これは SWELL設定 > エディター設定 > カスタム書式 で設定できます。

これは 文字の太さFONTの種類の指定のCSS 記述例 なのですが

インラインで 細かくCSSを指定できます。

例をあげると

  • これはQuicksandではありません。 (指定無し)
  • これはQuicksandです。 (Quicksandを指定)
  • これはQuicksandではありません。 (太字のみ指定)
  • これはQuicksandです。(太字とQuicksand)

みたいなことが自在にできるようになります。

これも応用次第で色々使えますね!

以上です。

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