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

はじめに
こんにちは、よっしーです。
無料の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のようなサイドメニューになったはずです。
僕は、結構このサイドメニューが気に入っています。
気になる方はぜひ真似してみてくださいね。
ディスカッション
コメント一覧
まだ、コメントがありません