はてなブログに限定して検索する方法

Google検索で調べ物をしているときに、

「この話題について、はてなブログで書いている人はいないかな？」

と思うことがあります。

普通に検索してもいいのですが、はてなブログの記事だけを探したいときには、少し手間がかかります。

そこで今回は、はてなブログ内をGoogle検索できる検索窓を作ってみました。

はてなブログ内だけを検索したい

Google検索には、特定のサイト内だけを検索するための指定方法があります。

それが、site:です。

たとえば、私のブログ内でATOKについて調べたい場合は、Google検索で次のように入力します。

site:driveon43.com ATOK

これで、driveon43.com内のATOKに関する記事だけを検索できます。

はてなブログのドメイン

はてなブログには、いくつかのドメインがあります。

代表的なものは以下です。

• hatenablog.com
• hatenablog.jp
• hatenadiary.com
• hatenadiary.jp

つまり、これらのドメインをまとめて指定すれば、はてなブログ界隈の記事を横断的に探すことができます。

検索式にすると、こうなります。

site:hatenablog.com OR site:hatenablog.jp OR site:hatenadiary.com OR site:hatenadiary.jp 検索語

ただし、毎回これを入力するのはかなり面倒です。

そこで、検索窓を作りました。

はてなブログ内を検索する検索窓

下の検索窓にキーワードを入力すると、はてなブログ内をGoogle検索できます。

はてなブログ内を検索

キーワードを入力すると、はてなブログ系ドメインの記事だけをGoogle検索します。

検索する

※Google検索を利用します。検索結果は新しいタブで開きます。

検索窓のコード

ブログに貼り付けるコードはこちらです。

コードを表示する

<style>
.hatena-search-box {
  max-width: 760px;
  margin: 32px auto;
  padding: 28px;
  border-radius: 20px;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #f8fafc;
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.22);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
}

.hatena-search-box__title {
  margin: 0 0 8px;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.hatena-search-box__text {
  margin: 0 0 20px;
  color: #cbd5e1;
  font-size: 0.95rem;
  line-height: 1.8;
}

.hatena-search-form {
  display: flex;
  gap: 10px;
  align-items: center;
}

.hatena-search-form input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 15px 17px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 999px;
  background: #ffffff;
  color: #0f172a;
  font-size: 1rem;
  outline: none;
  box-sizing: border-box;
}

.hatena-search-form input[type="text"]::placeholder {
  color: #94a3b8;
}

.hatena-search-form input[type="text"]:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.22);
}

.hatena-search-form button {
  padding: 15px 24px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #38bdf8, #2563eb);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
}

.hatena-search-form button:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.hatena-search-box__note {
  margin: 14px 0 0;
  color: #94a3b8;
  font-size: 0.82rem;
  line-height: 1.6;
}

@media (max-width: 560px) {
  .hatena-search-box {
    margin: 24px 0;
    padding: 22px;
    border-radius: 18px;
  }

  .hatena-search-form {
    flex-direction: column;
    align-items: stretch;
  }

  .hatena-search-form button {
    width: 100%;
  }
}
</style>

<div class="hatena-search-box">
  <p class="hatena-search-box__title">はてなブログ内を検索</p>
  <p class="hatena-search-box__text">
    キーワードを入力すると、はてなブログ系ドメインの記事だけをGoogle検索します。
  </p>

  <form class="hatena-search-form" action="https://www.google.com/search" method="get" target="_blank" onsubmit="this.q.value='site:hatenablog.com OR site:hatenablog.jp OR site:hatenadiary.com OR site:hatenadiary.jp ' + this.keyword.value;">
    <input type="text" name="keyword" placeholder="例：ATOK、ブログ運営、検索窓" required>
    <input type="hidden" name="q">
    <button type="submit">検索する</button>
  </form>

  <p class="hatena-search-box__note">
    ※Google検索を利用します。検索結果は新しいタブで開きます。
  </p>
</div>

使い方

使い方は簡単です。

検索窓に調べたい言葉を入力して、検索ボタンを押すだけです。

たとえば、

• ATOK
• はてなブログ カスタマイズ
• Google Discover
• ブログ運営
• CSS

といったキーワードで検索できます。

はてなブログ内の記事だけを探したいときには、かなり便利です。

まとめ

今回は、はてなブログ内をGoogle検索するための検索窓を作成しました。

毎回、

site:hatenablog.com OR site:hatenablog.jp OR site:hatenadiary.com OR site:hatenadiary.jp

と入力するのは面倒です。

検索窓にしておけば、キーワードを入れるだけで、はてなブログ界隈の記事をすぐに探せます。

ブログ内検索だけでなく、特定のサイト群をまとめて検索したいときにも応用できます。

たとえば、よく読むサイト、参考にしているブログ、公式サイト群などをまとめておけば、自分専用の検索窓として使えます。

追記：2026年6月23日

検索窓がシンプルで小さかったので、スタイルを適応させてみました。