WordPressテーマSANGOの質問

フッターウィジェットの位置及びサイズの調整

アバター
田中

フッターウィジェット左、中央、右の3つのエリアが用意されておりますが、2つしか使用しない場合は768px以上の画面だと左にコンテンツが寄って表示されてしまい収まりが悪いです。
なのでウィジェットを中央寄せに表示したいのですが可能でしょうか?
またウィジェット一つ一つの横幅のカスタマイズもできればありがたいのですが可能でしょうか?
ご教授の程、よろしくお願いいたします。

SANGO
質問板アーカイブ
コメントへの回答
サルワカくん
サルワカくん
2019/09/20

フッターウィジェット(左)だけを使用し、(中)と(右)は空にしたうえで、
以下のCSSをダッシュボードの[外観]⇒[カスタマイズ]⇒[追加CSS]に貼り付けると良いかと思います。

@media only screen and (min-width: 768px) {
  .fblock.first {
    width: 600px; /* PC画面での幅 */
    max-width: 100%;
    display: block;
    float: none;
    margin: 0 auto;/*中央寄せ*/
  }
}

よろしくお願いします。

アバター
田中
2019/09/21

素早いご対応ありがとうございます。
しかしながら、お答えいただいた方法だとウィジェットが1つしか使用できず、2つを同列に並べることができません。
PC画面ではウィジェットの左に営業時間、右にマップを表示し、スマートフォンなどの端末では1づつ分割させてフロートさせて表示したいのですが。
こういった使い方を想定した表示に対応可能でしたら再度、質問お願いします。

サルワカくん
サルワカくん
2019/09/21

「ウィジェット1つ」と読み違えておりました。失礼いたしました。さきほどのCSSはフッターウィジェットを1つだけ中央寄せするものです。

フッターウィジェットを2つだけ使っており、PC表示でそれぞれのウィジェットを左右の隅に寄せたい場合は以下のようにします。

①フッターウィジェットの(左)と(右)だけを有効化
②以下のCSSを追加

@media only screen and (min-width: 768px) {
  .inner-footer {
    display: flex;
    justify-content: space-between;
  }
  .inner-footer:before, .inner-footer:after {
    content: none;  
  }
  .fblock {
    display: none;
  }
  .fblock.first, .fblock.last {
    display: block;
    margin: 0;
    width: 350px; /* それぞれのウィジェットの幅 */
    max-width: 48%; /* はみ出ないように */
    float: none;
  }
}

「スマートフォンなどの端末では1づつ分割させてフロートさせて表示したいのですが」
この部分が恐縮ながら分からなかったのですが「768px以下では2つのウィジェットは縦に並ぶ」というのがSANGOの挙動になります
(2列にすると幅が小さくなりすぎてしまい、各ウィジェットのスタイルが崩れる可能性があるため、変更は推奨しておりません)。
よろしくお願いします。

アバター
田中
2019/09/24

希望通りのレイアウトにすることができました、ありがとうございます。
教えていただいたCSSのinner-footerにmax-widthを追加することで画面表示的には中央寄せすることができました。
フロート云々は768px以下ではおっしゃるとおりの元の挙動を崩すことなく縦に並ばせたいが、CSSだけの変更だと1つならともかく2つのウィジェットを中央寄せするのは無理で、実装すると他の画面サイズで挙動が変わってしまうのだろうかという要らぬ心配から追記したものでしたすいません。
また、不明点がありましたら、よろしくお願いいたします。

サルワカくん
サルワカくん
2019/09/24

あ、そういうことですね!
うまくいったようで良かったです!
ご報告、ありがとうございました。