【コピペでOK】フッターのメニューが格好悪く改行されてしまうのを防ぐ方法 ／ アフィンガー5 のカスタマイズ

クマ

WordPressテーマ「アフィンガー5」のカスタマイズ その4！

フッターのメニューの項目が途中で改行されるのを禁止する方法！

今回は「アフィンガー5」のちょっと気になる点、フッターメニュー部分をカスタマイズしていきます。

ぽん

と言いますと？

フッターメニューの項目が少ない場合は問題ないのですが、多い場合、項目の文字の途中で改行されてしまうことがあります。ちょっと格好が悪いんですね。こんな感じです。

特にブラウザの幅が狭いスマホではコレが起こりがち。この表示を下記のように変更したいと思います！

一行に収まりきらない場合、項目途中での改行はせずに、その項目全体が改行されます。項目右側に表示されていたラインは、統一性がなくなってしまい不恰好になるので消すことにしました。

しかし、逆にメニューとしての まとまりがなくなってしまうため、各項目の先頭にアイコンを入れて装飾するタイプも紹介します。

では、実践してみましょう！

コピペでOK！追加CSSで改行禁止に

追加CSSにコピペするCSSは下記の通り。

コピペする部分

装飾用のアイコンフォントを自分で選びたい！

装飾用のフォントは「FontAwesome」を使っています。他のアイコンが良ければ、下のリンク先の中からお好きなものを選ぶことができますよ！

step
1使いたいアイコンをクリック

例えば、asterisk を使いたい場合。

step
2アイコンの Unicode をコピー

開いたページに、そのアイコンの詳細情報が載っています。Unicodeは、見本のマークのすぐ下。asterisk の Unicode は「f069」。これをコピーしましょう。

step
3CSSの修正

CSSの18行目で、FontAwesomeで利用するアイコンを content:""; で指定しています。なので、この内容を変えてあげます。

修正前 ： content:"\f0da";

修正後 ： content:"\f069";

バックスラッシュは消さない

この時、バックスラッシュ \（または¥マークになっている場合もあるかも）は消さないように。これを消すと、文字列として扱われてしまうので、項目の前にアイコンは入りません。代わりに「f069」という文字が入ります。（←逆に言えば、文字列を入れることも可能ということ）

こうなればOK。

ぽん

以上で解説を終わります。お疲れ様でした！