【Simplicity】スマホ版の検索窓をページ上部に表示してみた

シェアする

  • このエントリーをはてなブックマークに追加

積年の課題だったモバイル(スマホ)の検索窓を目立たせるカスタマイズをしました。




スマホで記事が探しづらい・・

しばしば公言している通り、僕はこのブログを備忘録や自分へのリマインダーとして活用しています。

日々の気づきを記事にして誰かのお役に立つと同時に、過去の自分から自分自身が日々ヒントをもらい直すという使い方です。

その意味では僕自身が自分のブログの1ユーザなわけですが、その目線で見たときに課題だったのが「スマホでの記事の探しづらさ」でした。

検索窓をサイドバー内のウィジェットに入れていたため、スマホで見るとページ下部までスクロールしないといけない状態でした。

検索窓を上部に表示する方法

カスタマイズ方法は「Simplicity モバイル 検索窓」で検索をかけるとすぐに見つかりました。

Simplicityのモバイル表示で、「検索窓」をタイトル下に持ってくる方法

こちらのサイトの「「header.php」にブチ込め!」にあるこちらのコードを、親テーマ(Simplicity2)の編集で追記しました。

最後の方、

1
<!-- main -->

の上に、

<?php if ( is_mobile() ): ?>
<?get_template_part(‘searchform’) ?>
<?php endif; ?>

と入れれば、

実際にスマホの画面で確認してみます。

バッチリです。

無事、検索窓をタイトル下の最上部に持ってくることができました。これでキーワード検索しまくりです。(僕が)

(以前、phpをいじってサイトが真っ白になったことがあったので、少しドキドキしましたが、今回は問題なくホッとしました)

まずは自分が使いやすいサイトにしていく

今回のカスタマイズであらためて思ったのは、自分のブログの一番のユーザは自分自身ということです。

まずは最大ユーザである自分自身が使いやすいサイトに磨いていくことが、結果的に閲覧ユーザの皆さんにとってのユーザビリティにも繋がっていくはずです。

特に今後はますますスマホからの閲覧比率が高まっていくことを考えると、カスタマイズもスマホでの最適化を最優先に考えていく必要があります。

それでは、また。

スポンサーリンク
AD




AD




シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
AD