【簡単3分】Studioでフッターを固定する方法
Webサイトを制作する時に、「フッターを常に画面下部に表示したい」と考える方は多くいます。
特に「お問い合わせ」や「メニュー」を固定表示することで、ユーザー行動を促しやすかったり、回遊率が高まるなどのメリットがあります。
そこで今回は、Studioでフッターを固定する方法を紹介します。初心者でも3分でできる内容になっているので、ぜひこの機会に実装していってください。
「Studioの使い方がまだイマイチわかっていない、、、」という方は、以下のマニュアルも参考にしてみてください。
Service
【最安15万円〜】
全てセット料金のホームページ制作サービス
サイト企画〜公開まですべてセット料金になっており、「余計な料金は一切いただかない」というのをモットーにしています。
最安15万円〜からホームページが作れて、すべてオリジナルデザインで制作可能です。また自社管理できる「Studio」というツールを用いているので、プランによっては維持費0円で運営できます。
期間限定で制作費用の3万円割引キャンペーンもやっていますので、ぜひお気軽にご相談ください！
Studioでフッターを固定する方法
Studioでフッターを固定する方法は、下記のとおりです。
それぞれ具体的に説明します。
Kaji基本的には①の方法がおすすめです！
配置を「固定」にする
| 項目 | 内容 |
|---|---|
| 対象プラン | すべてのプラン |
| 難易度 | （簡単） |
| おすすめ度 | （1番おすすめ） |
Studioは標準機能として、「配置」の設定ができるようになっています。
Kaji有料プランはもちろん、無料プランでも配置設定は可能です！
1番簡単にできる、かつ無料プランでも実装可能なので、基本的にはこのやり方でフッターを固定するのがおすすめです。
下記のようにStudioのデザインエディタから設定することができ、コードを入力する必要もないため、非エンジニアの方でも問題なく実装できます。
カスタムコードで位置調整する
| 項目 | 内容 |
|---|---|
| 対象プラン | 有料プラン（Miniプラン以上） |
| 難易度 | （少し難しい） |
| おすすめ度 | （おすすめできない） |
またStudioのカスタムコード機能を用いて、フッターを固定することも可能です。
マイナーなやり方なので、ここでは簡易的にやり方を紹介しておきます。
- フッターを作成する
- カスタムコード欄にCSSを貼り付ける
- サイトを更新する（公開してないとカスタムコードが反映されないため）
貼り付けるCSSに関しては、サンプルコードを載せておきます。コードの内容はサンプルコードであるため、各自でカスタマイズしてください。
.footer {
position: fixed;
bottom: 0;
width: 100%;
z-index: 10;
}カスタムコードの詳しい使い方に関しては、以下の記事でまとめています。
Studioでフッターを固定する手順
Studioでフッターを固定する手順は、下記のとおりです。
それぞれの手順について、画像を用いて詳しく説明します。
フッターを好みにデザインして、Studioで作成します。
フッターが常に表示されるようにするため、フッターを選択した状態で、「重ね順」を1以上で設定します。
フッターを選択した状態で、配置を「固定」に変更します。
画面下側にフッターを固定したい場合は、画面の1番下までスクロールして、フッターを設置します。
Studioでのサイト制作は「Terace」にお任せ！
当メディアを運営する私達は、Studioの制作代行サービス「ラク子」を運営しています。
Kaji「デザイナー」と「フロントエンジニア」のフリーランス3名で運営しています！
- ポッキリ価格でホームページを制作できる
- 専属デザイナーが完全オリジナルのデザイン作成
- 納品後1ヶ月間は無料の電話サポートあり
- 自社更新できるホームページが作れる
- ホームページ制作期間中は何度でも無料相談できる
- 顔の出ているフリーランス3人が運営
- 維持費0円でホームページを運営できる
料金プランは、以下の通りです。
ポッキリ価格でホームページが作れるサービスであり、個人事業主や中小企業からよく選ばれています。サービス利用者の声を聞きたい方は、ぜひ以下のインタビュー記事をご覧ください。
今だけ、毎月3組まで制作費用が3万円割引になるキャンペーンを行っています。
先着順で締め切るので、気になる方はぜひお早めにお問い合わせください！
ebook
【無料のお役立ち資料】
初ホームページ制作のよくある質問集
ホームページ制作に関するよくある質問14選にすべて答えています。
「自作するべきなのか」か「Web制作会社に任せるべきか」など、これまでホームページ制作をやっていく中で1番よく受けた質問を厳選しています。
無料でダウンロードできるので、これからホームページを作成する予定の方はぜひ参考にしてみてください！
