twentyelevenをカスタマイズしていたら、ヘッダの右側にある検索窓の位置に不都合が生じました。style.cssをいじって検索窓の位置を調節したのでメモ。

検索窓の位置を上に移動

デフォルトの状態であればstyle.cssの624行目から「/* Search Form */」の記述があります。

/* Search Form */
#branding #searchform {
    position: absolute;
    top: 3.8em;
    right: 7.6%;
    text-align: right;
}

これを以下の様に書き換えます。

/* Search Form */
#branding #searchform {
    position: absolute;
    top: 0.2em;
    right: 2%;
    text-align: right;
}

すると、検索窓の位置が上に上がりました。

スマホ閲覧時の検索窓の位置も移動

以上で終了してもいいのですが、ウェブシュフは、スマホなど幅の狭いデバイスで閲覧するときの検索窓の位置も気に入りません。検索窓をサイト説明の直下に持っていきたいです。なので、これも変えてしまいます。

style.cssの「/* Make sure the logo and search form don’t collide /」から「/ Floated content doesn’t work well at this size */」までに注目してください。

/* Make sure the logo and search form don't collide */
#branding #searchform {
top: 1.625em !important;
}
/* Floated content doesn't work well at this size */

これを以下のように書き換えます。

/* Make sure the logo and search form don't collide */
#branding #searchform {
    /**************top: 1.625em !important;*****************/
    position:static;
    top: 0em;
    right: 10%;
    text-align: right;
}
#branding #searchform div {
    margin: 0;
}
#branding #s {
    float:right;
    -webkit-transition-duration: 400ms;
    -webkit-transition-property: width, background;
    -webkit-transition-timing-function: ease;
    -moz-transition-duration: 400ms;
    -moz-transition-property: width, background;
    -moz-transition-timing-function: ease;
    -o-transition-duration: 400ms;
    -o-transition-property: width, background;
    -o-transition-timing-function: ease;
    width: /**72px**/ 70%;
}
#branding #s:focus {
    background-color: #f9f9f9;
    width: /**196px**/ 75%;
}
#branding #searchsubmit {
    display: none;
}
#branding .only-search #searchform {
    top: 5px;
    z-index: 1;
}
#branding .only-search #s {
    background-color: #666;
    border-color: #000;
    color: #222;
}
#branding .only-search #s,
#branding .only-search #s:focus {
    width: 85%;
}
#branding .only-search #s:focus {
    background-color: #bbb;
}
#branding .with-image #searchform {
    top: auto;
    bottom: -27px;
    max-width: 195px;
}
#branding .only-search + #access div {
    padding-right: 205px;
}
/* Floated content doesn't work well at this size */

すると、このように望み通りの位置に移動しました。