トピックを立てる前にチェック
- 「フォーラムガイドライン」に必ず目を通してください。
- バージョンアップデート後に表示がおかしくなった場合は、
「SWELL設定」>「リセット」からキャッシュクリアを先にお試しください。 - フォーラム内検索で過去に同じようなトピックがないか検索してみてください。
フォーラム
通知
すべてクリア
検索結果: : 余白
| # | 投稿タイトル | 結果情報 | 日付 | ユーザー | フォーラム |
| 投稿ページアイキャッチ画像下の余白 | 0 関連性 | 1年前 | bayashiko | SWELLに関する質問 | |
| アイキャッチ画像下に謎の余白ができ削除することができません。 アイキャッチ画像を非表示にしても謎の余白は消えませんでした。 プレビューページでは余白が表示されず、サイトで投稿ページを開くと余白がある状態です（全投稿） ご教授のほどよろしくお願いします。 | |||||
| RE: テーブルの枠内の余白を狭めたい | 0 関連性 | 1年前 | so056018 | SWELLに関する質問 | |
| ありがとうございます。ご提示いただいた対応を勉強したいと思います！ | |||||
| 編集画面でh3以降のCSSデザインが表示されない | 0 関連性 | 1年前 | iyuya0623 | SWELLに関する質問 | |
| CSSで以下のように見出しのデザインを編集しました。 記述している場所は、「外観」の「テーマファイルエディタ」の「SWELL CHILD: Stylesheet (style.css)」です。 /* h3 見出し */ .post_content h3 { padding: 0.6em 0.5em;/*文字の上下 左右の余白*/ color: #010101;/*文字色*/ background: #f4f4f4;/*背景色*/ border-left: solid 5px #1c3982;/*左線*/ border-bottom: solid 3px #d7d7d7;/*下線*/ } /* h4 見出し */ .post_content h4 { border-bottom: solid 3px #c6dff4; position: relative; } .post_content h4:after { position: absolute; content: " "; display: block; border-bottom: solid 3px #1d4189; bottom: -3px; width: 30%; } /* h5 見出し */ .post_content h5 { padding: 0.25em 0.5em;/*上下 左右の余白*/ color: #494949;/*文字色*/ background: transparent;/*背景透明に*/ border-left: solid 5px #7db4e6;/*左線*/ } /* h6 見出し */ .post_content h6 { color: #505050;/*文字色*/ padding: 0.5em;/*文字周りの余白*/ display: inline-block;/*おまじない*/ line-height: 1.3;/*行高*/ background: #dbebf8;/*背景色*/ vertical-align: middle; border-radius: 25px 0px 0px 25px;/*左側の角を丸く*/ } .post_content h6:before { content: '●'; color: white; margin-right: 8px; } /* ここまで */ ちなみに、swellではh3以降の見出しのデザインはオフにしています。 このようにカスタマイズしているときに、swellの編集画面で記事を書こうとすると、h3見出し以降が表示されません。 添付ファイル : スクリーンショット 2024-01-26 0.37.04.png ↑このような感じで編集画面では文字しか表示されません。 添付ファイル : スクリーンショット 2024-01-26 0.37.41.png ↑実際の投稿画面は、このような感じでしっかりとCSSが反映されています。 記事を編集しているときに、編集画面でもCSSが適用されないと、一目でどれが見出しなのか分かりにくく、効率的に記事を執筆できません。 編集画面でもCSSを反映させる方法を教えていただけたら幸いです。 ちなみに問題が確認できるページのURLには念の為テスト投稿のURLを追加しています。 パスワードは「swell」です。 | |||||
| 最近のコメント一覧をウィジェットに表示したい | 0 関連性 | 1年前 | iyuya0623 | ご要望 | |
| 先日、cocoonからswellに移行しました。 その際、cocoonでは存在した「（c）最近のコメント」ウィジェットがswellにはありません。 様々なサイトを見て、function.phpやCSSを追記してウィジェットを追加する方法などを試しましたが、うまく表示されません。 デフォルトのコメント一覧ウィジェをCSSでカスタマイズしようとしたのですが、反映されませんでした。 記述したCSSは以下のとおりです。 /* 最近のコメントウィジェットのスタイル */ .widget_recent_comments { padding: 20px; /* ウィジェットの内側の余白 */ } /* コメントボックスのスタイル */ .widget_recent_comments li { margin-bottom: 15px; /* コメントの間隔 */ list-style: none; /* 箇条書きのマーカーを非表示 */ background-color: #fff; /* コメントボックスの背景色 */ border: 1px solid #ddd; /* コメントボックスのボーダー */ padding: 15px; /* コメントボックスの内側の余白 */ border-radius: 8px; /* コメントボックスの角を丸くする */ } /* アバターのスタイル */ .widget_recent_comments li img.avatar { border-radius: 50%; /* アバターを丸くする */ float: left; /* アバターを左に寄せる */ margin-right: 10px; /* アバターとテキストの間隔 */ } /* コメント者の名前のスタイル */ .widget_recent_comments li a { font-weight: bold; /* コメント者の名前の太さ */ color: #333; /* コメント者の名前の色 */ text-decoration: none; /* 下線を非表示 */ } .widget_recent_comments li a:hover { color: #0073e5; /* コメント者の名前のホバー時の色 */ } /* コメント内容のスタイル */ .widget_recent_comments li .comment-content { color: #555; /* コメントの本文の色 */ margin-top: 5px; /* コメント者の名前とコメント内容の間隔 */ } /* コメントのリンクのスタイル */ .widget_recent_comments li .comment-link { display: block; /* リンクをブロック要素にする */ color: #0073e5; /* リンクの色 */ margin-top: 5px; /* コメント内容とリンクの間隔 */ text-decoration: none; /* 下線を非表示 */ } もし以上のCSSが間違えているのであれば、正しいものを教えてください。 swellでも以下のようなコメント一覧を表示させたいです。 添付ファイル : Better-WordPress-Recent-Comments.png | |||||
| RE: テーブルの枠内の余白を狭めたい | 0 関連性 | 1年前 | かんた | SWELLに関する質問 | |
| コアのテーブルブロックにセル内の余白を調整する機能はありません。 CSSで調整するか、テーブル系のプラグインを試してみてはいかがですか。 参考：WordPressプラグインディレクトリ | |||||
| RE: （追記）テーブルの枠内の余白を狭めたい | 0 関連性 | 1年前 | so056018 | SWELLに関する質問 | |
| 追記失礼します。 このサイト様くらいのコンパクトさになるのが理想なのですが。。。 起業・スタートアップにおすすめのバーチャルオフィス比較ランキング8選│Your Best Navi (yourbest-navi.com) | |||||
| テーブルの枠内の余白を狭めたい | 0 関連性 | 1年前 | so056018 | SWELLに関する質問 | |
| こんにちは、お世話になります。テーブル機能で表を作っているのですが、枠内の要素の両脇がかなり広々しているのが気になっています。（赤部分）一見した際の視認性を上げたいのでその部分の余白を狭めたいのですが、なんとか調整することは可能でしょうか？（文字サイズを小さくしたら枠自体がもう少しコンパクトになるかなと思ったらなぜか逆にもっと広々してしまいました…） 設定は横スクロールのみonにした状態でその他はデフォルトです。 swell上でむずかしいのであれば、調整できるプラグインなど教えていただけるととても助かります。 よろしくお願いいたします。 添付ファイル : スクリーンショット 2024-01-07 161303.jpg | |||||
| RE: 「コンテンツ上の余白をなくす」機能が欲しいです | 0 関連性 | 1年前 | skillsharejp | ご要望 | |
| 上部のpaddingを消したいページまたはカスタムCSSに書きを追加してください。 .l-content { padding-top: 0; } またpaddingを削除する場合カスタマイザ設定でパンくずリスト表示をページ下部にした方がバランス良いと思います。 | |||||
| 「コンテンツ上の余白をなくす」機能が欲しいです | 0 関連性 | 1年前 | zaw | ご要望 | |
| おせわになっております。「swell設定」に「コンテンツ上の余白をなくす」機能が欲しいです。固定ページに特定のページで「フルワイドブロック」を使って背景を付けたりする場合に、あったら便利とおもい要望を致します。ご検討をお願いします。 | |||||
| RE: ウイジェット－共通サイドバーの余白を調整したい | 0 関連性 | 1年前 | Powan | SWELLに関する質問 | |
| @swell_mania（かんた） さん、アドバイスいただきまして、ありがとうございます。 その方法、まったく思いつきませんでした。すごく参考になりました。 教えていただいた方法で試してみたいと思います。 ありがとうございました。 | |||||
| RE: ウイジェット－共通サイドバーの余白を調整したい | 0 関連性 | 1年前 | かんた | SWELLに関する質問 | |
| バナー画像ごとにウィジェットを分けているようですが、１つにまとめてみたら良いのではと思いました。 1つのブログパーツ内に、全バナー画像を入れて作るイメージです。画像の下部の余白は「ブロック下の余白量」で調整できます。 添付ファイル : padding_bottom.gif | |||||
| ウイジェット－共通サイドバーの余白を調整したい | 0 関連性 | 1年前 | Powan | SWELLに関する質問 | |
| いつもお世話になっております。 こちらで質問する内容ではないかもしれませんが…ご存じの方がいらっしゃたら教えていただけると幸いです。 [外観] → [ウイジェット] → [共通サイドバー]および[共通サイドバー【スマホ版】]に、ブログパーツをセットしてサイドメニューを作成しているのですが、ブログパーツ間の余白が広すぎて見栄えがあまりよくありません。 このブログパーツ間の余白を調整するCSSなどがございましたら、その方法を教えていただけないでしょうか？CSS以外の対処方法でも構いません。また、SWELLの設定でできるようでしたらその方法を教えてください。（自分で調べた限りではSWELLの設定では見つからなかったのですが） よろしくお願いいたします。 | |||||
| RE: メインビジュアル下の余白について | 0 関連性 | 1年前 | totonoi | SWELLに関する質問 | |
| @swell_mania お返事ありがとうございます。 そうさせていただきます。 | |||||
| RE: メインビジュアル下の余白について | 0 関連性 | 1年前 | かんた | SWELLに関する質問 | |
| @totonoi 本トピックは解決済みになっているので、トピ主と環境が異なっているようであれば、別で新しいトピックを立てた方がコメントが付きやすくなるかと思います。 URLが分かれば、出力しているソースコードから何が原因が特定しやすい問題だと思います。共有可能なURLがあればぜひ、記載してみてください。 | |||||
| RE: メインビジュアル下の余白について | 0 関連性 | 1年前 | totonoi | SWELLに関する質問 | |
| こちらを検索して、皆様の解決方法を試しましたが、メインビジュアル動画と固定ページの余白は解消されませんでした。 どこを調べたらよいでしょうか。 アドバイスください。 | |||||
| iPhone13 Proでの表示について | 0 関連性 | 1年前 | UNIxy | SWELLに関する質問 | |
| iPhone13Proの実機でサイトを見た際、 添付画像のように右端に余白ができてしまいます。 PCでの検証ツールや、他の端末では問題なく表示されるのですが、 なにが問題なのでしょう... PCで確認できないため解決方法も思いつかず困っています...。 添付ファイル : imgpsh_mobile_save_anim.jpeg 添付ファイル : imgpsh_mobile_save_anim (1).jpeg | |||||
| RE: メインビジュアルの左に余白をあけ、そこにテキストを入れたい | 0 関連性 | 2年前 | akira0804 | SWELLに関する質問 | |
| @swell_mania さん そのようなアプローチがありましたか。 早速試してみます。ありがとうございました！ | |||||
| RE: メインビジュアルの左に余白をあけ、そこにテキストを入れたい | 0 関連性 | 2年前 | かんた | SWELLに関する質問 | |
| 以下のようなアプローチはどうでしょうか？ カスタマイザーのメインビジュアル機能を使用しない トップページに指定した固定ページの上部にブロックを配置する メディアとテキストブロックとCSSを組み合わせれば、似たようなデザインを作成できると思います。 | |||||
| メインビジュアルの左に余白をあけ、そこにテキストを入れたい | 0 関連性 | 2年前 | akira0804 | SWELLに関する質問 | |
| 添付画像のようにメインビジュアルの左に余白をあけ、そこにテキストを入れたいと考えています。 ・問題解決するために試したこと 以下のcssコードを追加、修正しました。メインビジュアルは問題なく余白をあけ右寄せにすることができましたが、問題ははみ出した部分のテキストが切れてしまい、表示されません。 .p-mainVisual { /* overflow: hidden; */ position: relative; width: 70%; margin-left: auto; } .p-mainVisual__textLayer>.p-blogParts { margin: 1em 0 0; text-align: left; position: absolute; left: -140px; background: red; z-index: 100; } overflow: hiddenもOFFにしてみましたが、変わらずでした。cssの指定でなにか足りない、もしくは追加する必要があるのでしょうか。 ローカルでお客様サイト開発中のため、参考になるURLのご提示ができないため、お答えにくくなってしまい申し訳ありません。 添付ファイル : スクリーンショット 2023-09-12 065045.png | |||||
| RE: 「カスタムHTML」ブロック下の余白を調整したい | 0 関連性 | 2年前 | His- | SWELLに関する質問 | |
| @blanche カスタムHTMLをグループ化すればいけると思いますよ…！ | |||||
| RE: 「カスタムHTML」ブロック下の余白を調整したい | 0 関連性 | 2年前 | blanche | SWELLに関する質問 | |
| @skillsharejp ご教示頂きありがとうございます！ 完全に希望通りにはまだできていないのですが、余白詰めることができました。 | |||||
| RE: 「カスタムHTML」ブロック下の余白を調整したい | 0 関連性 | 2年前 | skillsharejp | SWELLに関する質問 | |
| カスタムHTMLブロックで編集する際に、marginで希望の余白を指定する方法はいかがでしょうか？ | |||||
| 「カスタムHTML」ブロック下の余白を調整したい | 0 関連性 | 2年前 | blanche | SWELLに関する質問 | |
| SWELLでLP作成をしています。 SWELLの「ブロック下の余白量」の調整機能が、思い通りに余白を調整できるので大変重宝しているのですが、「カスタムHTML」のブロックを使用すると「ブロック下の余白量」の調整機能がないため、ブロック下の余白が大きく空いてしまい困っております。 添付ファイル : SWELL.png 特定のブロック下の余白をピンポイントで調整することは可能でしょうか。可能な場合は、ヒントだけでもご教示頂けましたら幸いです。 ※なお「カスタムHTML」のブロックは動画コンテンツを埋め込む際に使用しています。 お手数ですが、どうぞよろしくお願いいたします。 | |||||
| RE: 行間の空白をなくしたい | 0 関連性 | 2年前 | yumiko | SWELLに関する質問 | |
| 了さま ご確認頂きありがとうございます。・ブロック下の余白量で、余白は縮めることができました。確認不足で失礼致しました。 ・ビジュアルエディターでh1を選択せず、 ブロック → 「段落」を選択 → 文字を入力して太字にし、フォントサイズを大きく変更しただけ なのですが、h1になってしまっています。 h1を１つにしたいのですが、ビジュアルエディターでh2を選択すると カラーバーが自動表示されます。（添付ファイル03） 添付ファイル : 03 タイトルの状態.png h1にせず、シンプルで大文字のタイトルを表示する方法を教えて頂けませんか。 | |||||
| XMLサイトマップが作成できない件について | 0 関連性 | 2年前 | yuri | 不具合報告 | |
| はじめまして。素晴らしいテーマの開発をありがとうございます。 XMLサイトマップを作りたくて、「XML Sitemap & Google News」と「XML Sitemap Generator for Google（作者 Auctollo）」の両方を試してみましたが、どちらも作ることができませんでした。 ・「SWELL設定」＞「機能停止」タブから「コアのサイトマップ機能を停止する」のチェックは外しています。 ・SWELLではデフォルト状態でコアのサイトマップ生成機能をオフにされているためか、「XML Sitemap & Google News」と「XML Sitemap Generator for Google（作者 Auctollo）」の両方のプラグインが入っていない状態で、XMLサイトマップを作成してみても、やはりエラーが出てXMLサイトマップが作成されませんでした。 ・色々と検索して試した中で、この記事↓の方法が一番近いかのかなと思いました。 SWELLのテーマファイルエディターからSWELLの子テーマ&「functions.php」を選択し、最終行の余白を消してみました。 ファイルの更新自体は成功したのですが（添付写真で貼り付けています）、再度XMLサイトマップを確認してみても、やはりエラーが出ます。 エラー内容の「This page contains the following errors:error on line 2 at column 6: XML declaration allowed only at the start of the documentBelow is a rendering of the page up to the first error.」 を翻訳してみると「このページには次のエラーが含まれています:行 2、列 6 のエラー: XML 宣言はドキュメントの先頭でのみ許可されます以下は、最初のエラーが発生するまでのページのレンダリングです。」 という意味が出てきたので、XML 宣言はプラグインではなくSWELLのことなので、恐れ入りますがこちらに投稿させて頂きました。 どうすればXMLサイトマップが作成できるようになるのでしょうか？ お忙しい中恐れ入りますが、ご教授頂けますと幸いです。 よろしくお願い申し上げますm(_ _)m 添付ファイル : スクリーンショット 2023-07-05 10.52.15.jpg | |||||