ブログ初心者にもわかりやすく解説。Cocoon:デザイン編】モバイルフッターをかわいくしよう!アイコン付きメニューボタンの作り方。グローバル(カテゴリー)メニュー・シェアボタンの追加方法。Cocoon】モバイルフッターをかわいくしよう!アイコン付きメニューボタンの作り方。グローバル(カテゴリー)メニュー・シェアボタンの追加方法。2021.04.28皆さんこんにちは、はつまいです。前回の記事で無事にフッターを設置できました。Cocoon】モバイルフッターをかわいくしよう!アイコン付きメニューの作り方まで。グローバル(カテゴリー)メニュー・シェアボタンの追加方法。方でも絶対にわかるフッターの設定方法を解説!まずは基本のフッターの作り方。画像付きで誰でもわかります。アイコン付きメニューの作り方やグローバルメニュー・シェアボタンの追加方法については次の記事で詳細を解説しています。hatumai.com2021.04.28そこで今回は「モバイルフッターを可愛くしよう!第2弾!」としてグローバルメニュー&シェアボタンの追加方法アイコン付きフッターの作り方を1つ1つ丁寧に解説していきます。このブログでは超初心者の方が読んでも設定ができるように工程を飛ばさず解説していますので、中上級者の方は不要な箇所は飛ばして読み進めてみてください。設定前に...グローバルメニュー&シェアボタンの追加URLコマンド一覧アイコンの設定まとめスポンサーリンク設定前に...これらの設定の前に「CSSクラス」を有効にする必要があります。選択し、「CSSクラス」にチェックを入れます。メニューを開いてもこんな画面出てこないよ!どこにあるの?と思った方(はつまいもそうでした。笑)!ご安心ください。右上の部分に小さく折りたたんであります。ここをクリックすると上の画面が出てきますので、CSSクラスにチェックを入れましょう。グローバルメニュー&シェアボタンの追加CSSクラスを有効にしたら、グローバルメニューとシェアボタンをフッターに追加していきます。URLコマンドと言って、カスタムリンクのURL先にコマンドを入力すると簡単に設定できる方法がありますので、今回はこちらを使用します。URLに「#menu」、リンク文字列はアイコン下に表示させたい文字を入力します。※ハッシュタグは全角だとエラーになってしまうので半角で入れるようにしましょう。これでグローバルメニューの追加が終わりました!とても簡単ですね!この勢いで続けてシェアボタンの追加です。シェアボタンのコマンドは「#share」なので同じようにコマンドを入れていきます。シェアメニューに追加したら右下の「メニューを保存」で更新することを忘れないようにしましょう。ここまでで実際のモバイル画面がどうなっているか?じゃじゃーん!アイコンを自分で設定しなくても、コマンド入力をすると勝手にそれらしい表示になっています!URLコマンド一覧グローバルメニュー・シェアボタンの他にも使用できるコマンドがあります。先にも述べましたがハッシュタグは半角で入力するようにしましょう。次にアイコンの設定を行います。コマンド入力したボタンはそれらしいアイコンになりましたが、TOP、プロフィール、お問い合わせは★マークのままなのでこちらを変更します。いうサイトから自身が好きなアイコンを選びます。frameworkfontawesome.com例えばトップサイトに戻るための「TOP」ボタンにこの「home」のアイコンを選んだとします。