対象指定リリース(旧「先行リリース」)テナントに徐々に実装されはじめてる SharePoint のメガメニューとフッターですが、 以前にメガメニューを試した記事を書きました。
これから少し時間が経ってしまいましたが、フッターの方を試してみます。
■フッターの設定をしていない状態のコミュニケーションサイト
▼ページ下部に未設定の場合は「モバイルアプリの入手」リンクが
![](https://art-break.net/tech/wp-content/uploads/2019/02/190223_03-600x288.jpg)
では設定してみます。この部分がどのように変わるのでしょうか?
■フッターの設定画面を表示させる
▼歯車メニュー内「外観の変更」をクリック
![](https://art-break.net/tech/wp-content/uploads/2019/02/190223_01-600x288.jpg)
っていうか最近この歯車メニュー内も変わりましたね。ここから Office 365 の設定もできるようになっています。
▼「フッター」をクリック
![](https://art-break.net/tech/wp-content/uploads/2019/02/190223_02-600x290.jpg)
▼ここをクリックすると
![](https://art-break.net/tech/wp-content/uploads/2019/02/190223_04-600x290.jpg)
▼オンになり設定項目が現れます
![](https://art-break.net/tech/wp-content/uploads/2019/02/190223_05-600x290.jpg)
■ロゴの設定
▼ロゴ部分のアップロードから画像を指定します
![](https://art-break.net/tech/wp-content/uploads/2019/02/190223_06.jpg)
▼正方形のロゴをアップロードしたところ
![](https://art-break.net/tech/wp-content/uploads/2019/02/190223_07-600x286.jpg)
矢印の先にありますが、画面左下に小さくロゴが入ります
▼ロゴは正方形でなくてもOKです
![](https://art-break.net/tech/wp-content/uploads/2019/02/190223_08-600x290.jpg)
▼縦長でもOKだけど小さくて見づらいです
![](https://art-break.net/tech/wp-content/uploads/2019/02/190223_09-600x289.jpg)
■フッターの名前
▼フッター名の表示/非表示をオンにするとフッターの名前を指定できます
![](https://art-break.net/tech/wp-content/uploads/2019/02/190223_10.jpg)
▼指定した名前はフッターロゴの右に表示されます
![](https://art-break.net/tech/wp-content/uploads/2019/02/190223_11-600x290.jpg)
■フッターのナビゲーション
▼このリンクをクリックすると
![](https://art-break.net/tech/wp-content/uploads/2019/02/190223_12.jpg)
▼他のナビゲーション設定と同じく左パネルが現れます
![](https://art-break.net/tech/wp-content/uploads/2019/02/190223_13-600x288.jpg)
▼リンクの追加方法も他のナビゲーションと同じ
![](https://art-break.net/tech/wp-content/uploads/2019/02/190223_14.jpg)
▼こんな感じで追加できます
![](https://art-break.net/tech/wp-content/uploads/2019/02/190223_15.jpg)
▼フッターの右にリンクが表示されます
![](https://art-break.net/tech/wp-content/uploads/2019/02/190223_16-600x288.jpg)
▼リンクのオプションには他のナビゲーションと同じく「Header」もあります
![](https://art-break.net/tech/wp-content/uploads/2019/02/190223_17.jpg)
Headerは見出しの事ですね。クリックできないただのテキスト表示です。
▼ただしHeaderにぶら下げられるサブリンクの設定はフッターナビにはなさそうです
![](https://art-break.net/tech/wp-content/uploads/2019/02/190223_18.jpg)
▼複数リンクを設定すると横並びに並びます
![](https://art-break.net/tech/wp-content/uploads/2019/02/190223_19-600x290.jpg)
▼ブラウザの幅を狭めるとこんな感じでちゃんとレスポンシブ対応
![](https://art-break.net/tech/wp-content/uploads/2019/02/190223_20.jpg)
■ただし現時点では困る挙動も確認
フッターのリンクを設定した後に、やっぱリンクを削除したり移動したくなったけど…できない事が判明しました。実際に動きを見てもらった方が良いので、動画にしています。
▼フライアウトしたメニューが勝手に閉じてしまう…
ただし、試行錯誤した結果、正常に移動や削除ができるようになる方法がわかりました。
■解決方法
原因は左右両方のパネルが出ているとこのような挙動になるようです。
▼右パネルを閉じます
![](https://art-break.net/tech/wp-content/uploads/2019/02/190223_21-600x288.jpg)
▼この状態で同じ操作をしてみると…
![](https://art-break.net/tech/wp-content/uploads/2019/02/190223_22-600x288.jpg)
▼動画にしましたが正常に移動・削除ができます
なので、もしナビゲーション設定時に思うような挙動じゃないと思った場合は、右パネルが表示されているかどうか?を確認してみてください。
という感じでフッターの紹介をしました。
ちなみにフッターはリストやライブラリのビューには表示されません。ページ(ニュースも含む)の場合です。
これは使えるかどうかはわかりませんが、トップページへのリンクをフッターナビに配置してみます。
▼トップページへリンクを
![](https://art-break.net/tech/wp-content/uploads/2019/02/190223_23-600x288.jpg)
トップページ参照時にはクリックするとページを再読み込みしてしまいますが、ページの上部へ戻るリンクを作る事が可能です。ただし、別のページやニュースではそのページの上部へ戻らずあくまでもトップページへ戻りますけどね。
また、ロゴ画像をかなり横幅にしてみた場合は、
▼大丈夫!
![](https://art-break.net/tech/wp-content/uploads/2019/02/190223_24-600x290.jpg)
画像の背景色をフッターの色と同じにする事で、ロゴ画像内のテキストを中心に持っていくような事もできますね。
という事でフッターについて触ってみました。色々と便利になってきますけど、サイト作成者は一般的なWebサイト制作を知っているわけではない場合が多く、フッターの利用シーンをなかなか見いだせないのでは?と感じてしまいます。