酔いどれ先生のICT備忘録

最近のアクティブラーニング教育事情、最新ガジェットについて綴っています。

ブログ内「検索窓」をサイドバーからタイトル右横に配置しました。

はてなブログの「検索窓」をこれまではサイドバーの一番上に置いていましたが、ホームページでよくみかけるように右上に配置しました。

 

設定方法

  1. 管理画面から【設定】→【デザイン】【カスタマイズ】を選択。
  2. 【ヘッダ】の【タイトル下】欄に以下のタグを入力する。
 <div align="right">
<form class="search-form" role="search" action="http://yoidorepapa.hateblo.jp/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>

 

このままでは、タイトル画像の高さ分が下にずれ込んでしますので調整をします。管理画面から【設定】→【デザイン】【カスタマイズ】→【デザインCSSを選択。

/*ブログタイトル*/
#blog-title {
height:70px;
width: 600px;
overflow: visible;
}
.header-image-enable #blog-title, .header-image-only #blog-title {
padding: 0px 0;
}

overflow:visibleとコーディングしてブログタイトルが枠からはみ出しても隠れないようにすれば、検索窓も同じレベルで表示されるようになります。