【SWELLフッターナビメニュー】デフォルトの縦線を消す方法～フッターカスタマイズ～

まずは”ブレイクポイント”を理解しよう

と思う方も多いと思うのですが、簡単に「ブレイクポイント」の説明をします。

今回の場合、スマホ表示ではデフォルトでフッターナビの縦線は表示されません。

これは、デバイスに合わせたデザインを表示させる「レスポンシブデザイン」で、スマホ表示の場合には縦線を表示させないようSWELLのテーマで定義されているからです。

そして、レスポンシブデザインの制作に必要なのが「ブレイクポイント」です。

デバイスごとに表示を切り替えるための基準となる数値で、ブレイクポイントを指定してコーディングをします。

簡単に説明すると、ウェブサイトのレイアウトやデザインを切り替えるための画面幅の区切り値のようなものです。

SWELLの場合、自分で一からコーディングすることはありません。

ただ、「ブレイクポイント」を理解しておくことで、今回のようなデバイスごとの部分的な変更にも対応しやすくなります。

ブレイクポイントの細かい説明はここでは割愛しますが、次のカスタマイズ過程で「ブレイクポイント」という表記が出てくるため、簡単に紹介させていただきました。

ちなみにSWELLのブレイクポイントは「960px」と「600px」です。

ここからは、もう少し詳しく知りたい方向けに…
ブレイクポイントは、あまり細かくたくさんのポイントを設定すると、コーディング含む表示確認が大変になります。一般的には、レスポンシブデザインで制作の場合「パソコン」「タブレット」「スマホ」表示に合わせて1～3箇所で設定する場合が多いです。

制作過程では、デベロッパーツールなどで表示確認をしますが、ブレイクポイント以外の箇所で表示崩れがある場合、必要に応じて部分的にコードを追加すると良いでしょう。

フッターナビのメニュー間縦線を非表示にする

タブレット・パソコン表示の場合に「フッターナビメニューの縦線を消す」というコードを追加していきます。

まずは、コードを記載しておきます。

下記コードを「追加CSS」へ追加することで、タブレット・パソコン表示でも縦線を消すことができます。

@media (min-width: 600px) {
.l-footer__nav li:first-child a,
.l-footer__nav a {
	border-left: 0;
	border-right: 0;
	}
}

追加CSSは、WordPress管理画面の「外観」→「カスタマイズ」からクリックできます。

ここからは、簡単にコードの説明をしておきます。

下記画像は、CSSを追加する前のSWELLのコードです。

変更前は、SWELLのブレイクポイントでもある「600px」以上のデバイスやウィンドウ幅で閲覧した場合、
・メニュー名の右側に線を表示
・1番目のメニュー名のみ左側にも線を表示
と定義されています。
「min-width」が最小値＝600pxという意味になります。

実際に、CSSを追加する前の境界部分を画像で確認するとわかりやすいかと思いますので、下記画像を参考にしてください。

そして、今回は「600px以上の場合も、左右の線を消す＝”0（ゼロ）”にする」というコードを追加しました。

そうすることで、全てのデバイスで縦線が非表示になりました。

変更したい部分のコード確認は「デベロッパーツール」を使用します。

別の部分を変更したい場合などは、ショートカットキーがありますので、参考にしてください。

デベロッパーツールは下記のショートカットキーで開くことができます。
  Windowsでは「F12キー」もしくは「Ctrl + Shift + I（or C）」
  Macでは「⌘command + option + I（or C）」

\ カスタマイズの幅が広がる”SWELL”の機能は公式サイトから確認できます /

【番外編】フッターメニューを縦並びに変更する

今回のテーマは「フッターメニュー間の縦線をなくすこと」ですが、もう少し見やすくカスタマイズしたい…！

という方向けに、メニューを縦並びに変更する方法をお伝えします。

今回はスマホ表示の場合に、下記画像のようにメニューを縦並びへ変更し、中央に寄せたいと思います。

は是非参考にしてください！

先に追加するコードを載せておきます。

追加する場所は、先程と同じ「追加CSS」です。

@media (max-width: 599px) {
.l-footer__nav {
	flex-direction: column;
	align-items: center;
	}
.l-footer__nav li a {
	padding: 1.25em .5em;	
	}
}

CSSには優先順位があります。いろいろと条件があるため詳細は割愛しますが、「追加CSS」に同じセレクタ・同じプロパティで違う値を入力した場合、基本的に後から記入したコードのスタイルが優先されます。

例えば、下記のようにテキストカラーを「青」と「赤」で指定した場合…



後ろにある「赤」が優先されます。



今回紹介した2つのコードはどちらが先でも問題ないですが、すでに同じ部分に別のスタイルをあてている場合は、以前変更した部分が上書きされたり、セレクタによっては変更が反映されなかったりするので注意しましょう。

今回のコードも簡単に説明をしておきます。

SWELLのナビメニューでは「flex」というCSSプロパティを使用しているので、まず現状の横並びから縦並びへ変更しております。（「flex-direction」の部分）

しかし、縦並びへの変更だけだと、上記画像のようにメニューが左寄せになります。

ここからは任意ですが、メニューを中央に寄せたい場合は「align-items」のプロパティも一緒にあててください。

上記で記載したコードは、中央に寄せる前提です。

そして、縦並びにしたことで、メニュー間の余白がもう少しあった方が使いやすいかと思い、既存の「padding」を一部上書きする形で余白調整をしています。

先程は、タブレット・パソコンでの表示変更で「min-width」という最小値を指定しました。
今回は、スマホのみでの表示変更なので「max-width」＝599pxという最大値を指定しています。

どちらの場合もブレイクポイントの数値で切り替えをしましたが、部分的に表示崩れがある場合は、それ以外の数値でも同様のコードを使用することでスタイルをあてることができます。

以上、部分的なカスタマイズですが、参考になれば嬉しいです！

まとめ：SWELLフッターメニューの縦線は「追加CSS」から非表示にできる

最後まで読んでいただきありがとうございます！

今回の記事では

1. ブレイクポイントとは何か？
2. SWELLのフッターナビでメニュー間の縦線を消すコード記述
3. SWELLのフッターメニューをスマホで縦並びへ変更する方法

以上、3点について解説させていただきました！

特に重要なポイントは、以下の3つです。

ホームページ制作などでSWELLを活用したい方の参考になりましたら幸いです。

今後もwebに関する運用情報を発信していく予定ですので、是非ご覧ください！