オフィス・アキ

ADHD & ASDを持つ、発達障害グレーゾーンの33歳です。ペンと紙を使ったアナログなイラストを、販売しております。

【はてなブログ】「モバイルページにて、サイト内検索ができない」の問題を改善

こんばんは。

イラスト屋のアキです(@aki_20190126)。

 

はてなブログのモバイルページにて、一時期検索ボックスがうまく機能しませんでした。

半年間もの試行錯誤の上何とか改善できたので、同じような不具合に悩まれている方に向け、記事としてまとめてみたいと思います。

 

▼目次

 

① モバイルページのサイト内検索が不具合に

はてなブログに搭載されている検索ボックス。

モバイルページでは通常、ページャ下段に設置されています。

f:id:aki20180217:20190611202353j:plain 

 

投稿記事数が増えるごとに利便性がアップする機能ではありますが、当サイト、オフィス・アキのモバイルページにて、ここ数か月間うまく機能しませんでした。

 

検索ボックスに「アキ」「イラスト」等の、ブログ内における頻出ワードを打ち込んでもこの有様。

f:id:aki20180217:20190611202414j:plain 

 

よくよく見ると、本来であればページの横一杯あるはずの、検索ボックスの幅がものすごく縮こまっていました。

f:id:aki20180217:20190611202429j:plain 

 

② 不具合の原因はカテゴリ一覧にあり

ググってもうまい解決策がでてこなかったため、はてなブログのお問い合わせフォームにて状況を説明。

すると、「お客様自身で設定をした、デザインCSSに問題がある」とのご返答を頂きました。

 

「変更はお客様ご自身で」とのことだったので、デスクトップ上の「デザインページ」にて問題箇所を洗い出すことに。

デスクトップ及びモバイルページの、全てのCSSを1つずつ消去してみたところ、モバイルページのカテゴリー覧に原因があることが判明しました

 

f:id:aki20180217:20190611202606j:plain 

従来使っていたカテゴリー覧は上記のプルダウン式。

はてなブログユーザーの間で使われることの多いタイプですね。

 

デスクトップの「デザインページ」より「スマートフォン」ページへアクセス。

「ヘッダ」の「タイトル下」に書き込んでいた、該当プログラムを一斉に削除したところ、ようやく検索ボックスが正常に機能するようになりました。

 

③ 新たなカテゴリー覧のCSSコード

とはいえ、ブログを運営するにあたり、カテゴリー覧の設置は続けたい。

かといって、グローバルナビゲーションでは、細々とし過ぎてユーザーの利便性に欠けてしまう。

 

ということで、同じようなプルダウン式が表示されるよう、別のプログラムを張りつけることてみました。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function() {
console.log($);
var categories;
$.get("/categories").done(
function(data) {
categories = $(data).find(".entry-content ul li a");
console.log(categories);
categories.each(function() {
var categoryUrl = $(this).attr("href");
var categoryText = $(this).text();
$("<option></option>", {
"value": categoryUrl,
"text": categoryText
}).appendTo(".categories-menu select");
});
}
);
$(".categories-menu select").change(function() {
window.location = $(this).find("option:selected").val();
});
});
</script>

<!-- カテゴリ一覧用のHTML -->
<div class="categories-menu">
<select>
<option value="hide">--Category--</option>
</select>
<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>

<!-- カテゴリ一覧のデザイン -->
<style type="text/css">
.categories-menu {
position:relative;
margin:3px;
overflow: hidden;
border:1px solid #333;
}
.categories-menu select{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background:none;
border-radius:0;
display:block;
width:150%;
padding: 0.5em 1em;
margin:0;
border:0;
outline:none;
font-size:16px;
line-height:1.5;
}
.categories-menu .fa-angle-down {
position:absolute;
top:0;
right:0;
display:block;
padding:0.5em 1em;
font-size:20px;
font-weight:bold;
pointer-events: none;
border-left: 1px solid #333;
}
</style>

 

上記のプログラムを先ほどと同様に、「スマートフォン」ページの「ヘッダ」⇒「タイトル下」に書き込むとこのような感じになります。

f:id:aki20180217:20190611202632j:plain

 

若干デザインは変わったものの、元のプルダウン式ではうまく機能しなかった検索ボックスは、難なく稼働するようになりました。

 

④ https化へ移行済みのサイトは要注意

上記のプログラムは、shunさんの運営する「いつ俺」ブログを参考とさせていただきました。

www.ituore.com

 

通常のカテゴリー覧は、自分の手でカテゴリーごとのURLを打ち込むのが一般的。

けれどもこちらのプログラムは、デザインページに書き込むだけで、カテゴリーごとのページを全自動で生成してくれるという優れものです。

 

上記のコードで注意事項があるとすれば通信方式。

2018年7月より必須となったhttpsに仕様を変更している場合、3行目のhttpをhttpsに変更する必要があります

 

ちなみにはてなブログの場合、2018年2月22日以降に開設されたブログは、初めから httpsにて配信されているとのこと。

2月22日以降にブログを始めた方は全員、コードの書き換えが必須ということになりますね。

 

それ以前に作成された方であっても、アドセンスの申請等でhttps化に移行されているのであれば、コードを書き込む際に書き換えを忘れないようにして下さい。

 

▼こちらのページもおススメです

www.aki20180217.com

 

◾︎オフィス・アキ◾︎

◾︎アキ (ブロガー)

HP: http://www.aki20180217.com/

Instagram:https://www.instagram.com/aki20180616/?hl=ja

Twitter:https://twitter.com/aki_20190126

◾︎tomo (イラストレーター)

HP: https://tomo-monodukuri.crayonsite.com/

Twitter:https://twitter.com/xx_moco_xx_2

◾︎Lineスタンプ 好評販売中!store.line.me