検索窓をヘッダー部分へ移動する
今回は検索窓をヘッダー部分に内蔵させて、縦長の画面構成をあくまでも短縮する作戦を立てました。まずは、テンプレートの当該部分をヘッダー部分に作りかえます。検索窓自体はウィジェットなので、好みで右メニュー部の下方に置いておいてもよいでしょうし、ウィジェットを動作しないようにしておくことも好みでよいと思います。
ヘッダー部分への追記(<!-- 2014-8-23-->以下の７行分）
(/flatpress.world/fp-interface/themes/leggero/header.tpl)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{$flatpress.title|tag:wp_title:'«'}</title>
<meta http-equiv="Content-Type" content="text/html; charset={$flatpress.charset}" />
{action hook=wp_head}
</head>
<body>
<div id="body-container">
<div id="head">
<h1><a href="/{$smarty.const.BLOG_BASEURL}">{$flatpress.title}</a></h1>
<p class="subtitle">{$flatpress.subtitle}</p>
</div> <!-- end of #head -->
<!-- 2014-8-23-->
<div id=topsearch>
<form id="search" method="get" action="{$smarty.const.BLOG_BASEURL}search.php" enctype="multipart/form-data">
<input type="text" name="q" id="keywords" value="" />
<input type="hidden" name="stype" value="full" />
<span class="search_btn"><input type="submit" name="submit" id="submit" value="{$lang.search.submit}" title="Title Search" /></span>
</form>
</div>
<!-- 2014-8-20 -->
<div id="toppanel">
{widgets pos=top}
<div id="{$id}">
{$content}
</div>
{/widgets}
</div>
<div id="outer-container">
<!-- 2014-8-17 -->
<div id=servername>
{if ($servername == "flatpress.world")}
{$servername}
{/if}
</div>
また、スタイルファイルも合わせて以下のように調整しておきます。 (/flatpress.world/fp-interface/themes/leggero/leggero/res/common.css)
/* new search position */
#topsearch {
margin-top: -60px;
padding-bottom: 11px;
padding-left: 570px;
}
#topsearch input {
background-color: #fff;
border: 1px solid #637C3E;
color: #5B6D3A;
opacity: 0.7;
}
#topsearch .search_btn {
position: relative;
right: 4px;
}
#topsearch .search_btn input{
color: #fff;
background-color: #637C3E;
padding: 2px;
cursor: pointer;
}
なお、改造の痕跡を残す目的で、変更部分をそれぞれに紹介していく方針なので、この他にプチ修正もしておきます。以下は従来のヘッダー画像が一旦表示されてから、今般の画像が表示れるまで若干時間がかかると、ちらっと前の画像が見えます。これを消しておきましょう。
/* ===== HEAD ===== */
#head {
font-family: 'book antiqua', georgia, garamond, times, 'times new roman', serif;
padding: 95px 10px 5px 5px;
margin: 10px;
/* 2014-8-27 */
/* background: #c37676 url('../imgs/shade.png') repeat-x; */
border: #bbb 1px solid
}
カスタマイズを施した結果はこんな感じになってます。ヘッダー部に検索窓が移動されてます。
