株式会社ドリル Home > アメブロカスタマイズ > サイドバーのカスタマイズ > 【アメブロカスタマイズ】《上級》サイドバーの検索フォームに見出しを付けてみよう

【アメブロカスタマイズ】《上級》サイドバーの検索フォームに見出しを付けてみよう

たまにクリックで応援して頂けると、励みになります。
⇒《人気ブログランキング》

2013 01 08 1911

 

こんにちは、ドリル 鈴木です。
今回は上級編としてサイドバーの検索フォームに見出しをつけるカスタマイズになります。

 

検索フォームはブログ内の他の記事を見てもらう為の大切なツールになります。
にも関わらず、アメブロの場合は、その他の項目に見出しはついているのですが、ブログ内検索にはついていません。

 

ブログ内検索にも見出しをつけて、わかりやすくし、より多くの記事を探して読んでもらえる様にしましょう。
それでは、スタートです。 

 

カスタマイズを始める前に

今回のカスタマイズは、普通だと見出しのついていないブログ内検索フォームに見出しを付けると言う物です。
これには、CSSだけでなくJavaScriptも必要になります。

上級編でも比較的簡単にできる内容になっているので、ぜひ試してみて下さい。

 

修正前のページ

まずは、編集前のページになります。
今回はわかりやすい様に、検索フォームをサイドメニューの一番上にもって来ています。 

2013 02 18 1520

 

CSSだけでなくフリープラグインのJavaScript、およびフリースペースのHTMLも記述する必要があります。
これらは全て新規で追加する事になります。

 

フリースペースに見出し様のHTMLを記述する

まずは、フリースペースに見出し様のHTMLを記述します。
「フリースペース編集」を開いて下さい。 

 2013 02 15 1512

ページが開いたら入力欄に下のHTMLを貼付け「保存」をクリックして下さい。
この時、改行を入れてはいけませんので、注意して下さい。 

ブログ内検索

フリープラグインにJavaScriptを追加する

次に「プラグインの追加」の「フリープラグイン」を開いて下さい。
左メニューの「プラグインの追加」をクリックすると「プラグインリスト」が開きます。
タブの「フリープラグイン」をクリックして下さい。 

2013 02 15 1618

ページが開いたら、入力欄に次のJavaScriptを貼付けて「保存」をクリックして下さい。


CSSを編集して見出しとフォームの間を調整する

最後にCSSの編集を行います。
いったんページを見て頂ければわかるのですが、先程の見出しが検索フォームの上に表示されているはずです。
しかし、見出しと検索フォームの間が空きすぎて、間が抜けた感じになっています。

2013 02 18 1650

 

そこで、CSSを編集してこの間を詰めましょう。
そこを調整すると「検索フォームの見出し」だとはっきりわかる様になります。 

CSSの編集画面を開いてください。 
「ブログを書く」>サイドバーの「ブログデザイン」の「デザインの変更」>「CSSの編集」をクリックします。

2013 01 28 1526

 

CSSの編集画面が開いたら、入力r単に一番最後に下記のCSSを追加して「保存」をクリックして下さい。

form.blogSearchForm {
margin: 10px 0 15px 0;
}

編集が終わったらページを見てみましょう。
ブログ検索フォームの上に見出しがついて、わかりやすくなっているのがわかります。 

2013 02 18 1553

 

まとめ

以上で修正は完了です。
若干難易度の高い修正でしたが、うまく更新されたでしょうか? 

もし、更新しても変わらないと言う事であれば、フリースペースとプラグインが有効になっていない可能性があります。
以下の「配置設定」をチェックして下さい。 

2013 02 15 1522

2013 02 15 1521

 

今回の修正内容としては、以下の3つがポイントになります。

 

1. フリースペースに見出しとなるHTMLを追加する
  ここの文字を修正すれば見出しの言葉を変える事ができます。

2. フリースペースに記述した見出しをJavaScriptでブログ内検索フォームの上に移動させる
  今回はここが肝になります。
  他にも応用出来る重要なテクニックになります。

3. CSSでレイアウトを調整する
  JavaScriptで移動させただけでは、見た目的に十分とは言えません。
  より見やすくなる様に、CSSで調整しましょう。

 

JavaScriptに関しては、簡単に説明すると以下の様になります。

まず「JQuery」と言うライブラリーを使用するので、最初に読み込みます。
これを書かないと以降のプログラムは動きません。

次にCSSで言う「どこに」の部分に「form#blogSearchForm」を指定しています。
これがブログ内検索フォームの箇所になります。

そして、「どこに」に対して「相対的な位置」を「before」で指定しています。
「before」ですので、「どこのの前」になり、「after」にすれば「どこのの後ろ」にする事もできます。 

最後に「何を」の部分に「#searchArea」を指定しています。
これが先程フリースペースに追加したHTMLを指しています。


これで、修正内容の説明が完了です。
文字ばかりで、ちょっと長くなってしまいました。

しかし、慣れてしまえば難しくはないので、ぜひチャレンジしてみて下さい。
また、CSSだけよりも難易度の高いカスタマイズなので、わかりにくい所があれば、ぜひ気軽にコメントして下さい。

 

以上、鈴木でした。

【アメブロカスタマイズ】《上級》サイドバーの検索フォームに見出しを付けてみよう” への6件のコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です