検索窓をカスタマイズ

ヘッダ タイトルの下 19/09/04

<span class="menu-toggle"><i class="blogicon-reorder lg"></i>MENU</span>
<ul id='menu'>
<div class="menu-inner">
<li><a href='https://nagaisaka.hatenablog.com/'>TOP
<li><a href='https://nagaisaka.hatenablog.com/archive/category/%E6%97%A5%E8%A8%98%E3%81%A8%E3%81%97%E3%81%A6%E8%AA%AD%E3%82%93%E3%81%A7%E3%82%82%E3%82%89%E3%81%88%E3%82%8B%E3%81%A8%E5%AC%89%E3%81%97%E3%81%84%E3%81%A7%E3%81%99'>日記</a></li>
<li><a href='https://nagaisaka.hatenablog.com/archive/category/%E5%9B%9E%E6%83%B3'>回想</a></li>
<li><a href='url'>修正</a></li>
<li><a href='url'>御守</a></li>
<li><a href='url'>絵画</a></li>
<li><a href='https://nagaisaka.hatenablog.com/archive/category/%E5%86%85%E7%B7%92'>内緒</a></li>
<li><a href='url'>遊戯</a></li>
<li><a href='url'>恋愛</a></li>
</div>
</ul>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$(".menu-toggle").on("click", function() {
$(this).next().slideToggle();
});
});
$(window).resize(function(){
var win = $(window).width();
var p = 768;
if(win > p){
$("#menu").show();
} else {
$("#menu").hide();
}
});
</script>

<!-- 検索ボックスここから -->
<div class="hatena-module hatena-module-search-box">
<div id="original-search-box" class="hatena-module-body">
<form class="search-form" role="search" action="https://diy-kagu.hatenablog.com/search" method="get">
<input type="text" name="q" class="search-module-input" value="" placeholder="記事を検索" required>
<input type="submit" value="検索" class="search-module-button" />
</form>
</div>
</div>
<!-- 検索ボックスここまで -->

デザインCSS 19/09/04

/* <system section="theme" selected="17680117126965268278"> */
@import url("https://blog.hatena.ne.jp/-/theme/17680117126965268278.css");
/* </system> */

/* <system section="background" selected="undefined"> */

.entry-content { font-size:18px; line-height:1.8em;}

.entry-content p { margin: 0.3em 0;}

#menu {
position: relative;
width: 100%;
padding-left: 0px;
height: 40px;
background: #ffffff;/*グローバルメニュー背景色*/
}
.menu-inner{
width: 968px;
margin: 0 auto;
height: 40px;
}
#menu li {
list-style-type: none;
float: left;
height: 40px;
text-align: left;
}
#menu li a {
padding-left: 15px;
padding-right: 15px;
display: block;
color: #7058a3;/*グローバルメニュー文字色*/
font-size: 80%;
font-weight: bold;
line-height: 40px;
}
#menu li:hover a {
color: #00DFFC;
background: #ffffff;
transition: all .5s;
}

.menu-toggle{
display: none;
}

/*パソコン１カラム*/
@media screen and (max-width:968px){
.menu-inner{
width: 768px;
}
}

/*タブレット*/
@media screen and (max-width:768px){
#top-editarea{
height: initial;
background: #343838;/*MENU背景色*/
text-align: right;/*MENUの文字の位置*/
width: 100%;
}
.menu-toggle{
color: #dc143c;/*MENUの文字色*/
display: inline-block;
padding: 5px;
margin: 3px;
}
#menu {
width: 100%;
display: none;
height: initial;
padding: 0;
margin: 0;

}
.menu-inner{
width: 100%;
height: initial;
position: static;
margin: 0;
}
#menu li{
float: none;
height: 35px;
width: 100%;
list-style-type: none;
background: #00DFFC;/*リスト文字の背景色*/
margin: 0 auto;
text-align: left;/*リストの文字の位置*/
}
#menu li a {
height: initial;
color: #343838;/*リスト文字色*/
display: block;
}
#menu li:hover a{
color: initial;
background: initial;
}
}/

#original-search-box{
position:fixed;
top:8px;
right:10px;
z-index:999 !important;
}
.hatena-module-search-box{
height:0;
padding:0;
margin:0;
}