Studio TA Subsite の案内とお知らせ

エキサイト「ブログ内検索」のアレンジ更新版 / Excite Blog Serch ver.2018.09.28

2018年 09月 28日

検索結果リストで「訪問済・未訪問」をタイトル文字色で区別


「Excite Blog Serch」は、新しいブログ内検索のデザインをアレンジし、操作性を向上させます。
以下はアレンジの要点は纏めたものです。

  ◎「検索文字の記入枠」など、画面上部のレイアウトを上に詰めて高さを節約する。
  ◎ 下部の「ページャー」を上部に移動し、「検索結果のタイトル」と同居させる。
  ◎ 検索結果のリストで、サムネイル画像を小型にして1件ごとの高さを節約する。
  ◎ サムネイル画像はフォバーで拡大確認できる様にする。
  ◎ サムネイルの小型化で引用本文を4行から3行に減らし、高さを節約する。
  ◎ 記事の投稿日時とタグ一覧を、縦2行から1行に変えて高さを節約する。
  ◎ 背景を淡いグレーとして目の疲れを抑える。
  ◎ 画面の基本フォントは「メイリオ」とし、各所のサイズや濃度を最適化する。
  ◎ ヘッダー、フッター等の不要な表示は非表示にする。

下は、今回追加したアレンジ内容です。

  ◎ 検索結果リストのタイトル文字色を「訪問済・未訪問」で区別。
  ◎ 検索結果リストに、ページ毎に 01~10 の連番を付ける。
  ◎ リンクフォバーをデフォルトの下線から文字背景色・文字色の反転に改め明瞭化。



アレンジの効果


下は、今回追加したアレンジ内容を示したものです。

a0349576_18335100.png

訪問済タイトルの文字色を濃いブルーにしていますが、以前のブログ内検索はこの様に訪問済を可視化するデザインでした。 この種のデザインはリンク要素の「:visited」で配色を変えますが、それはブラウザの閲覧履歴を反映させたものです。 従って、ブラウザの閲覧履歴を初期化すれば、訪問済の表示をリセット出来ます。(この方法はページの最後を参照ください)

これを利用すると、多くの記事を対象に一連の記事チェック作業をする場合に、この文字色で作業済を判断出来ます。 その様な作業は、たいてい途中でどこまて進めたか判らなくなり、チェック済の記事を開いて手間取りますから、訪問済の可視化はとても便利です。



「Excite Blog Search」を使用するには


「Excite Blog Search」でブログ内検索画面をアレンジするには、ユーザースタイルシート拡張機能「Stylus」がブラウザに導入されている必要があります。

このスタイルは Chrome版 と Firefox版の「Stylus」で動作を確認していますが、他ブラウザのユーザースタイルシート拡張機能でも使える可能性があります。


❶ 使用しているブラウザに拡張機能「Stylus」が未導入の場合は、以下のリンク先を参照ください。「Stylus」の導入と基本的な使用方法を纏めているので、まず使用ブラウザに適合した「Stylus」を導入をします。 既に「Stylus」を導入している場合は、この作業は不要です。

❷ アレンジスタイルの投稿サイト「userstyles.org」に、「Excite Blog Search」が登録されています。
以下のリンクが「Excite Blog Search」の登録ページです。

Excite Blog Search ver. 2018.08.31


「Excite Blog Search」は、ページ上部のスタイルのサンプル画像の「右下」の Install Style を押すだけで簡単に「Stylus」にインストールされます。

〔注意〕
但し同ページ上に、まぎらわしい「ダウンロードスイッチ」などがあるので注意してください。 無関係で困ったアプリのインストールは必ず避けてください。



「Excite Blog Search」の閲覧履歴をリセットする


訪問済タイトルは着色されますが、これは「検索結果ページの履歴で訪問済」だという事です。 普通に自ブログを遡って「訪問」しても、このページのタイトルは着色されません。 一方、「検索検索」のページから記事タイトルを押して「訪問済」になると、全く他の事で「ブログ内検索」をした場合も、その履歴が残っていてタイトルが着色されます。

この着色を「既チェック」の標識として利用する場合、作業の前に過去の「閲覧履歴」をリセットしておく必要があります。

ブラウザの「閲覧履歴」は、メインの検索エンジンを利用する場合などにも利用され、既にチェックした事を示して検索作業を効率化します。 もし、それらを重視するなら、閲覧履歴のリセットは控えるべきでしょう。 しかし、ブログのメンテナンス等で必要なら、このリセットは有効です。 以下は、ブラウザが Chrome の場合の説明ですが、他のブラウザにも同様の機能があります。 要領は「閲覧履歴」のみをリセットする点です。


Chromeの閲覧履歴をリセット


Chrome で適当なページを開き、「Ctrl + Shift + Delete」を押します。 下の様なダイアログが開きます。

a0349576_17581389.png

基本 / 詳細設定 の選択があるので、「詳細設定」を開きます。

「閲覧履歴」のみにチェックを入れます。 他のチェックは必ず外します。

他のチェックが残っていないか、スクロールして下の方まで確認します。

時期を選択しますが、全期間にしないと履歴が残ってしまうかも知れません。

以上の設定が出来たら「データを消去」を押します。 この操作で先の「訪問済」の標識がリセットされ、「ブログ内検索」の検索結果の全ての記事タイトルが未訪問の状態になります。



[PR]
# by Ataron2 | 2018-09-28 17:06 | ブログスキンのアレンジ | Trackback | Comments(0)