【SANGO】ドロワーメニューのデザインをカスタマイズをしてみました。

今までは全然ブログのカスタマイズをしてこなかった僕ですが、今回試しにSANGOのモバイルメニューを少しだけカスタマイズしてみましたのでご紹介します。

SANGOの世界観からちょっとずらした見た目になりますが、もし興味にある方は試しに設定してみてください！

※設定は自己責任でお願いいたします。

メニュー変更結果
細かいところもカスタマイズ！
どうやって変更するの？
まとめ

メニュー変更結果

まずはメニューのビフォーアフターを御覧ください。

元々メニューが中途半端に開くのが個人的には好みではなかったので横幅100％で表示させるように変更しました。

変更した内容はCSSのみ！

変更する場合に必要なのはエディタくらいですね！

もしカスタマイザーを使ってCSSの追加をしない場合は、別途FTPソフトを用意してください！

おすすめのエディタソフトはサブライムテキストです！

実際の動きはこんな感じです！

細かいところもカスタマイズ！

メニュー内のブロックごとに1pxの線を入れて、背景は透過しました。

細かいところで言えばカテゴリの投稿数の表示を右寄せにして、円形から正方形に変更しています。

ちょっぴりスタイリッシュになった印象です。

どうやって変更するの？

変更方法はとっても簡単。

下記のソースコードをWordPress管理画面の　外観　＞　カスタマイズ　＞　追加CSS

の順番で追加CSSの画面を開き、下記でコピーしたソースコードをペーストして公開するだけ。

[codebox title=”コード”]

/*--------------------------------------
カスタムMENU
--------------------------------------*
#drawer__content .widget {background: rgba(0,0,0,0);}
#drawer__content{max-width:100%;width: 100%;background: rgba(0,0,0,.5);}
.entry-count {min-width: 28px;border-radius: 10%;float: right;}
#drawer__content .widget ul li a {color:aliceblue;}
#drawer__content .widget ul li {border-bottom: 1px solid aliceblue;}

[/codebox]