\ポムミーの代わりはペライチ/

12月末でポムミーのサービスが終了します!

乗り換えがまだの方はペライチで無料作成
ブログクエスト カテゴリから記事を探す

Cocoonのフッターモバイルボタンをカスタマイズする方法

Cocoonでフッターモバイルボタンをカスタマイズする方法 ブログデザイン
Cocoonでフッターモバイルボタンをカスタマイズする方法
この記事は約5分で読めます。

この記事では、Cocoonのフッターモバイルボタンをカスタマイズする方法をご紹介いたします。

サイトが育ってくると、デフォルトのフッターモバイルボタンじゃ物足りなくなってきますよね。

Twitterのボタンや自分のサイトならではのオリジナルページに飛ばしたい!

そんな悩みを解決するために、Cocoonの設定でフッターモバイルボタンをカスタマイズする方法をご紹介いたします。

Cocoonの設定なので、難しいcssをカスタマイズする必要もありませんよ。

Cocoonでフッターモバイルボタンをカスタマイズする
クリックすると拡大
スポンサーリンク

Cocoonのフッターモバイルボタンをカスタマイズする方法

手順は以下の通りです。

① メニューを新規作成する

② Cocoon既存コマンドでカスタマイズ

③ Font Awesome4.7 を使用してカスタマイズする

step①:CSSを有効化する&メニューを新規作成する

ダッシュボード> 外観メニュー をクリックしてください。

Cocoonでフッターモバイルボタンをカスタマイズする
クリックすると拡大します


右上の 表示オプション をクリックすると、詳細メニュー設定を表示が出てくるのでcssに✅を入れておいてください。

次に新規メニューを作成しましょう。

Cocoonでフッターモバイルメニュー、モバイルボタンをカスタマイズする
クリックすると拡大します


新しいメニューを作成しましょう をクリックして新しくメニューを作成して、メニュー名を入れて下さい。(私はフッターモバイルボタンという名前にしています。)

step②:Cocoonの既存コマンドでカスタマイズする

いよいよカスタマイズしていきます。

実は、Cocoonがアップデートしたことで、コマンドをURL欄に入力するとページ遷移&アイコンが出現するようになりました。

そのコマンドがこちら。

URLコマンドリンク文字列例ボタンの役割
#menuメニューグローバルメニューをスライドインで表示
#homeホームフロントページへのリンクボタン
#shareシェアシェアボタンを表示
#followフォローフォローボタンを表示
#search検索検索フォームを表示
#toc目次へ目次に移動
#topトップページトップに移動
#prev前へ現在表示中の投稿ページの前のページを表示
#next次へ現在表示中の投稿ページの次のページを表示
#sidebarサイドバーサイドバー項目をスライドインで表示
#logoサイト名入力
※短縮形推奨
横幅広めのサイトロゴが表示されるボタンを表示

まずこの中で、自分のサイトに必要なものをピックアップしてください。(ここで欲しい物がない場合は、次のstep③で説明します。)

今回は例として、ホームボタンをコマンドを使って作ってみます。

左のメニュー項目を追加で、カスタムリンク をクリックしてください。

Cocoonでフッターモバイルボタンをカスタマイズする


カスタムリンクのURL欄に先ほど選んだ#コマンドと、リンク文字列を入力してメニューに追加 してください。

は!?こんなことろに#タグを入れるの!?

そうです!これでURLを入力していないのにホームボタンが完成しちゃいます!

はい、これでホームボタン完成です。

コマンドを打っているので、アイコンの家マークを入れなくても出てきちゃうんです!

では次に、↑のコマンドの中に欲しいボタンが無い場合をご紹介いたします。

step③:Font Awesome4.7 を使用してカスタマイズする

先ほどstep②で自分の好きなコマンドが無かった方は外部からアイコンフォントのコードを取得する必要があります。

そんな時に使うのがFont Awesome4.7という、アイコンフォント屋さんです。

こちら通常英語表示なのですが、なんと日本語検索を可能にしてくれた方がいらっしゃり、今回はこちらを使います。

まず、↓の日本語版Font Awesome4.7を開いて、自分の好きなアイコンを取得しましょう。

FontAwesome4.7のアイコンをクリックでコピーできる一覧表【日本語検索対応】
WebアイコンフォントFontAwesome4.7.0のコピペが面倒だったのでお目当てのアイコンをクリックでコピー出来るようにした一覧表です。自分用に作った物ですが頑張ったので公開。簡易的な検索とか絞り込みとかも出来ます。2019-07-0

例えばYouTubeのアイコンが欲しい場合は、検索フォームに「YouTube」と入力してください。

Cocoonでフッターモバイルボタンをカスタマイズする
クリックすると拡大します


すると、YouTubeのアイコンが3つ出てきましたね。

ここでアイコンをクリックしてコードをコピーしてください。

Cocoonに戻って、カスタムリンク欄にURLとリンク文字列を入れてメニューに追加 して下さい。

この時のURLは通常のhttps://~のものです。

Cocoonでフッターモバイルボタンをカスタマイズする
クリックすると拡大します


次に、先ほど取得したコードをcss class(オプション)欄に張り付けるのですが、一点だけ注意!

<i class="fa fa-youtube-play" aria-hidden="true"></i>

↑のソースコードの中の「fa fa-youtube-play」部分だけを入力してください。

入力できたら下のメニュー設定欄でフッターモバイルボタンに✅を入れて メニューを保存 すれば、カスタマイズ完成です!

Cocoonでフッターモバイルボタンをカスタマイズする
クリックすると拡大します

【Before&After】Cocoonのフッターモバイルボタンをカスタマイズ

CocoonのコマンドとFontAwesome4.7を使用してフッターモバイルボタンをカスタマイズしたBefore&Afterはこちら。

Cocoonでフッターモバイルボタンをカスタマイズする
クリックすると拡大します


当サイトの場合は、ホーム、シェアボタンはCocoonのコマンドを使ってカスタマイズ。

それ以外のYouTube、TwitterボタンはFontAwesome4.7のアイコンフォントを使用してカスタマイズしました。

また、ヘッダーメニューと内容が被るため、モバイル表示時にヘッダーメニューを表示するのを辞めました。

みなさんも、サイトの成長とともにメニュー内容を引き算、足し算して調整しながらカスタマイズしてくださいね。

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