WordPressテーマ「Iconic One」にプラグイン「Responsive Menu」を入れた時に書き込むCSSセレクタ

投稿者: | 2019年4月23日

WordPressテーマ「Iconic One」に「Responsive Menu」のプラグインを入れてみました。

WordPressテーマ「Iconic One」にプラグイン「Responsive Menu」を入れた時に書き込むCSSセレクタ

Responsive Menuというプラグインを入れた際には、デフォルトで表示されている既存のメニューを隠すcssセレクタ(CSS selector)を書き込む必要があるのですが、情報が全く無い中でなんとか試行錯誤してみたところ何となくデフォルトの表示が消えて正常にResponsive Menuが機能しているのでメモしておきたいと思います。




プラグイン「Responsive Menu」の効果

Responsive Menuは、クリックすると現れるメニュー表示で、ハンバーガーメニューとかトルグメニューとかナビゲーションメニューとか様々な言い方がされていますが、これらのメニュー表示を簡単に行ってくれるプラグインです。

コードの書き込みのみで行うこともできるようですが、ちょっとその気力がありませんでした。

このResponsive Menuというプラグインを入れようと思ったきっかけですが、今使っている「Iconic One」というテーマのスマホのデフォルトのメニューがいまひとつな感じがしていたことが理由です。

こんな感じのメニューです。

WordPressテーマ「Iconic One」にプラグイン「Responsive Menu」を入れた時に書き込むCSSセレクタ

なので早速プラグインを入れて表示を変えてみました。

こんな感じです。

WordPressテーマ「Iconic One」にプラグイン「Responsive Menu」を入れた時に書き込むCSSセレクタ

かなりスッキリした印象になったと思います。

Responsive Menuの導入で躓いたこと

このこのResponsive Menuというプラグインは、直観的に操作できるし多くの人が記事にしていますので、簡単に情報を調べることができますがマイナーなテーマでかつ私みたいにcssなどに無知な素人には、多少悩ましいい部分がありました。

それが冒頭にも書きましたが、デフォルトで表示されている既存のメニューを隠すために書き込むcssセレクタ(CSS selector)がわからないということでした。

はじめは色々と書き込んでみたところ、目次が開かなくなったりほかのプラグインの動きまで影響がでてしまいました。

それで、サポートページを見たりしたところ「themonic-nav」がこのテーマのcssのポイントになりそうということで、あとはいろいろと試行錯誤した結果、最終的に落ち着いたのが「#ul, .themonic-nav」です。

今のところ「#ul, .themonic-nav」と書き込んで今のところ問題が無さそうです。

WordPressテーマ「Iconic One」にプラグイン「Responsive Menu」を入れた時に書き込むCSSセレクタ

これでしばらくは、様子を見たいと思います。

まとめと余談

Iconic Oneというテーマを使っている方を見ることが徐々に減っていますが、もうしばらくは使い続けてみようと思います。

WordPressテーマ「Iconic One」にプラグイン「Responsive Menu」を入れた時に書き込むCSSセレクタ

ワードプレスだとほかにコクーン(Cocoon)を使って運営しているブログもありますが、最近は無料ブログが一番楽だなぁと思い始めてもいるところです。

このメンテナンスに費やす時間を書く時間に費やす方がいいような気もしていますが、一方で面白さという点ではワードプレスにも分がある気がしています。

特にブログ(ワードプレス)のテーマは、人間に例えるなら洋服みたいな感じで、そのコンテンツの個性がよく出ていると思います。

そういう意味では、今回のResponsive Menuというプラグインを入れる作業は、いつも着ているアウターをちょっとイメージチェンジしてみた感覚でよかったのかもと思っています。

 

ということで、「WordPressテーマ「Iconic One」にプラグイン「Responsive Menu」を入れた時に書き込むCSSセレクタ」について書いてみました。

最後までお読み頂きありがとうございます。

 

 関連記事 

 

 

sponsored link

           


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA