• ゲーム
    【とび森amiibo+】村を売却する方法、条件、金額の決まり方を徹底解説!
    2018年03月27日
  • あずのおすすめ
    書評|フリーランスを代表して申告と節税について教わってきました。
    2018年02月28日
  • 妊娠・出産・育児
    お知らせ|「ハロー葉酸サプリ」様に出産後の体験談を寄稿しました
    2018年03月25日
  • あずのおすすめ
    無名の主婦ブロガーがpolcaで10万円の支援をしてもらえた理由と今思うこと
    2017年08月16日
  • ブログ運営
    SANGOの内部リンクボックスにラベルをつけたりするカスタマイズ
    2018年02月09日
  • ブログ運営
    コピペで簡単にできるSANGOのカスタマイズ方法まとめ
    2018年02月09日
  • ゲーム
    【とび森】ゆうたろうが登場する魔法のランプの入手方法は?
    2018年03月27日
  • 妊娠・出産・育児
    男の育児休暇取得の流れと、実際に休んで思い知った3つのこと
    2018年03月26日
  • ゲーム
    【とび森amiibo+】アプデで楽になった住民厳選!指定追い出しも出来る!
    2018年03月27日
  • ブログ運営
    読まれるブログは読みたいブログだし、まずは存在を認識してもらうことが大切
    2018年02月08日
SANGOのスマホヘッダーにミドルメニューを表示させるカスタマイズ方法
▼ どこよりもわかりやすいブログの育て方
▼ シンプルライフに憧れるあなたへ

こんにちは
主婦ブロガーのあず(yuuki_azusa )です。

このブログでは以前「STORK(ストーク)」を使用していました。

そのときは、くまぺさんの記事を見てアフィンガーみたいなミドルメニューを導入していたのですが、SANGOに変えてなくなってしまいました。

あずさん

SANGOでモバイルミドルメニューを導入する方法は公開されていないし…やり方わかんないし…

 

ということで諦めていたんですが、

ずんずん
ミドルメニューあった方が良かったな。

 

と言われたので、どうにかこうにかSANGOでモバイルミドルメニューを付けてみました。

いろいろ試行錯誤していたんですが、元々ヘッダーにあるモバイルスライドメニューをCSSでいじるだけでできたので、コードを載せておきます。

STORK(ストーク)」でミドルメニューを付けたい方は、くまぺさんの記事をご覧ください。

参考リンク ストークのスマホ表示でアフィンガーっぽいミドルメニューを表示する方法

今回は、こちらに載っているコードを参考にしてSANGO用に修正しました。くまぺさん、ありがとうございます!

 

スポンサーリンク

SANGOにミドルメニューをつける

今回コピペでできるのは、SANGOでアフィンガーみたいなミドルメニューを付けることです。

色を変えたい場合はカラーコードを変更する必要がありますので、説明を読んでくださいね。

注意
適用されるのはモバイル(スマホ)表示のみです。

SANGOにミドルメニューをつける方法

まず、管理画面から「外観」→「メニュー」を選んでください。

コンテンツを6つ追加して、「スライドメニュー(モバイルのみ)」にチェックをいれて、メニューを保存します。

本来、このメニューはスマホから見たときにヘッダーに1行で表示されるスライドメニューなのですが、今回はこの表示を変えてしまいます。

style.cssにコードをコピペする

追記する場所は子テーマのstyle.cssです。

親テーマに書くと、テーマのアップデートがあるたびに修正が必要になります。

注意
キャッシュが残っている内は反映されないことが多くあります。
コードミスなのかキャッシュのせいなのかわからない場合は、「外観」→「カスタマイズ」→「追加CSS」に追記して確認してみてください。 こちらは即時反映されます。

以下のコードをコピペして使ってください。

/*モバイルヘッダーメニューをアフィンガーみたいにする*/
 .mobile-nav ul {
 animation: none;
 }
 .mobile-nav li {
 display: inline;
 }
 .mobile-nav {
 height: 80px;
 background: rgba(255,158,181); /*メニューの背景色*/
 border-top: 1px solid #ffffff; /*枠線の色*/
 border-left: 1px solid #ffffff; /*枠線の色*/
 }
 .mobile-nav li a {
 display: block;
 font-weight: bold;
 vertical-align: middle;
 line-height: 20px;
 font-size: 11px; /*文字サイズ*/
 width: 33.3333%; /*33.3333%で3等分*/
 border-bottom: 1px solid #ffffff; /*枠線の色*/
 border-right: 1px solid #ffffff; /*枠線の色*/
 list-style: none;
 text-align: center;
 color: #ffffff; /*文字の色変更*/
 padding: 10px;
 float: left;
 box-sizing: border-box;
 text-decoration: none;
 }

