WordPressテーマ「Iconic One」に「Responsive Menu」のプラグインを入れてみました。
Responsive Menuというプラグインを入れた際には、デフォルトで表示されている既存のメニューを隠すcssセレクタ(CSS selector)を書き込む必要があるのですが、情報が全く無い中でなんとか試行錯誤してみたところ何となくデフォルトの表示が消えて正常にResponsive Menuが機能しているのでメモしておきたいと思います。
プラグイン「Responsive Menu」の効果
Responsive Menuは、クリックすると現れるメニュー表示で、ハンバーガーメニューとかトルグメニューとかナビゲーションメニューとか様々な言い方がされていますが、これらのメニュー表示を簡単に行ってくれるプラグインです。
コードの書き込みのみで行うこともできるようですが、ちょっとその気力がありませんでした。
このResponsive Menuというプラグインを入れようと思ったきっかけですが、今使っている「Iconic One」というテーマのスマホのデフォルトのメニューがいまひとつな感じがしていたことが理由です。
こんな感じのメニューです。
なので早速プラグインを入れて表示を変えてみました。
こんな感じです。
かなりスッキリした印象になったと思います。
Responsive Menuの導入で躓いたこと
このこのResponsive Menuというプラグインは、直観的に操作できるし多くの人が記事にしていますので、簡単に情報を調べることができますがマイナーなテーマでかつ私みたいにcssなどに無知な素人には、多少悩ましいい部分がありました。
それが冒頭にも書きましたが、デフォルトで表示されている既存のメニューを隠すために書き込むcssセレクタ(CSS selector)がわからないということでした。
はじめは色々と書き込んでみたところ、目次が開かなくなったりほかのプラグインの動きまで影響がでてしまいました。
それで、サポートページを見たりしたところ「themonic-nav」がこのテーマのcssのポイントになりそうということで、あとはいろいろと試行錯誤した結果、最終的に落ち着いたのが「#ul, .themonic-nav」です。
今のところ「#ul, .themonic-nav」と書き込んで今のところ問題が無さそうです。
これでしばらくは、様子を見たいと思います。
まとめと余談
Iconic Oneというテーマを使っている方を見ることが徐々に減っていますが、もうしばらくは使い続けてみようと思います。
ワードプレスだとほかにコクーン(Cocoon)を使って運営しているブログもありますが、最近は無料ブログが一番楽だなぁと思い始めてもいるところです。
このメンテナンスに費やす時間を書く時間に費やす方がいいような気もしていますが、一方で面白さという点ではワードプレスにも分がある気がしています。
特にブログ(ワードプレス)のテーマは、人間に例えるなら洋服みたいな感じで、そのコンテンツの個性がよく出ていると思います。
そういう意味では、今回のResponsive Menuというプラグインを入れる作業は、いつも着ているアウターをちょっとイメージチェンジしてみた感覚でよかったのかもと思っています。
ということで、「WordPressテーマ「Iconic One」にプラグイン「Responsive Menu」を入れた時に書き込むCSSセレクタ」について書いてみました。
最後までお読み頂きありがとうございます。