35歳で会社員から教員に転職した酔いどれパパの備忘録

会社員から教員になるまでの苦労話、日々の現場で考えること、教員志望者に役立つ話、等。

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

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

 

設定方法

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

広告を非表示にする