>> はじめての格安SIM!BIGLOBEモバイルを6ヵ月使ってみた!

【Cocoon】スマホ表示時のフッターボタンをオリジナルアイコンに変更

Advertisement

先日、Cocoonテーマに追加された「モバイルフッターメニュー」のカスタマイズ機能。
この「モバイルフッターメニュー」をカスタマイズして、オリジナルアイコンに変更する方法を紹介します。

実装される日を待っていた

ワードプレスのテーマをCocoonにして、カスタマイズしてる時に思ったのがスマホ表示時のフッターメニューのアイコンの変更
それもオリジナルのマークとかにできないかなーと思ってたんです。

無理やりテーマをいじればできますが、なるべく強引な事はしたくない。。

そんな事を思っては忘れかけた頃、この機能の追加によって、スマホ表示時のフッターメニューのカスタマイズ性がグーーンと上がりました!

Cocoon 1.7.8公開。モバイルフッターメニューの実装。
Cocoon 1.7.8のアップデート情報。モバイル用のメニューを自由にカスタマイズ出来るようにしました。

無料のテーマなのに、本当にいつもありがとうございます。

まずはクラス付与

ワードプレスの設定画面より「外観」→「メニュー」を開きます。

上部の表示オプションを開き、「CSSクラス」にチェックを入れます。

ワードプレス管理画面のメニュー編集画面でクラスの付与場所説明図

フッターモバイルメニューにしたいメニューを選ぶか作成します。
メニューを選ぶか作成したら、忘れずにメニュー下部の「メニュー設定」箇所の「フッターモバイルメニュー」にチェックを入れ保存してください。

フッターモバイルメニュー選択項目図

上記までがフッターモバイルメニューの設定です。
次が、メニュー内の各項目の中にクラスを付与するオプションが表示されるので、任意のメニューにクラスを入力して保存してください。
表示されてない場合は、表示オプションを再度確認してください。

フッターモバイルメニュー、クラス付与設定

任意のメニューにクラスを入力して保存で完了です。

Cocoon公式でも詳しく設定方法が記載されています。

モバイルフッターメニューの設定方法
スマホ画面のフッターに表示されるスライドインメニューボタンのカスタマイズ方法の解説です。

CSSの追加

アイコンをどのタイプで表示させるかによって方法が変わります。
大きく分けて、「画像」と「アイコンフォント」です。

アイコンフォントの場合、フォントの登録・作成が必要なので、まぁまぁ面倒です。
フッターメニューだけに利用するなら画像の方が良いかもしれません。

画像でアイコン表示

子テーマファイル内でも、メディアでも任意の場所にアイコン画像をアップロードします。
以下のcssのクラス名とアイコン画像のURLを変更して、cssファイルに追記してください。

CSS
/* .icon-higaのところを任意のクラスに変更 */
.mobile-menu-buttons .menu-icon.icon-higa::before{
    content: '';
    width: 100%;
    height: 1em;
     /* icon.pngの画像を任意のURLに変更 */ 
    background: url('icon.png') no-repeat center / contain;
    display: block;
}

アイコンフォントでアイコン表示

アイコンフォントの場合、すでにSVGで制作されたアイコンファイルをお持ちであれば、IcoMoon等のサイト・ツールでWEBフォントを登録して生成するだけなので、そんなに手間ではないかもしれません。

Webアイコンフォントの作り方 - ②アイコンをWebアイコンフォントに変換する - Qiita
この記事では、Webアイコンフォントを作るための3つの工程、 1. (

ですが、SVGがない場合はSVGファイルをillustratorなどの画像編集ソフトで作らなくてはいけません。

Webアイコンフォントの作り方 - ①ベクターツールでアイコンを作る - Qiita
Webアイコンフォントとは、サイト上で使われるアイコンをWebフォントとして利用できるようにしたものです。 レスポンシブサイトのアイコンなどに利用されることが多く、 PCでもスマホでも劣化することなく表示することができます。 ※W...

WEBフォントに変更できたら、後はCSSを編集するだけ。

CSS
/* アイコンフォントの指定、作成したフォントを読み込ませてください */ 
@font-face {
    font-family: 'icon';
    src:
    url('icon/icon.ttf') format('truetype'),
    url('icon/icon.woff') format('woff'),
    url('icon/icon.svg') format('svg');
} 
/* .icon-higaのところを任意のクラスに変更、各font-family、contentを任意の内容に変更 */
.mobile-menu-buttons .menu-icon.icon-higa::before{ 
    font-family: 'icon';
    content: '\e902';
     /* 以下サイズを調整。なくてもOK */ 
    font-size:.8em;
}

モバイルフッターメニューカスタマイズまとめ

以下、当ブログ(東田ダダーン)で使ってるカスタマイズ内容の画像です。

スマホ通常フッターメニュー

東田ダダーン、スマホフッターメニュー

スマホAMPページフッターメニュー

左から2つめにニューバランスもどきな当ブログのロゴを挿入しました。
AMPページは基本、ノーカスタマイズの「どデフォルト」なので、今回のアイコンフォントと関係ありませんが、この際にボインレーにしました。

アイコンフォントの場合はホバー時のデザイン(色を反転させる等)をカスタマイズできるので、こだわりが強い方はアイコンフォントの方が良いかもしれませんが、ページの速度的にも悩ましいところがあるので、よく考えてカスタマイズする必要があります。

個人的に、スマホでCocoonテーマを使ってる他のブログを見た時、一番フッター箇所が「被ってるなぁ」と感じてたんです。
「この人もCocoon使ってるのか」と、オリジナリティに欠けてしまうなぁと思ってたんです。
せめて自分のロゴとか置けたらなぁと思っていました。

それが、 フッターモバイルメニューの機能追加で簡単にカスタマイズできるようになり、かなり便利になったと思います。
気になった人は、ぜひ試してみてください。

Advertisement
WordPress
東田ダダーンをフォローする
このブログを購読する
当ブログから更新通知を受けてもいいという方はリンクより更新通知の許可をしてください。 東田ダダーンが更新された際、更新した旨、通知されます。
東田ダダーン

コメント

タイトルとURLをコピーしました