コピペでSANGOのモバイルメニューをミドルメニューにする＆フッターに固定するカスタマイズ

どうも、あず（@yuuki_azusa）です

「STORK(ストーク)」を使っていたときに、くまぺさんの記事を見てアフィンガーみたいなミドルメニューを導入していたのですが、SANGOに変えてなくなってしまいました。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

注意
キャッシュが残っている内は反映されないことが多くあります。

コードミスなのかキャッシュのせいなのかわからない場合は、「外観」→「カスタマイズ」→「追加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;
}

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

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

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

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

コードを変更する場所

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

HTML,CSS　ホームページの背景色や文字色

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

RGBと16進数カラーコードの相互変換ツール – PEKO STEP

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

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

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

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

  • #ffffff

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

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

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

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

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

  • 3つ目の#ffffff

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

アニメーションについて

css 
.mobile-nav ul {
animation: none;
}

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

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

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

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

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

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;/*（マイナスは消さない）*/
}
}

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

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

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

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

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

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

この記事を読んだ人にオススメ

最後まで読んでくれてありがとうございました。あず（@yuuki_azusa）でした

コメントを残す

前の記事

【とび森amiibo+】村を売却する方法、条件、金額の決まり方…
:)