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のようなサイドメニューになったはずです。
僕は、結構このサイドメニューが気に入っています。

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