Discordコミュニティを作りました! 参加する

フォーラム

トピックを立てる前にチェック
  1. フォーラムガイドライン」に必ず目を通してください。
  2. バージョンアップデート後に表示がおかしくなった場合は、
    「SWELL設定」>「リセット」からキャッシュクリアを先にお試しください。
  3. フォーラム内検索で過去に同じようなトピックがないか検索してみてください。
ブラウザ風・デスクトップ風画像とRSS...
 
通知
すべてクリア

[解決済] ブラウザ風・デスクトップ風画像とRSSブロックのデザイン崩れ

9 投稿
3 ユーザー
1 Likes
1,344 表示
suya
 suya
(@suyasite)
投稿: 115
メンバー
Topic starter
 

新規構築した環境で検証しています。

SWELLの高速化設定をポチポチしましたが、改善しませんでした。

画像を縮小表示すると、スタイルによってデザイン崩れが発生します。

1) 画像ブロックの表示サイズを「小さく表示」

以下のスタイルで、周囲に余白が生じる(URL参照)

・ブラウザ風

・デスクトップ風

2) 画像ブロックの画像の寸法を「25%」などに縮小

以下のスタイルで、枠が広がって画像だけが左寄せ(編集画面)・中央寄せ(公開画面)になる(URL参照)

・ブラウザ風

3) RSSブロックの表示が崩れる

これは、編集画面でのみ発生しており、プレビュー画面や公開ページでは発生しません。

添付画像の通り

スクリーンショット 2022 03 10 17.21.16
スクリーンショット 2022 03 10 17.22.06
確認項目
利用規約に同意します*, ガイドラインを読み、内容を把握しています*, よくある質問を先にチェック済みです*, 過去に同じようなトピックがないか検索済みです*, WordPress更新後、SWELLは最新版にしましたか?, プラグインを停止しても同じことが起こることを確認しました, 自分で追加したコードに問題がないかチェック済みです
問題が確認できるページのURL
利用中のSWELL本体のバージョン
2.5.9.4
利用中のPHPバージョン
7.4.27
OS
macbook
利用中のWordPressバージョン
5.9.1
利用中のサーバー会社
ラッコサーバー
ブラウザ
Chrome、Firefox、Safari
利用中のプラグイン一覧

SEO SIMPLE PACK (v.2.3.1)
WP Multibyte Patch (v.2.9)
XO Security (v.3.1.7)

This topic was modified 2年前 3回 by suya

SWELLファンです。
SWELL初心者のためのお役立ちリンク集(おすすめプラグイン)
SWELLサイト・ブログ事例集(WP-Search)
無料のプロフィール&プレスリリースサイト「ブロググ」

 
投稿済 : 10/03/2022 5:45 pm
了
 
(@loos_ryo)
投稿: 1248
メンバー Admin
 

すみませんサイトが見れないです…!

SWELL開発者です。

 
投稿済 : 10/03/2022 5:49 pm
suya
 suya
(@suyasite)
投稿: 115
メンバー
Topic starter
 

@loos_ryo 

サイトのSSL化がまだ完了していなくて、ブラウザの詳細ボタンから見れませんか?

取り急ぎ画像でもアップしておきます。

スクリーンショット 2022 03 10 18.05.08
スクリーンショット 2022 03 10 18.05.13
スクリーンショット 2022 03 10 18.05.20

 

SWELLファンです。
SWELL初心者のためのお役立ちリンク集(おすすめプラグイン)
SWELLサイト・ブログ事例集(WP-Search)
無料のプロフィール&プレスリリースサイト「ブロググ」

 
投稿済 : 10/03/2022 6:06 pm
了
 
(@loos_ryo)
投稿: 1248
メンバー Admin
 

「小さく表示」の表示はこれが仕様です!

ブラウザ風の25%のやつはちょっと後で確認しておきます!

SWELL開発者です。

 
投稿済 : 10/03/2022 9:12 pm
suya
 suya
(@suyasite)
投稿: 115
メンバー
Topic starter
 

前は違った気がしたので、古いバージョンで試してみました。

