人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

「ブログ内検索」の検索ページをアレンジ / エキサイトブログ

2018年 01月 31日

SSL移行の部分的な未完状態


エキサイトブログのSSL移行の過程と思われますが、現在「ブログ内検索」の結果リストのページが、スキンレスの状態となっています。

「ブログ内検索」の検索ページをアレンジ / エキサイトブログ_a0349576_14301591.png

上図の様にCSS修飾が無い「素」の表示で、実用上も見難く扱い難い状態です。 これは「https://」で表示したもので、従来の「http://」での表示は以下の様なデザインです。

「ブログ内検索」の検索ページをアレンジ / エキサイトブログ_a0349576_14315337.png

2月下旬の移行完了時には「素」の表示は改善されると思いますが、ユーザースタイルシートでこちらの好みにアレンジして、SSL移行後もそのスタイルを使おうと考えました。 移行に際してHtmlの変更があれば、作ったスタイルの修正が必要になりますが、たいした構成でもないので気軽にアレンジしてみました。



アレンジ後のデザイン


ページ上部のヘッダー部や最下部のフッター部は、実際に利用した事がありません。 ネット全体の検索はブラウザの検索窓を使用しますが、このデフォルトのデザインは画面上に余計な検索窓が存在します。 ブログ内検索のページは、ユーザーが迷わない様にシンプルが一番です。

下は「https://」の表示にアレンジスタイルを適用した状態で、Stylusアイコンが「有効」を示しています。

「ブログ内検索」の検索ページをアレンジ / エキサイトブログ_a0349576_14321657.png

検索結果は1ページに11件ずつ表示されますが、各件の左肩に「01~11」の番号を表示しました。 残念ながらページを変えるとリセットされ、これは全件の通し番号ではありません。 しかし、リストの1件ずつを修正する時には、終了した件をこの番号で確認出来ます。

他に、フォントを少し大きくしたり、各件の内容「タイトル」「登録日時」「タグ」「本文」の配置やインデントなど、リストとしての見易さを考慮しました。



スタイルを手作業で Stylus に登録する


このアレンジスタイルは、SSL移行後に修正が必要となるかも知れず、「userstyles.org」への登録は控えました。 手作業でのスタイル登録になりますが、コードは簡単です。


① ウェブページのアレンジする拡張機能「Stylus」を導入


●Chrome を使用している場合は、下のページから拡張機能「Stylus」の導入します。

●Firefox を使用している場合は、下のページから拡張機能「Stylus」の導入します。

➁ アレンジスタイルを「Stylus」に登録する


Chrome / Firefox で、「Stylus」の表示や機能は全く同じです。
「Stylus」の「管理画面」から「新スタイルを作成」を押して、下図の「スタイルを追加」(スタイル編集画面)を表示させます。

「ブログ内検索」の検索ページをアレンジ / エキサイトブログ_a0349576_20082684.png

「スタイル名」は適当で良いのですが、上図は「Excite Search inside My Blog」としています。

「適用先」の指定は以下に設定します。
   「 次で始まるURL 」=「 https://www.exblog.jp/search/

「CSSコード」は、以下のコードをコピーペーストで記入します。



/* 2018.02.01 Excite Search inside My Blog */

body {
margin: 0; }

#exHeaderWrapper {
display: none; }

center form > table {
position: absolute;
top: 0;
width: 100%;
text-align: center;
padding: 1em;
background: #E1F5FE; }

#query {
height: 2em;
font-size: medium;
padding: .2em 1em 0.1em;
border-radius: 4px;
border: 1px solid #aaa; }

.excite_submitButton {
background: url(//s.eximg.jp/exblog/user2/img/header/btn-search-white.png?1516773691) center top no-repeat;
margin-left: -44px;
margin-bottom: 4px;
height: 22px;
width: 33px;
outline: none;
border: 0;
vertical-align: bottom; }

center form > table font {
font-size: medium !important; }


/* 検索結果 全ページ 目次 */
#rh {
position: relative;
top: 3.2em;
display: flex;
width: 100%;
background: #ECEFF1;
border-top: 1px solid #aaa;
border-bottom: 1px solid #aaa;
font-size: 14px; }

#rh > * {
padding: 5px 10px 4px;
white-space: nowrap; }

#rh .r-period {
font-weight: normal !important; }


/* 検索結果 各ページ 内容 */
#resultsBody {
position: absolute;
top: 12em;
margin: 1em;
font-size: 14px; }


/* スポンサーリンク */
.ss_info {
display: none; }

.ss_link {
display: none; }


/* 検索リスト */
#resultsBody ul {
overflow: hidden;
padding-left: 2.2em; }

#resultsBody li {
list-style-type: decimal-leading-zero;
position: relative;
margin-bottom: 1em;
background: #ECEFF1; }

#resultsBody li h3 {
position: absolute;
top: 0.6em;
padding: 0 1em;
margin: 0;
text-align: left;
white-space: nowrap; }

#resultsBody li h3 a {
text-decoration: none; }

#resultsBody li .c {
padding: 4em 3em 0.4em;
text-align: left; }

#resultsBody li .t {
position: absolute;
top: 2.4em;
left: 11em;
color: transparent;
white-space: nowrap; }

#resultsBody li .t span {
color: #000;
font-weight: bold; }

#resultsBody li .t span a {
text-decoration: none;
font-weight: bold; }

#resultsBody li .b {
position: absolute;
top: 2.4em;
left: 1.2em; }

#resultsBody li .b span:first-child {
display: none; }

#resultsBody li cite {
display: none; }


/* 検索結果 ページ送り */
#wrapper + div > table {
position: absolute;
top: 9em;
width: 100%;
padding-left: 1.1em; }

#wrapper + div > table td > font {
color: transparent; }

#wrapper + div > table td > a {
background: #2196F3;
padding: 2px 15px 1px;
border: 1px solid #fff;
border-radius: 6px;
color: #fff;
text-decoration: none;
box-shadow: 2px 2px 4px #00000040; }


/* フッター */
#exFooterWrapper {
display: none; }




上記の書き込みを確認して「保存」を押します。

以上の手順で「Excite Search inside My Blog」のスタイル名で、検索ページのアレンジスタイルが登録されます。 このスタイルは「Stylus」で常時ONでも構わないでしょう。 自分のブログ内の検索をSSL環境で行った時だけに、このスタイルが適用されます。




この記事はカテゴリ「スキン編集」にトラックバックしています。



by Ataron | 2018-01-31 21:25 | ブログスキンのアレンジ | Trackback | Comments(0)
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。