Seesaaブログ－サイドバーにある検索ボックスをヘッダーにねじ込む方法

こんにちは。

今回はSeesaaブログのサイドバーにある検索ボックスをカスタマイズしてみました。

要素をヘッダーに持ってくる方法と、検索ボックスのカスタマイズもちらっとしてみたいと思います。

• 検索ボックスの場所を変えたい
• 見た目をカスタマイズしたい
• とにかく、Seesaaブログの検索ボックスをどげんかしたい

Seesaaブログの検索ボックスをカスタマイズだ！

デフォルトの検索ボックスはサイドバーに表示されています。

なんだか懐かしさを感じるデザインですよね。

これを改造。
とりあえず、こんな感じにしていきたいと思います。

検索のブログパーツをヘッダーに移動する

サイドバーに置いてある検索ボックスをヘッダーに移動させたいので、まずは設置してあるブログパーツを移動させます。

1. マイブログの『デザイン』をクリック
2. コンテンツをクリック

ここでは、すでに設置してあるブログパーツの移動や確認を行うことができます。

というわけで、
今回は検索ボックスをヘッダーに持ってきたいので、ヘッダーの領域内に検索のブログパーツを移動させます。

自分のブログを開き、移動したパーツがどうなっているか確認してみましょう。

ビローーンと横に伸びただけでした。
まだ慌てるときではありません。

CSSでブログタイトルの横に移動

ここから、スタイルシートにCSSを追記しながらカスタマイズを行っていきます。

1. マイブログにあるデザインをクリック
2. CSS/HTML編集をクリック
3. デザインタイトルをクリック
4. スタイルシートの一番最後に新しいCSSコードを追記

検索ボックスをブログタイトルの横あたりにもってきたいので、居場所を指定してみたいと思います。

以下のようなコードでスタイルシートの一番最後に追記すると、タイトルの横に移動します。

.header{
position: relative;
}
.module--search{
position: absolute;
width:30%; /*検索ボックスの長さ*/
top: 0;
right: 0;
bottom: 0;
left: auto;
margin: auto;
padding:80px 0; /*余白*/
}

ブログタイトルを左に寄せる

中心にあるブログタイトルを左に寄せます。

タイトルとブログ説明を分ける必要もないかなー？と思うので、ヘッダー内にあるテキストを全て左に寄せるため、先ほど書いたヘッダー用のコード『.header{}』内にtext-alignを追加します。

.header{
position: relative;
text-align:left; /*左寄せ*/
}

ブログ説明いらね！という場合は、下記のコードを追加すると非表示にすることができます。

.description {
visibility: hidden;
}

CSSで見た目のカスタマイズだ！

アイコンを指定する

検索ボックスの見た目を変更していきます。

シンプルにしたいので、枠は下線だけ。
検索ボタンには『Font Awesome』のアイコンを使用しています。

 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

Font Awesomeのアイコンを使用するためにコンテンツHTML内にあるinputタグを変更していきましょう。

87行目のinputを、以下のコードに書き換えます。

<input value="&#xf002;" type="submit" class="search__submit fas">

“検索”と記載されていたところに虫眼鏡のアイコンを入れたいので、valueの文字を『””』に変更。

class名にfasを入れます。（fasだけでも大丈夫ですが分かりやすいようにsearch__submitのあとに入れてます。）

ついでに、
検索ボタンの背景色が緑色なので、白に変更します。
選択時に少し変化があるように、虫眼鏡の色を薄くしてみました。

.module--search .search__submit{
background: #fff;
color: #000;
}
.module--search .search__submit:hover{
background:#fff;
color:#888;
}

下線を引く

現在の枠線を打ち消し、下に新しく線を入れてみます。

.module--search .search{
border:none;
border-bottom: 1px solid #000;
}

パーツタイトルを消す

検索ボックスの上部に引っ付いているパーツタイトルを非表示にします。

.module--search h3{
visibility: hidden;
}

display:none;でも良いと思います。

まとめ

今回は検索ボックスをシンプルなものに変更してみました。

↓これに変更

アイコンを変えたり、色を変えたり、枠を変えたり、、
できることはたくさんあるので応用してみてくださいね。

＼独自ドメインを取得するなら／

ムームードメイン