【SWELL – ver. 1.3.7 アップデート情報】

子テーマでテンプレートを上書きしてカスタマイズしている方や、CSSでカスタマイズを行なっている方は変更内容にご注意してアップデートしてください。

サイト全体に丸みをもたせる設定を追加しました

カスタマイザーの「デザイン・レイアウト」内に「全体に丸みをもたせる」という設定項目を追加しました。

これにより、サイト内の各要素が丸みを帯びるようになります。

一番わかりやすい部分が投稿リストのサムネイル画像部分だと思います。

お知らせバーのカスタマイズ性能が向上しました

背景効果を「グラデーション」に設定した時に、第2の色を指定できるようになりました。
また、お知らせバーの中に、キラッと光るボタンを配置できるようになりました。

詳しくは以下の記事をご覧ください

あわせて読みたい

ヘッダー上下に設置できる「お知らせバー」の設定方法 SWELLでは、重要なお知らせを分かりやすくアピールするための「お知らせバー」という機能を実装しています。 以下の画像のようにヘッダーの下部（または上部）に設置す…

投稿リストのカテゴリー周りのカスタマイズ性能が向上しました

投稿リストのサムネイル上に表示させているカテゴリー情報の背景色を個別に指定できるようになりました。（これまではメインカラーになっていました）

また、先ほど「サイト全体に丸みをもたせる」設定で紹介した画像でも確認できる通り、背景にグラデーション効果をつけることもできるようになりました。

メインビジュアルの設定項目を追加しました

各スライドごとに「テキストシャドウの色」を設定できるようになりました！

また、ボタンの形も、四角か、丸めるか、少しだけ丸めるかの3段階から選べるようになっています。

FLOCSS化などによるHTML構造の変更点

今回も、一部構造のリニューアルを進めています。

bodyに付与されるクラス名の変化

body直下のdiv#body_wrap要素に付与しているクラスを、一点変更しました。

• .solid → .-body-solid
• .flat → .-body-flat

お知らせバーの構造の変化

旧構造

.notice_bar
 (└ .notice_text_wrap )
    └.notice_text[.no_flow_text|.flow_text]

新構造

.c-noticeBar
 (└ .c-noticeBar__link )
    └.c-noticeBar__text[.-flow-off|.-flow-on]
      (└ .c-noticeBar__btn )

メインビジュアル上のボタン構造の変化

旧構造

.mv_btn[.btn_n|.btn_b]
  └ .btn_text

新構造

.c-mvBtn[.-btn-n|.-btn-b]
  └ .c-mvBtn__btn