エキサイトブログの検索アイコンをいけてる感じにする

a0342241_14213215.png

エキサイトブログのサイドメニューにある、検索バー。ただそのまま入っている、って感じで結構しょぼいんですよね。
今回はこのパーツをもっと見栄え良くしたいと思います。

ボタンを枠線のみのフラットにする

今回はCSSがわりとややこしいので、CSSのコピペ用コードだけ置いておきます。

a0342241_14510185.png
.menu-body table {    
    width: 100%; 
}    
.menu-body table tbody tr:nth-child(2) td:first-child,
.menu-body table tbody input+tr td:first-child {
    width: 150px !important;
}    
.menu-body table tbody tr:nth-child(2) td:nth-child(2),
.menu-body table tbody input+tr td:nth-child(2) {
    width: 10px !important; 
} 
.menu-body table tbody tr:nth-child(2) td:nth-child(3),
.menu-body table tbody input+tr td:nth-child(3) {      
    width: 20px !important; 
}
.menu-body table input[type="submit"] {  
    background: none;  
    border: none;  
    border: 1px solid #ccc; 
    padding: 4px 5px;
}

ボタンを塗りつぶし

色を変えてカスタマイズ!

a0342241_14582604.png
.menu-body table {    
    width: 100%; 
}    
.menu-body table tbody tr:nth-child(2) td:first-child,
.menu-body table tbody input+tr td:first-child {
    width: 150px !important;
}    
.menu-body table tbody tr:nth-child(2) td:nth-child(2),
.menu-body table tbody input+tr td:nth-child(2) {
    width: 10px !important; 
} 
.menu-body table tbody tr:nth-child(2) td:nth-child(3),
.menu-body table tbody input+tr td:nth-child(3) {      
    width: 20px !important; 
}
.menu-body table input[type="submit"] {  
    display: block;    border: none;    width: 40px;    height: 30px;    background: #666;    border-radius: 4px;    color: #fff;
}

ボタンを画像化

お好きな画像で試してみてください。
画像のサイズ似合わせてbackground-sizeとwidth、heightを変えてあげればいい感じになるやも

a0342241_14510103.png
  .menu-body table {
    width: 100%;
}    
.menu-body table tbody tr:nth-child(2) td:first-child,
.menu-body table tbody input+tr td:first-child { 
    width: 150px !important;
}
.menu-body table tbody tr:nth-child(2) td:nth-child(2),
.menu-body table tbody input+tr td:nth-child(2) {
    width: 10px !important; 
}
.menu-body table tbody tr:nth-child(2) td:nth-child(3),
.menu-body table tbody input+tr td:nth-child(3) {      
    width: 20px !important; 
}
.menu-body table input[type="submit"] {      
    background: url(好きな画像のアドレス) no-repeat;
    background-size: 30px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden; 
    display: block;
    border: none;
    width: 30px;
    height: 30px;
}

[PR]
名前
URL
画像認証
削除用パスワード
by exblog-tips | 2016-01-08 15:00 | メニュー周り | Comments(0)

エキサイトブログをとことん使い倒すブログです。こんなことできないかな?をゆるっと募集中!


by エキブロまん