キーワードをハイライトする

a-blog cmsでは、CMSでの検索結果ページで検索キーワードにマッチしている文字列をハイライト表示する設定が標準で実装されています。（Ver.1.2.1より）
この設定をおこなうと、検索キーワードにマッチした文字列に独自のスタイルを設定することができるため、検索結果内のどこに検索キーワードがマッチしているのかが分かりやすいというメリットがあります。

デフォルトの設定

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて：設定を編集する」を参照してください。

config.jsの内容

// 検索ワードのハイライト
searchKeywordHighlightMark: '.entry, .entryColumn, .entryTitle', 
searchKeywordMatchTag: 'mark',
searchKeywordMatchClass: 'highlight'

---

---

設定のカスタマイズ

config.jsのデフォルトの設定からカスタマイズする場合、JSファイルに下記のように記述します。

ACMS.Ready(function(){
  ACMS.Config.searchKeywordHighlightMark = '.sample-contents'';
  ACMS.Config.searchKeywordMatchTag  =  'mark';
  ACMS.Config.searchKeywordMatchClass = 'sample-highlight';
});

検索文字列の指定

ACMS.Config.keywordに検索対象文字を代入

検索する文字列は「ACMS.Config.keyword」に検索対象の文字を代入することで指定できます。

例）「いろ」と「ほへ」を検索文字列として指定する

ACMS.Ready(function(){
  ACMS.Config.keyword = "いろ ほへ";
});

URLコンテキストにkeywordを指定

URLの末尾に「/keyword/検索したい文字列」を追記することで、ACMS.Config.keywordに自動で値が設定され、上記のJavaScriptを書かなくても文字列の検索が可能です。

https://example.com/keyword/いろ%20ほへ

keywordを検索するためのフォームを作成

また以下のようなフォームを用意することで自動でURLを組み立てることも可能です。ポイントとしては、1つのinput要素のname属性には「query」とvalue属性に「keyword」を指定し、もう1つのinput要素にはname属性に「keyword」とvalue属性に「検索したい文字列」を指定したものを用意することです。

<form action="" class="search-form" method="post" role="search" aria-label="検索フォーム">
  <input type="hidden" name="tpl" value="/entry.html">
  <input type="hidden" name="query" value="keyword">
  <input type="hidden" name="bid" value="6">
  <input type="text" name="keyword" class="search-form-text" value="" size="15" placeholder="検索キーワード">
  <span class="search-form-btn-wrap">
    <button type="submit" name="ACMS_POST_2GET" class="search-form-btn"><span class="acms-icon-search"></span></button>
  </span>
</form>

HTMLとCSSの編集

HTML

config.jsで指定したクラスをHTMLに記述します。

例）「.entry」を指定した場合 検索対象：

いろはにほへと

検索キーワード：「いろ」「ほへ」

検索結果：

<span class="highlight1">いろ</span>はに<span class="highlight2">ほへ</span>と

項目1の内容で指定した場合、class="entry"のあるdivが検索対象となり、検索キーワードにマッチしている文字列がある部分に自動でハイライト表示のスタイルが付与されます。

CSS

ハイライト表示のスタイル指定はCSSで以下のように記述します。例えば、「いろ」「ほへ」の検索結果では、「いろ」に「.highlight1」というクラスが付与され、「ほへ」に「.highlight2」というクラスが付与されます。 複数キーワードで検索されることが予想されるならその分スタイルを用意する必要があります。

例）

/* ハイライト */
.highlight1 {
	color: #000;
	background: #ffff66;
}
.highlight2 {
	color: #000;
	background: #a0ffff;
}
.highlight3 {
	color: #000;
	background: #99ff99;
}
.highlight4 {
	color: #000;
	background: #ff9999;
}
.highlight5 {
	color: #000;
	background: #ff66ff;
}
.highlight6 {
	color: #000;
	background: #880000;
}

---