Blogger Web 検索もしたい 暫定版 要改訂

Blogger Web 検索もしたい 暫定版　で、書いた様に、
暫定版の 其れ は Browser によって、
表示のばらつき があります。
其の辺りを少し。


html の内容は、表示が Browser に委ねられています。
見事な迄に、Browser 依存の Code になっています。

Blogger Web 検索もしたい 暫定版　で、
改訂したものを 載せるかも 知れませんので、ご注意を！。
と書いたのは、　其れに対策する必要がある、と認識しているから。
概ね、目途も立っていますが、
其れは少し時間的な余裕が生まれてから、にしましょう。
だって、今は　師走　で、精神的にも慌ただしいので。

Brower 依存の例を示しましょうね。
Firefox と Edge で較べて見ました。

Firefox 107.1 は 誤、107.0.1 が 正 でした。

入力を待機する <input type="text" name="q" size="28" ... の size は、
Internet 検索すると、
色々と解説されています。
此の size="28" の部分は直す必要がありそうです。

最初、
Code を書き起こすに当たって、
Blog 内検索 を賄う Blogger の 純正 Code を見たかったのですが、
設定画面 では　利用者が変更する部分 しか見れません。

Template に組み込まれた html Code を読み取れば良い訳ですが、
何分、膨大なもの ですし、
他との絡み もあって、
簡単に コピペ と言う訳には行きません。
其処にも、size の指定 size='10' がある様に見受けられますが、
実際には、Browser に依らず、固定幅で 表示されていますね。
う～ん ？、な訳です。
Code の 別の箇所 で 読み替え をしているのだと思うのですが ... 。
追い切れませぬ。

きっと、対策方法 は　style="width: ???px;"　にする事だと思っています。
??? の値は 実際に 試行錯誤が要るでしょう。

参考用に、
自分の Blog 用に調整した 暫定版 での Template （テーマ html）の様子を抜粋して記載して置きます。
Blog と Song との 検索 部分 です。
未だ、暫定版 ですので、　其のお心算で。

  <b:widget id='BlogSearch1' locked='false' title='Blog Search 　( Not Newest )' type='BlogSearch'>
    <b:includable id='main'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
      <h2 class='title'><data:title/></h2>
    </b:if>

    <div class='widget-content'>
      <div expr:id='data:widget.instanceId + &quot;_form&quot;'>
        <form class='gsc-search-box' expr:action='data:blog.searchUrl'>
          <b:attr cond='not data:view.isPreview' name='target' value='_top'/>
          <table cellpadding='0' cellspacing='0' class='gsc-search-box'>
            <tbody>
              <tr>
                <td class='gsc-input'>
                  <input autocomplete='off' class='gsc-input' expr:value='data:view.isSearch ? data:view.search.query.escaped : &quot;&quot;' name='q' size='10' title='search' type='text'/>
                </td>
                <td class='gsc-search-button'>
                  <input class='gsc-search-button' expr:value='data:messages.search' title='search' type='submit'/>
                </td>
              </tr>
            </tbody>
          </table>
        </form>
      </div>
    </div>

    <b:include name='quickedit'/>
  </b:includable>
  </b:widget>
  <b:widget id='HTML4' locked='false' title='Song Search' type='HTML'>
    <b:widget-settings>
      <b:widget-setting name='content'>&lt;form method=&quot;get&quot; action=&quot;https://www.google.co.jp/search&quot; target=&quot;_blank&quot;&gt;
&#160;&#160;&lt;input type=&quot;text&quot; name=&quot;q&quot; size=&quot;20&quot; maxlength=&quot;255&quot; value=&quot;&quot; /&gt;
&#160;&#160;&lt;input type=&quot;submit&quot; name=&quot;btng&quot; value=&quot;検索&quot; /&gt;
&#160;&#160;&lt;div&gt;
&#160;&#160;&lt;input type=&quot;checkbox&quot; name=&quot;q&quot; value=&quot;YouTube&quot; checked /&gt; Only YouTube
&#160;&#160;&lt;/div&gt;
&#160;&#160;&lt;input type=&quot;hidden&quot; name=&quot;hl&quot; value=&quot;ja&quot; /&gt;
&lt;/form&gt;</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
  </b:widget>