こんにちは。
今回はSeesaaブログのサイドバーにある検索ボックスをカスタマイズしてみました。
要素をヘッダーに持ってくる方法と、検索ボックスのカスタマイズもちらっとしてみたいと思います。
- 検索ボックスの場所を変えたい
- 見た目をカスタマイズしたい
- とにかく、Seesaaブログの検索ボックスをどげんかしたい
Seesaaブログの検索ボックスをカスタマイズだ!
デフォルトの検索ボックスはサイドバーに表示されています。
なんだか懐かしさを感じるデザインですよね。
これを改造。
とりあえず、こんな感じにしていきたいと思います。
エラーが出ても元の状態に戻せるように、保存の際にはバックアップを行いましょう。
検索のブログパーツをヘッダーに移動する
サイドバーに置いてある検索ボックスをヘッダーに移動させたいので、まずは設置してあるブログパーツを移動させます。
- マイブログの『デザイン』をクリック
- コンテンツをクリック
ここでは、すでに設置してあるブログパーツの移動や確認を行うことができます。
というわけで、
今回は検索ボックスをヘッダーに持ってきたいので、ヘッダーの領域内に検索のブログパーツを移動させます。
自分のブログを開き、移動したパーツがどうなっているか確認してみましょう。
ビローーンと横に伸びただけでした。
まだ慌てるときではありません。
割愛しても大丈夫です。
CSSでブログタイトルの横に移動
ここから、スタイルシートにCSSを追記しながらカスタマイズを行っていきます。
- マイブログにあるデザインをクリック
- CSS/HTML編集をクリック
- デザインタイトルをクリック
- スタイルシートの一番最後に新しい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』のアイコンを使用しています。
Font Awesomeの使い方
Font Awesomeを読み込ませるため、head内に以下のコードを追加します。
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
Font Awesomeのアイコンを使用するためにコンテンツHTML内にあるinputタグを変更していきましょう。
87行目のinputを、以下のコードに書き換えます。
<input value="" 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;でも良いと思います。
まとめ
今回は検索ボックスをシンプルなものに変更してみました。
↓これに変更
アイコンを変えたり、色を変えたり、枠を変えたり、、
できることはたくさんあるので応用してみてくださいね。
さいごのぼやき
プレビューを何度もしていると、変更したコードがなかなか反映されなくなり、割とストレスでした(笑)
CSSやHTMLを変更したのにブログに反映されないときは、キーボードのctrl+F5を押して更新してみてください。それでもダメならキャッシュをクリアしてみると良いかもしれません。
\独自ドメインを取得するなら/