Cocoon_フッターモバイルボタンの作成_1

たとえば、ブログをスマホで見ると、次のように画面下にメニューが表示されています。

これは、WordPressのメニューから
Cocoon設定→Cocoon設定
と進んで、モバイルをクリック。

ここで、フッターモバイルボタンのところにチェックが入ってると表示されます。

ちなみに、同じ画面下にスクロールして、モバイルボタン時コンテンツ下のサイドバーを表示にチェックを入れてあげると良いです。

このようにすると、スマホで見たとき記事の下にサイドバーの内容が表示されるので、訪問者がサイトを回遊しやすくなります。

フッターモバイルボタンの編集

この、スマホで見たときの画面下のメニュー（フッターモバイルボタン）を編集したいと思います。

デフォルトでは次のようになっていますが

これを、次のように変更してみました。

右から２つめ、ランキングというのは、アクセスランキングです。
一番右のアプリというのは実はアフィリエイトリンクが仕込んであります(笑)
「やり過ぎかな？」と思ったんですが、やっちゃいました。

このメニューを作っていく方法について説明していきます。

メニュー作成の準備

WordPressのメニューから
外観→メニュー
と進みます。

まず、画面右上の表示オプションをクリック

次のような画面が出てきますから、CSS クラス のところにチェックを入れておいて下さい。

次の画面は、既に作成済みのメニューがある場合と、作成済みのメニューがない場合で表示が異なります。

既に作成済みのメニューがあるとき

出会い系アフィリエイト開業パックの比較サイトの場合は既に作成済みのメニューがあります。
次のような画面になったら
新しいメニューを作成
をクリックして下さい。

既に作成済みのメニューがないとき

作成済みのメニューがないときはそのまま次の項目「メニューの作成」に進んで下さい。

もちろん自分で作ったばかりのブログとかだったら、作成済みのメニューなどないと思います。
アダルトアフィリエイト開業パックの代行作成で作ってもらったブログも、メニューの作成はやっていません。

メニューの作成

次のような画面になっていると思いますので、
メニュー名を適当に入れてメニューを作成をクリック。

ここで決めたメニューの名前はサイト上でどこにも表示されないので何でもいいです。

ホームボタンの作成

新しく作ったメニューにも、ホームボタンを設置していきます。

画面左にカスタム項目を追加というメニューがありますから、カスタムリンクをクリック。

次のような設定画面が開きますから
URLには、#home と入力
リンク文字列には、ホーム と入力

次に、画像の設定です。

ここまでの作業で、ホームというメニューが作成されていますから
右の▼をクリック。

次の画面で、CSS class(オプション) というのが、画像を設定する項目になります。

画像は下のサイトから選びます。
こちらから（別タブで開きます）



本当は英語のサイトが元にあるのですが、上記はそれを分かりやすくまとめてくれているサイトになります。

アイコンがたくさんあって探すのが大変なので、検索窓にhomeと入れて検索してみます。



ここで、homeのところにマウスを持っていってクリックすると、その画像を表示させるコードがクリップボードにコピーされます。



WordPressに戻って、CSS class のところに
fa と入れて、半角スペースを入れて、さっきコピーしたコードを貼り付けます。
下のようになればOKです。

ここまで設定したら、メニューを保存をクリック。

これで、Homeボタンの設置が完了です。

検索ボタンの作成

作り方は、ホームボタンのときと同様です。

カスタムリンクから、次のように設定して



検索というメニューが出来たら、右側の▼をクリック



次のようにすればOKです。

SNSフォローボタン

あとは同じなので設定内容を紹介するだけにしますが、
真ん中のSNSフォローボタンは次のように設定しています。

画像は、赤枠のところをクリックしてそこから探しました。

ランキングボタン

URLのところは、そのままランキングURLを貼り付け。

画像は、最初「ランキング」で検索したのですが見つからなかったので
次に「ソート」で検索。いくつか出てきたのでそこから選びました。

アプリ

URLはアフィリエイトリンクそのまま貼り付けです。

画像は「スマホ」で検索しました。

その結果が次のボタンです。

実際に見て確認したい方はこちら
（スマホでアクセスして下さい）