swell-2-5-6-5では、デスクトップ風は「小さく表示」でもうまく表示されてますが、その後デザインが変わったからなんですね。

ブラウザ風は以前も「小さく表示」でうまく表示されませんでした。

一応ご報告しておきます。

スクリーンショット 2022 03 10 22.16.21
スクリーンショット 2022 03 10 22.16.31

 

SWELLファンです。
SWELL初心者のためのお役立ちリンク集(おすすめプラグイン)
SWELLサイト・ブログ事例集(WP-Search)
無料のプロフィール&プレスリリースサイト「ブロググ」

 
投稿済 : 10/03/2022 10:19 pm
了
 
(@loos_ryo)
投稿: 1248
メンバー Admin
 

正直いうとサイズ系の設定との併用はCSSがかなりごちゃ付いてしまうので「使わないでね」で押し通したいくらいないのですが、コアの機能としても使えちゃうのでどうしよう...という感じです...。

改めて見直してみます。

一応、少し小さめに表示したいときの取り急ぎの対応ですが、リッチカラムでカスタムパディングを使っていただくとよいかなと思います...。

<!-- wp:loos/columns {"colPC":"1","colTab":"1"} -->
<div class="swell-block-columns" style="--swl-fb_tab:100%;--swl-fb_pc:100%"><div class="swell-block-columns__inner"><!-- wp:loos/column {"useCustomPadding":true,"padding":{"top":"0rem","left":"5%","right":"5%","bottom":"0rem"}} -->
<div class="swell-block-column swl-has-mb--s" style="--swl-clmn-pddng:0rem 5% 0rem 5%"><!-- wp:paragraph {"align":"center","backgroundColor":"swl-main"} -->
<p class="has-text-align-center has-swl-main-background-color has-background">画像をここに</p>
<!-- /wp:paragraph --></div>
<!-- /wp:loos/column --></div></div>
<!-- /wp:loos/columns -->
This post was modified 2年前 2回 by

SWELL開発者です。

 
投稿済 : 10/03/2022 10:51 pm
suya
 suya
(@suyasite)
投稿: 115
メンバー
Topic starter
 

すみません、SWELL機能かと思って気軽に投稿してしまっていました!

・「画像の寸法」は、PCでは小さく表示、スマホでは大きく表示

・「小さく表示」は、PCでもスマホでも小さく表示

という具合に結構便利に使わせてもらっていました!

開発が大変そうであれば、おっしゃる通りリッチカラム等で代替したいと思います!

SWELLファンです。
SWELL初心者のためのお役立ちリンク集(おすすめプラグイン)
SWELLサイト・ブログ事例集(WP-Search)
無料のプロフィール&プレスリリースサイト「ブロググ」

 
投稿済 : 10/03/2022 11:05 pm
yamowo
(@yamowo)
投稿: 32
メンバー
 
当方でも画像ブロックにそれぞれのスタイルを適用したところ、編集画面での下記挙動によって表示崩れが発生しました。
・リサイズ動作をしない場合(画像挿入後、スタイルを設定しただけ)
・リサイズ動作をした場合(画像挿入後、75%→100%にして、スタイルを設定)
 
ただ、表示崩れの発生はそれぞれのスタイルで異なるようです。
 
・ブラウザ風:リサイズ動作をすると表示が崩れる
ブラウザ風

 

・デスクトップ風:リサイズ動作をすると表示崩れが直る
デスクトップ風

 

※リサイズ動作をした場合、100%に戻しても「figure.is-resized」は消えない。
 

SWELLでニッチなカスタマイズして遊んでます #ヤモヲのひとりあそび

 
投稿済 : 22/03/2022 2:34 pm
suya reacted
suya
 suya
(@suyasite)
投稿: 115
メンバー
Topic starter
 

遅くなりましたが、バージョン2.6.0.1で修正されたことを確認しました。

いつも迅速な対応ありがとうございます。

SWELLファンです。
SWELL初心者のためのお役立ちリンク集(おすすめプラグイン)
SWELLサイト・ブログ事例集(WP-Search)
無料のプロフィール&プレスリリースサイト「ブロググ」

 
投稿済 : 06/04/2022 6:21 pm
共有: