【小ワザ】はてなブログで検索ボックス内の文字（プレースホルダー）の変更方法

前々回の記事に続き、プレースホルダーの小技をもう一つ。はてなブログ限定ですが（笑）

と言うのも、はてなブログの今（2017年11月1日）のプレースホルダーは「記事を検索」ですが、一年前ほどのプレースホルダーは「ブログ内検索」だったのですね。

当時のわたしは、この「ブログ内検索」というプレースホルダーをどうしても変更したくって、あれこれ思考したことがあるのです（その時にプレースホルダーとかをいろいろ調べたわけですが）。

今回は、はてなブログで検索ボックスのプレースホルダーの文字を変更するという、ちょっとした小ワザの紹介です。

はてなブログの検索ボックスの、プレースホルダーの変更方法

はてなブログの検索ボックスに書かれているプレースホルダーを変更させる方法は、大きく分けて二つ考えられます。

直接記述

1つは検索ボックスのHTMLを、そのままHTMLごと記述して変更する方法です。

例えばサイドバーのHTML記述欄などに、検索ボックスのHTMLを直接書くのです。

そして、その placeholder属性の部分だけ変てしまえば変更できる、というものです。

例えで書いたらこんな感じです。

<div class="hatena-module-search-box">
  <form class="search-form" role="search" action="http://tomotan.hateblo.jp/search" method="get">
    <input type="text" name="q" class="search-module-input" value="" placeholder="納豆・Web・雑記" required="">
    <input type="submit" value="検索" class="search-module-button">
  </form>
</div>

これを html を自由に記述できる場所に書き込めばオッケーです。

サンプルとして検索ボックスをここに設置してみました。実際に検索もできます。

注意点としては、検索ボックスのスタイルはテーマなどではだいたいhatena-module-search-boxクラスなどに指定しています。

その使っているテーマのデザインを使いたいならば、検索ボックスに使われているクラス名は変更しないほうが無難です。無ければ指定しているスタイルが反映されないと思います。

後、この方法で設置すると運営側の仕様変更、例えば name 属性の値が変わったりなどしたら検索ボックスが機能しなくなります。

このような内部的な変更は無いとは言えませんので、場合によっては書き直さなくてはいけなくなる、という手間が生じる場合があります。

スクリプトで変更する

二つ目の方法はスクリプト（JavaScrip）を使った方法です。

スクリプトとなれば難しく感じますが、プレースホルダー変更ぐらいなら簡単なスクリプトでできます。

document.getElementsByClassName( 'search-module-input' )[0].placeholder = '探すキーワードを書いてね';

このスクリプトを検索ボックスより下（後）に記述しなくてはいけません。検索ボックスより先にスクリプトがページに読み込まれると、エラーになるからです。

設置場所は【サイドバー】で検索ボックスより後に【 HTML 挿入】を作って記入するという方法もありますが、【フッタ】にある、自由に HTML を記述できる所に挿入するのが無難です。

実際には。何かの拍子に検索ボックスが正しく読み込まれなかった場合も想定して下のようの書くのが良いようです。

document.getElementsByClassName( 'search-module-input' )[0].placeholder = '探すキーワードを書いてね';

また、こちらスクリプトでは検索ボックの最初の一つにだけ有効です。

見たことは無いですが、検索ボックスを複数設置している場合、最初の検索ボックスしか変更されません。

そんな時、jQery を使えば非常に簡単に全てのプレースフォルダーの文字を変換できます。

$( '.search-module-input' ).attr( 'placeholder', '探すキーワードを書いてね' );

もちろん検索ボックスが一つでも変えてくれます。

まあこれぐれい簡単な変更にわざわざ jQuery を導入する必要はないように思いますが、すでに導入されている場合はこちらのほうが簡単で便利です。

ちなみに同じ処理をjavaScriptで実装すると次のようになります。

var searchBoxs = document.getElementsByClassName( 'search-module-input' );
if ( searchBoxs.length ) {
  for ( var i = 0; i < searchBoxs.length; i++ ){
    searchBoxs[i].placeholder = '探すキーワードを書いてね';
  }
}