[ 解決済 ] カラム自体をセンター揃えしたい

VWSとは フォーラム Lightning [ 解決済 ] カラム自体をセンター揃えしたい

[ 解決済 ] カラム自体をセンター揃えしたい

  • このトピックには4件の返信、2人の参加者があり、最後にsozoにより6ヶ月、 4週前に更新されました。
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    投稿
  • #79891

    sozo
    参加者

    ■ WordPress のバージョン
    6.3.1

    ■ テーマ・プラグインは全て最新版で確認してください。
    確認しました。

    ■ テーマの種類
    Lightning ( G3 ) + Lightning G3 Pro Unit

    ■ テーマのバージョン
    15.9.5

    ■ Pro Unit のバージョン
    0.25.1

    ■ スキンの種類
    プレーン

    ■ 期待する動作
    プロの方には、すごく初歩的なご質問かと思いますが、怒らずにどうかご教授ください。
    現在、素人ながらLPを制作しております(現在テストサイトです)。
    PCにてサイトをご覧になっていただければおわかりかと思いますが、要素は画像化(960px)してセンター揃えで配置しております(サイト全体の幅より小さくしてあります)。
    ただ、お客様からの要望でYouTubeの埋め込みと、あとでお客様で修正できるように商品価格を入れなくてはいけなくなりました。
    そこで1カラムで背景を白指定し、他の画像化した要素同様にカラム自体をセンター配置、そこへYouTubeの埋め込みなどをすれば良いと思い作業しました。
    ですがカラム幅を960pxにすることはできるのですが、カラムを全体のセンター合わせ指定するところが無く、左合わせになってしまいます(おそらくカラムの使い方間違ってますよね…)。
    ですので3カラムにしてセンターのカラムにYouTubeなどを配置して(左右カラムは空白)カラム幅を調整してみました。
    PCとスマホは見た目大丈夫なのですが、タブレットで表示すると、左右のカラム分上下にスペースが空いてしまいました(タブレットの画面サイズにより表示のされ方が違いました)。「モバイルでは縦に並べる」チェックをはずすと今度は左右のカラム分左右が小さくなってしまいます。
    1カラムでカラム自体をセンター合わせできれば対処できると思うのですが、こちらの対処法、または他に方法がございましたら、お教えくださいませ。
    長文すみません。
    どうぞよろしくお願いいたします。

    ■ 自分で試した事
    どうすればよいかわかりません。

    ■ 症状が発生するブラウザ
    タブレットのクローム

    ■ 実際の症状
    タブレットで表示すると、左右のカラム分上下にスペースが空いてしまう。


    該当URL : https://*********

    ※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

    #79894

    うなこ
    モデレーター

    VK Blocks Proをご利用のようですので、カスタムCSSをかいてカスタマイズする方法はいかがでしょうか。

    外側のカラムブロックは削除して、埋め込みのYoutubeの「カスタムCSS」部分に以下のCSSを追加すると中央に寄るのではないかなと思います。
    max-width は最大の幅を入れます。
    意図と違っている場合はお知らせください。

    selector iframe{
      margin: 0 auto;
      max-width: 830px;
    }
    Attachments:
    You must be logged in to view attached files.
    #79898

    sozo
    参加者

    うなこさま、ありがとうございます。
    あまりにも初歩的すぎて質問がわかりにくいですよね。すみません。
    プレビュー機能で今の状況が再現できましたので画像を添付いたしました。
    赤いカッコ部分(白くない部分)がなくなれば嬉しいです。
    たしかにご教授の通りcssを記述しますとYoutubeはセンター配置となりましたが(Youtubeの左右が欠けてしましました)、960px幅の白い背景の上にYoutubeなりの素材を配置させたいのが希望です。
    現状の機能だけでは難しいでしょうか?
    よろしくお願いいたします。
    ※それかタブレットでもPCと同じ表示になるようにしてしまうのがカンタンでしょうか。それでもかまいません。

    Attachments:
    You must be logged in to view attached files.
    #79903

    うなこ
    モデレーター

    画像ありがとうございます!理解しました!

    不要な左右のカラムを、非表示設定機能で、画面サイズで非表示にするのが一番楽だと思います。

    ▼VK Blocks ブロック非表示機能紹介

    #79913

    sozo
    参加者

    うなこさま、おかげさまで変なスペースがなくなりました。
    ライトニングは本当に多機能で、素人の私でもホームページが作れてしまうので感謝でいっぱいです。
    基本的な使い方がわからない当方に、親切にご指導いただきありがとうございました。
    これで解決済みとさせていただきます。

5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • このトピックに返信するにはログインが必要です。