![](https://labodamonde.com/wp-content/uploads/2018/11/labo-1-bikkuri-e1543541665142.png)
フッターのメニューの項目が途中で改行されるのを禁止する方法!
今回は「アフィンガー5」のちょっと気になる点、フッターメニュー部分をカスタマイズしていきます。
![](https://labodamonde.com/wp-content/uploads/2018/11/2-def-1-e1543542161699.png)
フッターメニューの項目が少ない場合は問題ないのですが、多い場合、項目の文字の途中で改行されてしまうことがあります。ちょっと格好が悪いんですね。こんな感じです。
改行されてしまう例
![フッターの項目途中で改行されてしまう](https://labodamonde.com/wp-content/uploads/2019/03/af5-footer-menu-br-01.jpg)
特にブラウザの幅が狭いスマホではコレが起こりがち。この表示を下記のように変更したいと思います!
変更後
![項目全体が改行される](https://labodamonde.com/wp-content/uploads/2019/03/af5-footer-menu-br-02.jpg)
一行に収まりきらない場合、項目途中での改行はせずに、その項目全体が改行されます。項目右側に表示されていたラインは、統一性がなくなってしまい不恰好になるので消すことにしました。
しかし、逆にメニューとしての まとまりがなくなってしまうため、各項目の先頭にアイコンを入れて装飾するタイプも紹介します。
変更後 + 簡易な装飾
![項目の先頭にアイコンを付けて装飾](https://labodamonde.com/wp-content/uploads/2019/03/af5-footer-menu-br-03.jpg)
では、実践してみましょう!
スポンサードリンク
![](http://labodamonde.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif)
コピペでOK!追加CSSで改行禁止に
設定場所
外観 > カスタマイズ > 追加CSS
追加CSSにコピペするCSSは下記の通り。
コピペする部分
- 装飾は要らないけど項目の右横のラインは残したい場合は、1~8行目をコピペ
- 装飾は要らないけど項目の右横のラインは消したい場合は、1~13行目をコピペ
- 右横のラインを消して装飾もしたい場合は、全てをコピペ
![CSSをコピペする場所](https://labodamonde.com/wp-content/uploads/2019/03/af5-footer-menu-br-04.jpg)
装飾用のアイコンフォントを自分で選びたい!
装飾用のフォントは「FontAwesome」を使っています。他のアイコンが良ければ、下のリンク先の中からお好きなものを選ぶことができますよ!
step
1使いたいアイコンをクリック
例えば、asterisk を使いたい場合。
![利用したいアイコンをクリック](https://labodamonde.com/wp-content/uploads/2019/03/af5-footer-menu-br-05.jpg)
step
2アイコンの Unicode をコピー
開いたページに、そのアイコンの詳細情報が載っています。Unicodeは、見本のマークのすぐ下。asterisk の Unicode は「f069」。これをコピーしましょう。
![Unicodeをコピー](https://labodamonde.com/wp-content/uploads/2019/03/af5-footer-menu-br-06.jpg)
step
3CSSの修正
CSSの18行目で、FontAwesomeで利用するアイコンを content:""; で指定しています。なので、この内容を変えてあげます。
修正前 : content:"\f0da";
修正後 : content:"\f069";
バックスラッシュは消さない
この時、バックスラッシュ \
(または¥マークになっている場合もあるかも)は消さないように。これを消すと、文字列として扱われてしまうので、項目の前にアイコンは入りません。代わりに「f069」という文字が入ります。(←逆に言えば、文字列を入れることも可能ということ)
こうなればOK。
![アイコンを変更!](https://labodamonde.com/wp-content/uploads/2019/03/af5-footer-menu-br-07.jpg)
![](https://labodamonde.com/wp-content/uploads/2018/11/2-egao-1-e1543542185714.png)