はてなブログのスマホ画面に検索窓と月別投稿数を表示する【ソースコード】

目次

検索窓と月別投稿本数の表示の仕方
スマホ画面に検索窓を表示するコード
スマホ画面に月別投稿数を表示するコード
アラハバキ解第48章公開赤い矢と出雲後物部（いずものちもののべ）

本文

当ブログのスマホ画面のトップに『検索窓』と『月別投稿数』を表示するようにしました。

f:id:Kaimotu_Hatuji:20210513153931j:plain — 検索窓と月別投稿数を表示した状態（スマホ版）

ツイッターやフェイスブックは記事のダイレクトリンク（URL）を張れるのですが、

（最近始めた）インスタグラム、グーグルマップ（クチコミ）にはURLを張れません。

URLを張れない２つには『検索：ものづくりのことだまの国、〇年〇月〇日』という説明をテキストで入れておくのですが、

いざスマホでサイトに来てただいて『〇年〇月〇日』を探すのは、はてなの標準設定ではカレンダー表示がないのでムリ。

その対策として。検索窓もあわせて表示することにしました。

検索窓と月別投稿本数の表示の仕方

やり方をご存じの方も多いと思いますが、ソースコードを紹介しておきますので、参考になさってください。

f:id:Kaimotu_Hatuji:20210513161036j:plain — ②スマートフォンのアイコンをクリック、③ヘッダーをクリックして空欄を表示した状態

＊＊＊＊＊

①管理画面の ”デザイン” を選択

②”スマーフォン” のアイコンをクリック

③”ヘッダー” をクリック

④（コード埋め込みの空欄に）コードを貼りつける（ご自分のURLに書き換えて！）

⑤”変更を保存” してから ”管理画面に戻る”

スマホ画面に検索窓を表示するコード

『★～★』の範囲にブログのURLを貼り付け（上書きし）ます。

※★も不要です。

<div class="top_hatena-module hatena-module-search-box">
 <div class="top_hatena-module-title">

 </div>
 <div class="top_hatena-module-body">
 <form class="top_search-form" role="search" action="https://★www.zero-position.com★/search" method="get">
 <input type="text" name="q" class="top_search-module-input" value="" placeholder="記事を検索" required>
 <input type="submit" value="検索" class="top_search-module-button" />
 </form>
 </div>
</div>

スマホ画面に月別投稿数を表示するコード

『★～★』の範囲にブログのURLを貼り付け（上書きし）ます。

※★も不要です。

<div class="hatena-module hatena-module-archive" data-archive-type="default" data-archive-url="http://★www.zero-position.com★/archive - ここにURLを入力">
    <div class="hatena-module-title">
        <a href="http://★www.zero-position.com★/archive - ここにURLを入力">月別アーカイブ</a>
    </div>
    <div class="hatena-module-body">
    </div>
</div>