Top Page > Seesaaブログ > 【Seesaaブログ新デザインシステム】サイドバー「ブログ内検索」の枠線を…

【Seesaaブログ新デザインシステム】サイドバー「ブログ内検索」の枠線を変更する

Seesaaブログのサイドバー「ブログ内検索」の枠線を変更する
■サイドバーのコンテンツに枠線を付けたので「検索ボックス」も同じスタイルに変更
■独自で作っていたclass「module__heading2」を使用してタイトル下の余白を調整
■CSS、コンテンツHTMLを編集  

前回の記事<■サイドバーのコンテンツを線で囲む(過去ログ、最近の記事、カレンダー、カテゴリ、自由形式、タグクラウド、人気記事)>では、コンテンツ間の境界線をハッキリさせるために、サイドバーの各コンテンツに枠線と背景色を付けました。



具体的には、各コンテンツのタイトル部分のタグ「<p class="module__heading">」に「2」を追加してclass名を「<p class="module__heading2">」に変更し、コンテンツの記述を「<div class="side-waku">」と終了タグ「</div>」で挟む作業をしました。

side-waku」というclassが、枠線や背景色を設定しているclassです。
module__heading2」は、コンテンツのタイトル部分のスタイルで、下余白を5pxに設定したものです。



他のコンテンツと同じように、「検索ボックス(ブログ内検索)」にも同じ処理をすればちゃんと枠線が付きますが、ちょっと見た目がおかしくなってしまいます。


同じ処理をした場合の「検索ボックス」
同じ処理をした場合の「検索ボックス」


画像の通り、二重の線で囲まれてしまうのです。
しかも、太線の内側に検索ボックスが表示されるので、検索部分の横幅が短くなってしまいます。
この表示でも大丈夫ならばこのままでいんですが、私は嫌ですね。なんかおかしいじゃん。



そもそも「検索ボックス」にはデフォルトの状態で枠線が付いているのだから、元からある枠線を太くして背景色を変更すれば、他のコンテンツと同じように表示できるわけです。


編集後のイメージ
編集後の検索ボックス


ということで、「ブログ内検索(検索ボックス)」のスタイルを変更しようと思います。
前回やったように「side-waku」というclassを使って枠線や背景色を設定する、という作業はしません。「side-waku」の枠線は使わずに、検索ボックスの枠線そのものを変更します。



ちなみに現時点での検索ボックスは、以前の記事<■サイドバー「ブログ内検索」の色を変更する>でデフォルトのテンプレートから変更した後のものです。
この記事では、既に検索ボックスを編集していることを前提に話を進めていきます。
まずは「ブログ内検索」の枠線や背景色をサイドバーの他のコンテンツと同じように設定し、タイトル部分の下余白を少し小さくするために、前回の記事で新しく作成したclass「module__heading2」を利用します。





CSSでclass「.module--search .search」関連を編集する


CSS(スタイルシート)を編集します。
管理画面の「スタイルシート編集」画面で「.module--search .search」というclassを探します。
テンプレートがデフォルトのままだと761行目ぐらいにあります。
カスタマイズ後の場合は890行目あたりです。



CSSの該当部分に下記「編集後」のコードをコピペするか直接記述し、変更内容を「保存」します。(下記の「元コード」は、一度目のカスタマイズ後のコードです)


<元コード>
/****** ブログ内検索 ******/
.module--search .search {
border: 1px solid #aaa;
position: relative;
}

.module--search .search__text {
padding: 6px 10px;
width: 80%;
line-height: 1.2;
}

.module--search .search__submit {
background: #909090;
color: #fff;
width: 20%;
height: 100%;
position: absolute;
right: 0;
border-radius: 0;
}

.module--search .search__submit:hover {
background: #ccc;
}


<編集後>
/****** ブログ内検索 ******/
.module--search .search {
border: 2px solid #A7B3BE; /* 枠線 */
position: relative;
background-color: #FBFBFB;
}

.module--search .search__text {
padding: 8px 10px;
width: 80%;
line-height: 1.2;
color: #687786; /* 文字の色 */
}

.module--search .search__submit { /* 検索ボタン */
background: #8E98A2;
color: #fff;
width: 20%;
height: 100%;
position: absolute;
right: 0;
border-radius: 0;
}

.module--search .search__submit:hover {
background: #ccc;
}


●検索ボックスの枠線を、他のコンテンツの枠線と同じにしました。(border: 2px solid #A7B3BE;)
●これまで検索ボックスには背景色を付けていなかったので、他のコンテンツと同じように背景色を設定しました。(background-color: #FBFBFB;)
●枠線の色と太さが変わったので、「検索」ボタンの背景色も変更しました。



コード編集後のCSS(スタイルシート)


編集後のスタイルシート



コンテンツHTMLでタイトル部分に「2」を追加する


前回の記事<■サイドバーのコンテンツを線で囲む(過去ログ、最近の記事、カレンダー、カテゴリ、自由形式、タグクラウド、人気記事)>では、サイドバーのタイトル部分の下余白を、少し狭くしました。


他のパーツへの影響を考えると元々使用されていたclass「module__heading」をそのまま使うわけにはいかなかったので、新しく「module__heading2」というclassを作って枠線とタイトル部分の間の余白を「5px」に設定しました。



「ブログ内検索(検索ボックス)」にも「ブログ内検索」というタイトルがあるので、他のコンテンツと同じように、新しく作っていた「module__heading2」の設定を使います。
サイドバーのコンテンツに関するHTMLは「コンテンツHTML」画面で編集します。



コンテンツHTML編集画面での「ブログ内検索」の記述は「<% if:parts_name == 'article_search' # START parts -%>」から始まります。たぶん、69行目にあります。
71行目の「<p class="module__heading">」に「2」を追加して「<p class="module__heading2">」に変更します。


編集後の検索ボックスのHTML


【注意】
以前の記事<■見出しタグを変更する(3)h3やh4をpタグに入れ替える>で「見出しタグ」を編集したので、上記コンテンツHTML編集画面でclass「module__heading」が設定されているタグは「pタグ」になっていますので(デフォルトのテンプレートの場合は、「module__heading」が設定されているタグは「h3」のはずです)ご注意ください。




コード編集後のブログ内検索(検索ボックス)


検索ボックス自体の枠線が太くなりましたが、サイドバーに並ぶ他のコンテンツとの違和感はないと思います。

編集後のブログ内検索部分




次の記事の紹介

次の記事では、サイドバー「最近の記事」に画像とタイトルだけを表示する方法を説明します。


【Seesaaブログ新デザインシステム】サイドバー「最近の記事」に画像とタイトルだけを表示する(記事冒頭部分は非表示)
Seesaaブログのテンプレート「シンプルA. ホワイト 右カラム」の、サイドバー「最近の記事」を編集します。サイドバーの「最近の記事」に関しては、以前の記事で編集済みです。サムネイル画像のサイズに対して‥‥






posted by mameemon | Comment ( 0 ) | Category ( Seesaaブログ )
この記事へのコメント
コメントを書く
お名前:
コメント:
認証コード: [必須入力]

※画像の中の文字を半角で入力してください。