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

sangomenuブログ運用

今までは全然ブログのカスタマイズをしてこなかった僕ですが、今回試しに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]

追加CSS

めちゃくちゃ簡単です!

まとめ

いかがでしたでしょうか。

SANGO独特のかわいらしいデザインをちょっぴりスタイリッシュに変更してみました。

もう少し改良の余地はありそうですが、まずは第一弾として今回のメニュー改修で様子みます。

背景は透過ではなくてIOS風にぼかし(Blur)にしようと思っています。

定期的にカスタマイズして行く予定ですので気になる方はチェックしてくださいねー!

 

コメント

タイトルとURLをコピーしました