現在テーマ変更に伴う修正作業中です。一部表示崩れがありご不便をおかけしています。

SANGOのスマホヘッダーにミドルメニューを表示させるカスタマイズ方法

いらっしゃいませ三姉妹育児に奮闘中の主婦、あず(oyakocreate)です。

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

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

わたし

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

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

だんな

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

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

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

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

[box class=”box26″ title=”参考リンク”]ストークのスマホ表示でアフィンガーっぽいミドルメニューを表示する方法[/box]

今回は、こちらに載っているコードを参考にして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;
 }

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

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

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

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

コードを変更する場所

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

[box class=”box26″ title=”参考リンク”]HTML,CSS ホームページの背景色や文字色[/box]

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

[box class=”box26″ title=”参考リンク”]RGBと16進数カラーコードの相互変換ツール – PEKO STEP[/box]
.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;
}

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

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

スポンサーリンク

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

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

ミドルメニューをフッターに固定するには、以下のコードをstyle.cssに追記してください。

@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箇所とも同じ数字にしてください。

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

[box class=”box26″ title=”参考リンク”]【SANGO/ストークカスタマイズ】スマホのヘッダーメニューを固定する方法[/box]

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

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

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

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



この記事はここまでです。もしお時間があれば、ぜひ他の記事も読んでいってくださいね。

あず(oyakocreate)でした!


広告
>WordPressテーマはTHE・THOR(ザ・トール)がおすすめ

WordPressテーマはTHE・THOR(ザ・トール)がおすすめ

当ブログで使用しているWordPressテーマは「THE THOR(ザ・トール)」です。

THE THOR(ザ・トール)」は機能が豊富で、記事を書く効率が格段にアップ。税込15,984円で何個のサイト・ブログで使用してもOK。

カスタマイズ知識がなくても、設定項目を1つずつ進めていくだけでおしゃれなブログ・サイトが作成できます。

無料・無期限・無制限でのアフターフォローが受けられるので、安心して使用できるイチオシの有料テーマです。

CTR IMG