スポンサーリンク
スポンサーリンク

AMP用ページを見やすくしたりメニューをつけたり(note風スタイル第7弾)

スポンサーリンク

cocoonのAMP機能で生成している

CocoonテーマのAMP設定でAMPページを生成しています。

通常ページとAMPページの差

デフォルトスタイルだと、AMPページのスタイルは通常ページとだいぶ差があります。

  • ヘッダーロゴが大きい。
    画面を圧迫している
  • モバイルメニューがない。
    検索からの流入が他のページに移動しにくい。

そこで、メニューを追加したいと思います。

ウィジェットにナビゲーションメニューを追加

まずは、ウィジェットでナビゲーションメニューを追加します。

ただ、このままだとメニューが縦長なので、もう少し控えめにスタイルを変更します。

CSSで編集

テーマエディタで「amp.css」でスタイルを編集しました。

ロゴのサイズは、最大幅で小さくします。heightで小さくすると、画像が扁平につぶれました。

/** ロゴを小さく*/
.logo-image amp-img {
	max-height: 3em;
	max-width: 6em;
}

パソコン画面でのブログ記事の最大幅が100%なのも広すぎるので設定しました。これは、ブログ記事だけは1カラムにしているからです。

.no-sidebar .content .main {
  max-width: 770px;
  margin-left: auto;
  margin-right: auto;
}

AMP用のメニューの追加はけっこうコード量が増えました。

ポイントは、
メニューをスクロールに追従するようにしたことと、
アイコンフォントにしたところです。

/** AMP用メニュー*/

.content-top {
  margin-top: 0;
  margin-bottom: 0;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  height: 49px;
  z-index: 100;
}

.widget ul.menu {
  display: flex;
  justify-content: center;
}

.widget_nav_menu ul li a {
  font-size: 18px;
  padding: 0 10px;
  margin-top: 10px;
}

@media screen and (min-width: 1024px) {
  .widget ul.menu {
    display: none;
  }
}

@media screen and (max-width: 880px) {
  .widget_nav_menu {
    background: #fff;
    border-bottom: solid 2px #eee;
  }
  .widget_nav_menu ul li a {
    font-size: 0px;
    padding: 0 24px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4px;
  }
  .widget_nav_menu ul li a:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 24px;
    color: #a08010;
  }
  /*home*/
  .widget_nav_menu ul li:nth-child(1) a:before {
    content: '\f015';
  }
  /*plan*/
  .widget_nav_menu ul li:nth-child(2) a:before {
    content: "\f46d";
  }
  /*blog*/
  .widget_nav_menu ul li:nth-child(3) a:before {
    content: "\f02d";
  }
  /*faq*/
  .widget_nav_menu ul li:nth-child(4) a:before {
    content: "\f059";
  }
  /*query*/
  .widget_nav_menu ul li:nth-child(5) a:before {
    content: "\f095";
  }
}
タイトルとURLをコピーしました