モバイルデザイン⑤（記事内におしゃれメニュー）

アメブロカスタマイズ

※この記事では、パソコンページでも上のメニューが表示されます。
また、スクロールしていくと固定される位置もちょっと変更してあります。

モバイルページをカスタマイズするための『ステップ⑤』です。

パソコンページには表示されず、モバイルページにのみメニューを表示し、スクロールすると上の方に固定される、おしゃれメニューの設置手順をご覧になれます。
※「ブログデザインの設定」で『GALAXY』を使用しています。

この記事を読む前に

下記の記事で、モバイルデザインの仕組みを理解してください。
モバイルデザイン③（モバイルページの仕組み）

設置手順

下記のメニュー用CSSを記事を『HTML表示』に切り替えて、先頭にコピーします。

<style type="text/css">
@media screen and (orientation:portrait) and (max-width:568px),screen and (orientation:landscape) and (max-width:896px){
  /* オリジナルメニュー */
.skin-body2, ._2o1ihBDz{
  overflow: visible!important; /* メニューを記事の先頭で固定させるためのおまじない */
}
.navi-wrap {
  display: block!important; /* モバイルの時だけ表示 */
  margin: 0;
  padding: 0;
  width: 100%; /* 記事の横幅いっぱいにする */
  position: sticky; /* メニューを記事の先頭で固定させるためのおまじない */
  top: 40px; /* メニューを記事の先頭で固定させるためのおまじない */
  z-index: 100; /* メニューを記事の先頭で固定させるためのおまじない */
  letter-spacing: -.4em; /* メニュー項目が改行されるのを防止 */
}
.navi-body>span {
  display: inline-block;
  margin: 0;
  padding: 0;
  width: 25%; /* 《重要》100%÷(メニューの数)にすること */
  text-align: center;
  background: #3B5998; /* メニューの色 */
  letter-spacing: normal; /* メニュー項目が改行されるのを防止を解除 */
}
.navi-body>span a {
  display: block;
  text-decoration: none;
  font-size: 100%;
  font-weight: bold;
  color: #ffffff; /* 文字の色 */
  line-height: 40px; /* ボタンの高さ */
  border-right:1px #fff solid;/* ボタンの隙間 */
}
.navi-body>span:last-of-type a{
  border-right:none;
}
}
</style>

同様に下記のコードを記事のお好きな場所にコピーします。

<div class="navi-wrap" style="display:none;">
  <nav class="navi-body">
    <span><a href="https://ameblo.jp/アメバID/">トップ</a></span>
    <span><a href="https://ameblo.jp/アメバID/entrylist.html">記事一覧</a></span>
    <span><a href="https://ameblo.jp/アメバID/theme-10112188856.html">テーマ</a></span>
    <span><a href="http://msg.ameba.jp/pub/send/index?toAmebaId=アメバID">メッセージ</a></span>
  </nav>
</div>

※アメバIDの部分は、ご自分のIDに変更してください。