トピックを立てる前にチェック
- 「フォーラムガイドライン」に必ず目を通してください。
- バージョンアップデート後に表示がおかしくなった場合は、
「SWELL設定」>「リセット」からキャッシュクリアを先にお試しください。 - フォーラム内検索で過去に同じようなトピックがないか検索してみてください。
フォーラム
通知
すべてクリア
SWELLに関する質問
1
投稿
1
ユーザー
0
Reactions
10
表示
トピックスターター
フルワイドブロックの背景色をグラデーションにしたいです。
該当フルワイドブロックの「高度な設定」の「追加CSSクラス」に「gradient-BG」を追加しました。
その後、カスタマイズの追加CSSで、以下を追加したのですが、
-------------
/*グラデーション背景*/
.gradient-BG{
background-color:linear-gradient(90deg, #000e60, #0606fe);
}
-------------
「うまくいかなかったようです」と表示されてしまいます。
何度やっても同様の表示が出てしまいます。
CSSが間違っているのでしょうか？
ご教示いただければ助かります。
ちなみに追加CSSでは以下の記載をしており、
今回のグラデーションCSSは一番下に追加しました。
-------------
.l-fixHeader__inner{
backdrop-filter: blur(10px);
color:#000e60;
}
.l-header__menuBtn {
background-color:transparent;
}
/* Table Layout Form */
.form-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 1.5em;
color:#000e60;
}
.form-table th,
.form-table td {
padding: 0.75em;
border: 1px solid #ddd;
text-align: left;
vertical-align: top;
}
.form-table th {
background-color: #f9f9f9;
font-weight: bold;
width: 25%;
}
.form-table th label {
font-weight: bold;
}
.form-table td {
width: 75%;
}
.form-control {
width: 100%;
padding: 0.5em;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.form-control:focus {
border-color: #5b9dd9;
outline: none;
}
.required {
background-color: red;
color: white;
padding: 2px 6px;
border-radius: 4px;
font-size: 0.875em;
font-weight:bold;
}
.optional {
background-color: #0000ff;
color: white;
padding: 2px 6px;
border-radius: 4px;
font-size: 0.875em;
font-weight:bold;
}
.wpcf7-submit {
display: block;
margin: 0 auto;
}
.CF7_btn{
text-align:center;
margin-top:20px;
}
@media (max-width: 768px) {
.form-table th,
.form-table td {
display: block;
width: 100%;
}
.form-table th {
background-color: transparent;
text-align: left;
}
.form-table td {
margin-bottom: 1em;
}
.form-table td:last-child {
margin-bottom: 0;
}
}
/* TOPmsgスマホだけ改行 */
@media screen and (max-width: 450px) {
.sp-break {
display: inline; /* スマホでは改行を表示 */
}
}
@media screen and (min-width: 451px) {
.sp-break {
display: none; /* PCでは改行を非表示 */
}
}
/*ブロークングリッド背景blur*/
.broken-grid-blur {
background-color:transparent; /* 半透明の背景 */
backdrop-filter: blur(20px); /* 20pxのぼかし */
padding:30px;
border: 1px solid rgba(255, 255, 255, 0.4);
border-right-color: rgba(255, 255, 255, 0.2);
border-bottom-color: rgba(255, 255, 255, 0.2);
}
/*TOPページリクルート部分の角丸くする*/
.recruitblock{
border-radius:10px;
}
/*More*ボタン*/
.is-style-more_btn a{
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
color: inherit;
}
-------------
何卒よろしくお願い致します。
確認項目
問題が確認できるページのURL
利用中のSWELL本体のバージョン
2.16.0
利用中のPHPバージョン
8.4.3
OS
Windows
利用中のWordPressバージョン
6.9
利用中のサーバー会社
ConoHa
ブラウザ
Chrome
利用中のプラグイン一覧
All-in-One WP Migration and Backup
Blocks Animation: CSS Animations for Gutenberg Blocks
ConoHa WING コントロールパネルプラグイン
ConoHa WING 自動キャッシュクリア
Contact Form 7
EWWW Image Optimizer
SiteGuard WP Plugin
Akismet Anti-spam: Spam Protection
投稿済 : 17/12/2025 6:10 pm