【Seesaaブログ新デザインシステム】サイドバー「ブログ内検索」の枠線を変更する|ブログカスタマイズの雑談BLOGスマートフォン専用ページを表示ブログカスタマイズの雑談BLOGブログのカスタマイズやパソコン・ネットに関する雑談をするブログです。前回の記事<■サイドバーのコンテンツを線で囲む(過去ログ、最近の記事、カレンダー、カテゴリ、自由形式、タグクラウド、人気記事)>では、コンテンツ間の境界線をハッキリさせるために、サイドバーの各コンテンツに枠線と背景色を付けました。class="side-waku">」と終了タグ「</div>」で挟む作業をしました。「side-waku」というclassが、枠線や背景色を設定しているclassです。「module__heading2」は、コンテンツのタイトル部分のスタイルで、下余白を5pxに設定したものです。他のコンテンツと同じように、「検索ボックス(ブログ内検索)」にも同じ処理をすればちゃんと枠線が付きますが、ちょっと見た目がおかしくなってしまいます。画像の通り、二重の線で囲まれてしまうのです。太線の内側に検索ボックスが表示されるので、検索部分の横幅が短くなってしまいます。この表示でも大丈夫ならばこのままでいんですが、私は嫌ですね。なんかおかしいじゃん。そもそも「検索ボックス」にはデフォルトの状態で枠線が付いているのだから、元からある枠線を太くして背景色を変更すれば、他のコンテンツと同じように表示できるわけです。編集後のイメージということで、「ブログ内検索(検索ボックス)」のスタイルを変更しようと思います。前回やったように「side-waku」というclassを使って枠線や背景色を設定する、という作業はしません。「side-waku」の枠線は使わずに、検索ボックスの枠線そのものを変更します。ちなみに現時点での検索ボックスは、以前の記事<■サイドバー「ブログ内検索」の色を変更する>でデフォルトのテンプレートから変更した後のものです。この記事では、既に検索ボックスを編集していることを前提に話を進めていきます。「ブログ内検索」の枠線や背景色をサイドバーの他のコンテンツと同じように設定し、タイトル部分の下余白を少し小さくするために、前回の記事で新しく作成したclass「module__heading2」を利用します。.search」関連を編集するCSS(スタイルシート)を編集します。.search」というclassを探します。テンプレートがデフォルトのままだと761行目ぐらいにあります。カスタマイズ後の場合は890行目あたりです。CSSの該当部分に下記「編集後」のコードをコピペするか直接記述し、変更内容を「保存」します。#ccc;}●検索ボックスの枠線を、他のコンテンツの枠線と同じにしました。#A7B3BE;)●これまで検索ボックスには背景色を付けていなかったので、他のコンテンツと同じように背景色を設定しました。#FBFBFB;)●枠線の色と太さが変わったので、「検索」ボタンの背景色も変更しました。コード編集後のCSS(スタイルシート)コンテンツHTMLでタイトル部分に「2」を追加する前回の記事<■サイドバーのコンテンツを線で囲む(過去ログ、最近の記事、カレンダー、カテゴリ、自由形式、タグクラウド、人気記事)>では、サイドバーのタイトル部分の下余白を、少し狭くしました。他のパーツへの影響を考えると元々使用されていたclass「module__heading」をそのまま使うわけにはいかなかったので、新しく「module__heading2」というclassを作って枠線とタイトル部分の間の余白を「5px」に設定しました。「ブログ内検索(検索ボックス)」にも「ブログ内検索」というタイトルがあるので、他のコンテンツと同じように、新しく作っていた「module__heading2」の設定を使います。サイドバーのコンテンツに関するHTMLは「コンテンツHTML」画面で編集します。-%>」から始まります。class="module__heading2">」に変更します。以前の記事<■見出しタグを変更する(3)h3やh4をpタグに入れ替える>で「見出しタグ」を編集したので、上記コンテンツHTML編集画面でclass「module__heading」が設定されているタグは「pタグ」になっていますので(デフォルトのテンプレートの場合は、「module__heading」が設定されているタグは「h3」のはずです)ご注意ください。コード編集後のブログ内検索(検索ボックス)検索ボックス自体の枠線が太くなりましたが、サイドバーに並ぶ他のコンテンツとの違和感はないと思います。次の記事では、サイドバー「最近の記事」に画像とタイトルだけを表示する方法を説明します。右カラム」の、サイドバー「最近の記事」を編集します。サイドバーの「最近の記事」に関しては、以前の記事で編集済みです。[必須入力]※画像の中の文字を半角で入力してください。