[ 解決済 ] フッターエリアを2カラムで1:2に分けたい

[ryouga1003]

■ WordPress のバージョン
6.7.1

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

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

■ テーマのバージョン
15.29.4

■ Pro Unit のバージョン
0.29.2

■ スキンの種類
Origin III

■ 期待する動作
フッターを2カラムにして、その幅を1:2に分けたい

■ 自分で試した事
【外観】>【カスタマイズ】>【追加CSS】で

.footer {
display: flex;
width: 100%;
}

.footer-left {
flex: 1; /* 左側が全体の1/3 */
padding: 10px;
}

.footer-right {
flex: 2; /* 右側が全体の2/3 */
padding: 10px;
}
を入力した

■ 症状が発生するブラウザ
Google Chrome

■ 実際の症状
反映されなかった。

■ その他特記事項
初心者の見様見真似のCSS入力で恐縮です。適切な方法をご教授いただきたいです。

[瀬戸内ことり]

例えば１：２に分けることができたとして、スマホではどのように表示させることを想定してますか？

コードを書くとしても、その対応を考えておく必要があるかなと思います。

また、Lightning には CTA という便利機能があるので、そちらをお使いになるのはいかがでしょうか？

[うなこ]

ことりさんのおっしゃる通り、CSSを書く際にはスマホサイズの対応も考慮する必要がありますね。まずは基本的なCSSを理解するところから始めると良いかもしれません。

▼ベクトレ できる！CSSカスタマイズ
https://training.vektor-inc.co.jp/courses/wordpress-customize/lessons/css-customize/

もしノーコードで組みたい場合は、Lightningのデフォルトのフッターではなく「ブロックテンプレートパーツ機能」を使うのがスムーズかと思います。

▼ブロックテンプレートパーツ機能
https://lightning.vektor-inc.co.jp/lightning-g3-pro-unit/block-template-parts/

VKブロックパターンライブラリから、理想に近いフッターのパターンをコピーして貼り付ければ、簡単にカスタマイズできるのではないでしょうか？

例えば、こちらのパターンはいかがでしょうか？
カラムブロックで、ロゴのある左側が33%、コンタクト部分の右側が66%になっています。
https://patterns.vektor-inc.co.jp/vk-patterns/20924/

[ryouga1003]

ご教示いただきありがとうございます。
フッターに
①「施設情報（住所等）」
②HTMLサイトマップ
を設置したいと考えておりました。

①はPCでの全画面の1/3程度で収まるのに対し、②は２列に分かれてしまうので、1：2に分けたいと思いました。
スマホでは3カラムで設置したときのように縦に配列されればよいかなと思います。

うなこ様にご教示いただきましたブロックテンプレートパーツでの作成を試みてみます。
ありがとうございます。

[投稿者]

投稿