コピペして適用させたら、スマホから表示を確認してください。

文字が長すぎる場合は、「外観」→「メニュー」から先ほど設定したメニューを開き、各コンテンツのタイトルを自由に変更することができます。


▼ 癒し犬たろすけのLINEスタンプ ▼
sponsord by. @tatsuya141free

ミドルメニューの色を変える

コピペ用のコードでは、ピンク系の色になっているので、自分のブログに合うように自由に変更してください。

コードを変更する場所

カラーコードは以下のサイトから好みの色を見つけてみてください。

参考リンク HTML,CSS ホームページの背景色や文字色

カラーコードとrgbの変換をしたい場合は、以下のサイトがオススメです。

参考リンク RGBと16進数カラーコードの相互変換ツール - PEKO STEP

.mobile-nav {
background: rgba(255,158,181); /*メニューの背景色*/
border-top: 1px solid #ffffff;  /*枠線の色*/
border-left: 1px solid #ffffff; /*枠線の色*/
}

 

rgba(255,158,181)

ミドルメニュー全体の背景色を指定しています。

私はこのメニューをそのままフッターに固定し、うっすら透過させているのでrgbで指定していますが、もちろんカラーコードでも大丈夫です。

カラーコードを入力する場合は#を忘れないように注意してください。

#ffffff

枠線の色を指定しています。

あとでもう一度枠線の色指定は出てきますので、すべて同じ色で指定してください。

.mobile-nav li a {
border-bottom: 1px solid #ffffff; /*枠線の色*/
border-right: 1px solid #ffffff;  /*枠線の色*/
color: #ffffff; /*文字の色変更*/
}

 

1つ目と2つ目の#ffffff

こちらも枠線の色を指定しています。

上記のものと合わせて4箇所すべてを同じ色に指定してください。

3つ目の#ffffff

文字の色を指定しています。

アニメーションについて

.mobile-nav ul {
animation: none;
}

 

を消すと、元々のスライダーメニューのときのように、横にフワッと動くアニメーションが適用されます。

私はメニューが押しにくくなるのがイヤで、コードを書くことでアニメーションを切りましたが、お好みでどうぞ。

メニューをフッターに固定する

現在、私はミドルメニューをフッターに固定しています。

@media only screen and (max-width: 767px) {
 .mobile-nav {
 position: fixed;/*フッター固定*/
 bottom: 0;
 left: 0;
 width:100%;
 }
 /*ミドルメニュー分コンテンツを上げる*/
 #container{
 padding-bottom:77px;
 }
 /*TOC+から飛ぶリンクのズレを修正*/
 h2 span, h3 span {
 padding-bottom: 77px;
 margin-bottom: -77px;/*(マイナスは消さない)*/
 }
 }

同じように、フッター固定メニューにしたい場合は、以下のコードを子テーマのstyle.cssにコピペしてください。

 

自分で数字を調整する場合は、3箇所とも同じ数字にしてください。

フッター固定は、りらさんの記事を参考にミドルメニュー用に修正しました。

参考リンク 【SANGO/ストークカスタマイズ】スマホのヘッダーメニューを固定する方法

SANGOのメニューをカスタマイズしてみよう

今回はSANGOのモバイルメニューを、アフィンガーのようなミドルメニューにする方法をご紹介しました。

スマホの表示メニューをわかりやすくすることで、回遊率アップも見込めますので、ぜひチャレンジしてみてください。

今までに書いたSANGOのカスタマイズ方法は「コピペで簡単にできるSANGOのカスタマイズ方法まとめ」にまとめているので、良ければ参考にしてみてください。

[kanren id=458] 最後まで読んでいただき、ありがとうございましたあず(yuuki_azusa ) でした。
投資に興味がある方はコチラも ▼
ブログ運営者さんにオススメ ▼

アシレーヌ
スポンサーリンク


WPカスタマイズの関連記事
  • SANGOの横長記事一覧カードをPC表示でも1列にするカスタマイズ
  • WordPress|投稿一覧画面に記事IDを表示するカスタマイズ
  • コピペでOK!記事タイトルの文字数カウンターを設置する方法
  • SANGOの内部リンクボックスにラベルをつけたりするカスタマイズ
  • コピペで簡単にできるSANGOのカスタマイズ方法まとめ
  • SANGOのサイドバーの横幅をコピペで変えるカスタマイズ方法
コメントを残す