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

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

Seesaaブログのサイドバー「ブログ内検索」の色を変更する
■Seesaaブログのサイドバーの「検索ボックス」を編集
■「検索」文字部分の背景色を変更
■CSSの「.module--search .search」を編集  

Seesaaブログのサイドバーには「ブログ内検索」というコンテンツ(検索ボックス)があり、デフォルトのテンプレートでは「検索」という名前になっています。
私は以前の記事<■【Seesaaブログ新デザインシステム】各コンテンツのタイトルを編集する(例として検索ボックス)>で、この「検索」というコンテンツ名を「ブログ内検索」に変更しました。(まあ、名前を変更してもしなくてもどちらでもいいんですけども)



デフォルトの「ブログ内検索」は、「検索」という文字部分の背景色が水色です。
私のブログでは青色(紺色っぽい青色)を主体としているのでこの水色が目立ってしまいます。
なので今回は、この水色部分の色を変更したいと思います。


検索ボックスの比較画像


まずはCSS(スタイルシート)上でサイドバー部分がどこにあるのかがわかるように見出しを付けます。
見出しを付けた後に水色部分の色を変更したいと思いますので、見出しなんて付ける必要はないとお考えの方は、最初の項目を飛ばしてください。





CSS(スタイルシート)のサイドバー部分に見出しを付ける


CSS(スタイルシート)のサイドバー部分に見出しを付けたいと思います。
Seesaaブログのサイドバーに関するコードは、CSSのある部分にまとまって記述されています。
最初に出てくるコードは、私のカスタマイズでは触れない部分なのでそのまま残しているんですが、個人的に見出しを付けておかないとわかりにくいです。


なので、「ここから下はサイドバーに関する記述なのだ」と強調するために、今のうちにサイドバーの冒頭部分に見出しを入れておきます。
CSSがぐちゃぐちゃになることを嫌う場合は、この処理はしなくてかまいません。
(私は、この一連のカスタマイズの記事をアップした後でこういう「見出し」部分も削除しようと考えていますが、まあ、現時点ではわかりやすくするためにこの処理をしています)



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



CSS(スタイルシート)の「.module--profile .profile__heading」に見出しを追加します。
CSSの該当部分に「見出し」のコードをコピーして貼り付けてから「保存」します。


<元コード>
サイドバー部分のスタイルシート編集画面


<見出しを付けて強調する>
/*** サイドバー(プラグイン)
*****************************************************/


.module--profile .profile__heading {
float: left;
margin-right: 5px;
}




見出しを追加した後のCSS(スタイルシート)


編集後のサイドバー部分のスタイルシート



検索ボックスの背景色を変更する


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



CSS(スタイルシート)の「.module--search .search」関連を編集します。
編集というか、正確にはカラーコードを変更しています。
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;
}


●コメントアウトで見出し「/****** ブログ内検索 ******/」を付けました。
●カラータグを変更して「検索」部分の背景色を灰色にし、枠線の色も変更しています。



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


編集後の検索ボックス部分のスタイルシート

実際の検索ボックス




次の記事の紹介

次の記事では、Seesaaブログのページ案内リンクを編集します。


【Seesaaブログ新デザインシステム】ページ案内リンク(「12345ボタン(pager)」「続きを読む」「もっと見る」)を編集する
ここまでのカスタマイズで、とりあえずトップページは完成っぽいです。でもよく見たら、ページの下部にあるページ案内リンク(1ページ目や2ページ目を案内するボタン)の背景色が水色のままです。水色だと違和感があるので‥‥






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

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