GRAV テーマ Antimatterのモバイル時メニューを右スライドにする

GravのテーマAntimatterでスタイルする中、モバイル画面では画面上にロゴとメニューを開くためのボタンが表示される。

このメニューを開くためのボタン()は、画面右側にあるのに開くパネルは左側からスライドする。

パネル以外をクリック(タッチ)すればパネルは閉じるので必ずしも表示されている必要はなく、右にあろうが左にあろうがたいして問題ではないけれども、ボタン()をロゴの左に持っていくのもcss的にちょっと面倒くさいし、さてどうするものかと考える事もあるだろう。

ボタン()をそのままにパネルが右から開けばそれで解決するわけだが、どのように触るのかの解説がないので、困っている人向けにそこらを解説します。

準備

直接オリジナルのAntimatterをいじってもできると思うけれども、多くの日本で利用している人は英語版そのままだと修正点も多いので、Antimatter日本語版を利用されていると思う。

Antimatter日本語版はAntimatterの子テーマにあたるもので、親を継承してるテーマなので、オリジナルをそのままにしておくという意味合いからでも、日本語版を利用されるのが良いかと思う。

修正点

さて、修正点は、base.html.twigで、ボタン部分とパネル部分のclassを変更する。

だいたい50行目あたり、

上記のマークを付けた部分(14行目にある)、「sb-toggle-left navbar-left」のleftをrightにそれぞれ変更するつまり、「sb-toggle-right navbar-right」というふうにするわけだ。

次に、同ファイル、一番下にある {% block bottom %}部分の上にあるパネルのclassを変更する。

「sb-slidebar sb-left」を「sb-slidebar sb-right」にする。

実はこの2点だけで他に修正せずともパネルは右側から開くようになる。

簡単なことだけれど、説明がない分わかりにくい点かと思う。メニューボタン()をcssなどで左にしたりするよりも圧倒的に簡単だ。

もし何かしらカスタマイズして左からパネルを出したい時にはこれらclassの仕組みを理解して、パネルがどのように記載されているかがわかれば実装できると思う。

スポンサーリンク

シェアする

フォローする