[Đ] WordPressテーマ「Stinger3」のスマホ表示のヘッダーアコーディオンメニュー内に検索ボックスを設置する方法

公開日: : 最終更新日:2014/10/06 iPhone, Stinger3, WordPress, ブログカスタマイズ, ブログネタ


スポンサーリンク

ども。花粉症気味の、まつだい(@matsudai23)です。
※2014/3/10 追記あり


スポンサーリンク

Stinger3は素晴らしい神テーマ!しかし…

WordPressテーマのSTINGER3公式サイト

WordPressテーマ「Stinger3」はすごく素晴らしいテーマなのですが、PC表示はデフォルトの状態でもとてもカッコイイのですが、スマホ表示に多少難有り、と感じた方も多いのではないでしょうか?

このブログもそうなのですが、今やスマホからのアクセスが、PCのアクセスを上回るなんていうサイトも少なくないです。
そんなわけで今回から「Stinger3」のスマホ表示も少しずつカスタマイズしていく事にします。

デフォルトの検索ボックスの位置は下すぎる!

Stinger3の仕様上、スマホ表示では検索ボックスがかなり下の方に表示されてしまいます。
そこで、検索ボックスをヘッダー付近に配置しようと考えたのですが、できれば訪問者がサイトを訪れて、最初に目にする範囲、いわゆるファーストビューはあまりゴチャゴチャしていない方がいいのではないか?とも考えました。

見せたくない?んじゃ隠そ!!

っという結論に達しましたw

さて、どこに隠しましょうか?そう!勘の良いあなたならもうお分かりですね?
(タイトルに書いてあるけどw)

Stinger3はスマホ表示の、一番トップに「アコーディオンメニュー」を持っています。
これですね↓

画像に四角で囲んだあたりに検索ボックスを配置して、必要な時はウニョン♪と表示させるという感じにしてみましょう!

作業は2ステップだけ

さて、その方法について解説します。
そんなに難しくはないです。

編集するのは「header.php」と「smart.css」です

大まかな手順を先に話しておきます。

1、header.phpのアコーディオンメニューに検索ボックスを配置する。
2、そのままでは配置がメチャクチャなのでsmart.cssで整える。

作業を大きく分けるとこの2ステップだけになります。
ね?あなたにもできる気がしてきたでしょ?w

では実際に作業していきます。

「header.php」の該当箇所にに検索ボックスを配置する

はじめに言っておきます。この工程の所要時間は約1分ですw

まず管理画面の外観>テーマ編集からか、テキストエディタで「header.php」を開きます。
その中から以下のような記述を探して下さい。「アコーディオン」と検索するとすぐ見つかります。

見つけたら↑の14行目と15行目の間に

とコピペして追記します。

これでアコーディオンメニューの中に検索ボックスが追加されます。
ただ、このままではレイアウトが崩れていますので次で整えて完成です。

「smart.css」から1行消して、2行足して、幅の数値を変える

1行消す

「smart.css」で以下の記述を探して下さい。

↑の2行目の

を削除します。

2行足す

今消した部分に

↑の2行を追加する

幅の数値を変える

このままでは検索ボックスの幅が長すぎて検索ボタンが変な場所に行ってしまうので、短くします。

今編集した部分のすぐ上に↓のような記述が有ると思います。

↑の2行目が検索ボックスの幅です。「250px」という数値を「165px」くらいに変えてみてください。

【追記】ーーーーーーーーーー
書き忘れたのですが、この作業を終了すると、ページ下部のデフォルトの検索ボックスの見た目も同じように変わってしまいます。(たぶん短くなってると思います…w)
なので、それが気になる人で、HTMLやCSS等の、WordPressテーマ編集の知識のある人は、別途CSSで装飾し直す感じでお願いします。

そういった知識の無い人や、テーマ編集の自信が無い人は、そのまま使うのが賢明です。ごめんなさい!

やり方を説明し出すと長くなるので、今回オレは説明を省くッ!!w
----------

終了です。早速表示を確認してみましょう。

早速スマホで見てみて下さい。

オレはiPhone5で見てますので幅や余白を上のように設定しましたが、それ以外のスマホでは、まだ表示が崩れている場合も有りますので、お好みの数値に変えて試してみてください。

また、CSS等の知識の有る方は検索ボックスや検索ボタン等の見た目も、好みにカスタマイズしてみてください。

もし良かったらコメントやTwitter、Facebookページ等で、結果なんかを教えてくれると嬉しいです。
ブログのURLを教えて貰ったら見に行ったりとかしちゃいますw

まとめ

PCでの表示とスマホでの表示をいちいち確認したりするのは面倒ですが、PCよりスマホ表示の方が構造がシンプルでわかりやすいので、皆さんも是非、挑戦してみて下さい!
オレもこれからドンドン、PCでの表示も、スマホでの表示もカスタマイズしてみたいと思います。
また機会があればこうやって紹介、解説していきたいと思ってますのでどうぞよろしくお願いします。

そして、もしよろしければ記事のシェアをお願い致します。
Twitterでのシェア、Facebookのいいね!、Facebookページのいいね!、はてブ追加等、大歓迎です!!

それでは最後まで読んで頂いてありがとうございました。まつだい(@matsudai23)でした。


スポンサーリンク

ブログを書くのに使ってるアプリたち

暮らしをおトクにかえていく|ポイントインカム
  • まつだい
    (@matsudai23)

    へっぽこモブロガー

    熊本県在住。1984年(昭和59年)生まれ。
    妻子持ち(男1人、女2人、妻1人)の親バカへっぽこモブロガー。
    Apple、Mac、iPhone厨。
    MacやiPhone、嫁と子供が好きな、嫁バカ&親バカのおっさんが暇な時書いてると思って貰えばだいたい合ってます。
    僕についてもっと詳しく知りたいという方は居ないとは思いますが一応自己紹介ページをご用意してますので御覧ください。