[miyuki]

いつもお世話になっております。

 

【お使いの Snow Monkey のバージョン】 16.5.2
【お使いの Snow Monkey Blocks のバージョン】 15.0.6|
【お使いの Snow Monkey Editor のバージョン】 7.0.1
【お使いのブラウザ】Google Chrome

### 実現したいこと

フッターに画像のようにメニューの左に文字を挿入したい

### 発生している問題

メニューのフッターナビゲーションで、メニューを挿入することはできました。

画像のように左側にアクセス情報を入れたいです。

### 試したこと

メニューのフッターナビゲーションをいろいろいじったり、カスタマイズ→デザイン→フッターの部分を触っていますが、たどり着けません。「スノーモンキー、フッターにメニューを入れる方法」でぐぐっても答えにたどり着かず、御相談させて頂きました。

よろしくお願い致します。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

まずフッターレイアウトを「フッター2」か「フッター3」にしてみてください。それでフッター上部にロゴ、その下部にウィジェットエリアというレイアウトにできます。

フッター

カスタマイザー → デザイン → フッターから設定できます。 フッターレイアウト フッターレイアウトを設定でき…

snow-monkey.2inc.org

そして、住所や電話番号の部分はテキストウィジェット（ブロックの場合は段落ブロック）、メニューの部分は挿入できているということなのでそのままで良いと思います。

♥ 0

いいねをした人: 居ません

[miyuki]

ありがとうございます！

今、添付資料のようになりました。

横並びにするためには、メニュー部分を別に作成しないで、テキストウィジェットにメニューも段落で挿入するといいのでしょうか。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

あ、ナビゲーションは「フッターサブナビゲーション」に割り当てて表示されているんですかね。だとしたらそれは割当をはずしていただいて、ナビゲーションメニューウィジェットを挿入してみてください。

♥ 0

いいねをした人: 居ません

[miyuki]

お世話になっております。

完成に近づいてまいりました。

メニューを横並びにする方法なのですが、追加CSSでここのメニューに値するクラス名に「display: flex;」をあてたらいいのでしょうか。クラス名がなかなか当てはまらず苦戦しております。

また、完成図のように、メニューの下に更に下線があり、その右下にコピーライトを載せる場合は、こちらも追加CSSで可能でしょうか。

初心者質問で申し訳ございません。参考書と片手に触っているのですが、なかなかうまくできずです。

よろしくお願い致します。

♥ 0

いいねをした人: 居ません

[miyuki]

こちらが完成版です。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

URL を共有してもらうことはできますか？
そのほうがこちらも実際に CSS を書きながら試せるので。

♥ 0

いいねをした人: 居ません

[miyuki]

ありがとうございます。

こちらがURLとなります。

よろしくお願いいたします。

会社概要 – rogo

会社概要 社名 株式会社三徹 所在地 〒XXX-XXXX沖縄県〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇 TE

go-to-world-cup2022.com

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

書いてみました。

.l-footer--footer-2 .l-footer__footer {
    background-color: transparent;
}
.l-footer--footer-2 .l-footer__footer .c-row__col--lg-fit {
    flex-grow: 1;
}
.l-footer--footer-2 .l-footer__footer .l-footer__copyright {
    display: flex;
    justify-content: flex-end;
}
.l-footer--footer-2 .l-footer-widget-area__item:last-child {
    max-width: none;
    flex: 1 1 auto;
}
.l-footer--footer-2 .l-footer-widget-area__item:last-child .menu {
    display: flex;
    flex-wrap: wrap;
}
.l-footer--footer-2 .l-footer-widget-area__item:last-child .menu > * {
    margin-top: 0;
    margin-right: 1em;
}

CSS での上書きが増えると、テーマのアップデート時に HTML 構造や CSS が変わってしまったときは崩れたりする可能性が大きくなります。それを避けたい場合はフッターテンプレートパーツ自体を上書きしてオリジナルのフッターテンプレートパーツをつくるとか、デザイン案よりも Snow Monkey のレイアウトを優先する、などの配慮が必要になると思います。

♥ 0

いいねをした人: 居ません

[miyuki]

ありがとうございます！

これだけのCSSが必要となるのですね。どれがどのクラス名で機能するのかすごく勉強になります。

バージョンアップすることで崩れる可能性があるとのことですが、おおよそどの程度まではCSSは崩れないといった目安はあるのでしょうか。
結構今までもいじっているので、崩れてしまう可能性があることを視野に入れないといけないですよね。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

目安をはっきり示すのは難しいですが、一応アップデートのたびに更新情報を書いているのでそれでなんもなく想像してもらえるかなというのと、ガッツリ上書きが必要そうなところは僕ならテンプレートパーツを上書き（自分で HTML をつくる）かなと思います。この辺は個人で判断が変わってくるところだと思うので色々試してみてしっくりくるのを見つけるのが良いのかなと思います。

♥ 0

いいねをした人: 居ません

[miyuki]

大変勉強になりました。

ありがとうございました！

♥ 1

いいねをした人:

[投稿者]

投稿