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

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

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

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

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

今まで 定義したCSSは

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

でしたね。

実はSWELLにはまだ細かくカスタマイズできる部分が残されてます。

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

実際の画面を見てみよう

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

MBP最高！

MacBookは美しい

これらは各行の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です。(太字とQuicksand)

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

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

以上です。

あわせて読みたい

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

あわせて読みたい

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

あわせて読みたい

cocoonからSWELLに移行してみよう！ 【SWELL: ブログ運営を劇的に改善するワードプレステーマ】 ブログのデザイン作成や記事作成、面倒くさいと考えていませんか？でも大丈夫！ SWELLはあなたのブログを一…