【swellカスタマイズ】cssを部分定義する方法

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

7500万点の素材が無料

Wi-Fi6対応　最新5Gドコモホームルーター！

SWELLで cssの部分定義をカスタマイズする

今まで 定義したCSSは

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

でしたね。

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

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

実際の画面を見てみよう

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

  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)

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

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

以上です。

あわせて読みたい

SWELLで 最新版 Font Awesomeや GoogleFontを 高速に使う方法 【最新版Font AwesomeやgoogleフォントをWordPress ローカルで 高速に読み出す。】 Blogでも普通にHTML書いてもやはりかっこいいアイコンは使いたい。 私のBLOGもアイコ…

あわせて読みたい

【swellカスタマイズ】css定義の方法 【SWELLのcssの定義のやりかた】 SWELLは何もしなくてもCOOLでカッコいいページは最初から可能です。 しかし・・しばらく使っていると色々やってみたくなりませんか？ …