LuxeritasのサイドメニューをSANGOに近づける

2018年2月8日

はじめに

こんにちは、よっしーです。

無料のWordpressテーマ Luxeritas とても便利に使わさせてもらっています。
いろんなページでカスタマイズ方法が紹介されているので、カスタマイズもしやすいテーマです。

でも個人的には実はSANGOが可愛いので、使ってみたいです。
前々から、サルワカのデザインが好きで、参考にさせてもらっていたページでしたが、まさかWordpressのテーマがあったとは。それがSangoなのです。個人的にすごく使ってみたい。

しかし、有料なのです!

そりゃあのクオリティーなら仕方ないですよ。納得です。

それで、LuxeritasをできるだけSANGOに似せて見ようかと、今のブログになりました。今のブログデザインは結構気に入っています。ほとんどSANGOっぽいデザインだけど。

今回は、サイドメニューのSANGO化を紹介します。

サイドメニュー全体のカスタマイズ

初期状態

初期状態

この初期状態から、Sangoっぽいサイドメニューに変更していきます。

最初に、「カスタマイズ(外観)」で、少し設定を変えます。
変える項目は、下記のとおりです。

  • カラム操作 > 領域の分離と結合 > サイドバー
  • サイドバーを項目ごとに分離にチェック
  • コンテンツ領域とサイドバー > サイドバーの位置
  • サイドバーを枠線で囲むのチェックを外す

それから、子テーマのCSSに下記のコードを追加します。

/* サイドメニューをSango化 */
#side .widget{
background-color: white;
padding: 0px 0px 0px 0px;
margin: 20px 0px;
}
#side .widget>h3,#side .widget>h4{
margin: 0px;
}
#side .widget>ul,#side .widget>.tagcloud,#side .widget>.toc_widget{
padding: 1em 1.5em;
}

#side .widget>ul a,#side .toc_widget>ul a{
display: block;
word-break: break-all;
color: #626262;
width: 100%;
font-weight: bold;
font-size: .98em;
padding: 5px 0px;
}

#side h3, #col3 h3, #side h4, #col3 h4{
color: #5ba9f7;
background: #c8e4ff;
padding: 1em 1.5em;
}

これだけで、だいぶSangoっぽいメニューに近づきます。

変更後

検索ボタンのカスタマイズ

つぎに検索ボタンのカスタマイズです。

今の状態で、検索ボタンはこんな感じになっていると思います。

検索画面だけ、デフォルトに近いままですね。

子テーマで下記のCSSを追加してください。


#search input[type="search"]{ display: block; width: 100%; height: 45px; padding: 0 12px; border: 0; border-radius: 3px; background-color: #eaedf2; box-shadow: none; color: #5c6b80; font-size: 1em; vertical-align: middle; line-height: 45px; -webkit-transition: background-color .24s ease-in-out; transition: background-color .24s ease-in-out; padding-right: 48px; border-bottom: solid 1px #efefef; background: #fff; outline: 0; box-shadow: 0 2px 5px 0 rgba(0,0,0,.15), 0 3px 3px -2px rgba(0,0,0,.15); transition: .3s ease-in-out; -webkit-appearance: none; } #search input.search-submit { background-color: #5ba9f7; position: absolute; top: 0; right: 0; width: 60px; height: 45px; padding: 0; border: 0; border-bottom: solid 1px rgba(0,0,0,.1); border-radius: 0 3px 3px 0; color: #fff; font-size: 18px; text-align: center; vertical-align: middle; line-height: 40px; }

変更すると、こんな感じになります。

検索ボタンもSangoっぽくなりました。

まとめ

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

だいぶSangoのようなサイドメニューになったはずです。
僕は、結構このサイドメニューが気に入っています。

気になる方はぜひ真似してみてくださいね。