Cocoonのモバイルフッターボタンがカスタマイズできることは知っていました。
このサイトでは初期状態のモバイルフッターボタンで特に不便を感じなかったので今までいじったことはなかったのです。
ある時、フッターボタンに目次を表示するボタンを追加したいと思い、カスタマイズの方法を検討し始めました。いざ実装しようかな？と思ったときに、Cocoonの機能としてモバイルボタンに目次ボタンがあることを知って、これは表示させなければと思った時の記録です。
スマホ表示だと目次を見たいときに簡単に見れないのがすごい不便だと思っていました。
Cocoonのフッターモバイルボタンに追加できるボタン
Cocoonでは、URLコマンドというのが用意されていて、カスタムメニューのURL欄に入力することでフッターモバイルボタンにアイコン付きでボタンを表示させることができます。
初期状態で表示されているボタン以外にも表示できるボタンが結構多いので、是非確認してみてください。
| URLコマンド | リンク文字列例 | ボタンの役割 |
|---|---|---|
| #menu | メニュー | グローバルメニューをスライドインで表示 |
| #home | ホーム | フロントページへのリンクボタン |
| #share | シェア | シェアボタンを表示 |
| #follow | フォロー | フォローボタンを表示 |
| #search | 検索 | 検索フォームを表示 |
| #toc | 目次へ | 目次に移動 |
| #top | トップ | ページトップに移動 |
| #prev | 前へ | 現在表示中の投稿ページの前のページを表示 |
| #next | 次へ | 現在表示中の投稿ページの次のページを表示 |
| #comments | コメント | コメント欄へ移動 |
| #sidebar | サイドバー | サイドバー項目をスライドインで表示 |
| #logo | サイト名入力 ※短縮形推奨 | 横幅広めのサイトロゴが表示されるボタンを表示 |
初期状態のモバイルフッターボタンから変更するには？
新規にメニューを作って、モバイルフッターボタン位置にメニューをアサインすればよいです。
この時、初期状態のモバイルフッターボタンのメニューがあるわけではないので、初期状態のモバイルフッターメニューを修正するのではなく、自分で同じようにメニューを作る必要があります。
今回は目次を追加したいので、初期状態と同じモバイルフッターメニューを作成して、さらに#tocというURLコマンドを追加したカスタムリンクを追加しました。
これが結構メンドクサイ
目次に移動は、目次があるページしか表示されない
実際に、変更したモバイルフッターボタンが表示されるかスマホで確認してみました。
ところが目次ボタンが表示されませんでした。
しばらく悩んだのですが、投稿ページに行くと目次ボタンが表示されたので、どうもTOPページでは目次ボタンが表示されない現象が起きていることに気が付きました。
よくよく考えてみると、目次が無いページでは目次ボタンが表示されても飛び先が無い、だから、目次が無いページでは、目次ボタンが表示されないという当たり前というかとても賢い仕様になっていました。
まとめ
無料テーマでユーザーが好き勝手に機能追加のリクエストができるテーマというのは結構少なく、Cocoonが多くのユーザーに支持されて成功しているのはその影響も大きいと思います。
今回のように、カスタマイズしようかな？と思ったときに既に機能があったりするのもCocoonの魅力じゃないでしょうか。
