出てきたメニューサンプルページ1、ヘッダーに公式スクリプトを読み込ませる2、メニューを別ファイルで作る必須カスタマイズ二カ所アイコンのurlとcssメニュー本体のリンクお好みでカスタマイズ3、AMPテーマファイル本体を編集ステップ1お好みでステップ2表示したいところにコピペ必要なのはこれら参考AMPにサイドバーをつけたい人?過去に公開したamp関連記事がアクセス多いので、久々に書いてみます。スマホに特化したAMPページではサイドバーはスペース的につけられません。公式にはスクリプトが用意されています。サイドバーというより、横からスライドして出てくるメニューです。メニューアイコンを上部に表示させておき(別の方法も可)、クリックすると出てきます。採用しているサイトは殆ど見かけないのですが、特に問題もなく動作するのでもっと普及してもいいのでは?動的な動きのないampページが一気にクオリティがあがる感触。テーマファイルを編集するスキルと編集場所さえ突き止められるなら簡単です。WordPress、テーマーはsimplicity2でのカスタマイズ例となります。右上のアイコンをタップするとメニューが出てくる。本文に覆いかぶさる形で左から動的に出現。アイコンを再びタップしても閉じれます。サンプルページAMPサイドバーサンプルページAMPサイドバーサンプルページslackline.jpこれがサンプルページです。サンプルページは通常の静的なHTMLにしています。このブログはamp化してませんので、サンプルページ以外には実装していません。PCだと右上のメニューアイコンにマウスオーバーしてもポインター変化しませんが、クリックすればメニューも出てきます。1、ヘッダーに公式スクリプトを読み込ませるampには公式でサイドバー用のスクリプトが用意されています。それをAMPのヘッダー部分で読み込ませます。AMPのテーマファイルに記載してください。head内部でjsファイルが読まれている部分を探して付近に追加してください。src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>simplicityというテーマの場合はsingle-amp.phpを編集します。子テーマには同胞されていないので、親テーマから持ってきます。2、メニューを別ファイルで作るamp-menu.phpという名前でテーマファイルを新規に作成します。FTPでアップロードしてください。今回はメニューだけ個別に編集しやすいように新規ファイルを作成する手段を採用していますが、single-amp.phpに直接記載しても問題ありません。その時は3のステップ1のコードの場所にこれを記載してください。以下のコードをコピペして自分のブログ用にリンクするコードを書きます。on='tap:sidebar1.close'>閉じる</button></p></amp-sidebar>必須カスタマイズ二カ所アイコンのurlとcssアイコンの画像は自分で用意する必要があります。tabindex=”0′′></amp-img></div>アイコン画像url部分を変更してください。何でもいいって人はこれをダウンロードしてご自身のサイトにアップロードしてください。暗い色のブログでは使えません。amp用のcss部分(ヘッダー部分に出力される)に以下をコピペします。位置は微調整してください。10px;}simplicityというテーマの場合はamp.cssを編集します。メニュー本体のリンク<li></li>の部分を自身のサイト用に変更してください。メニューの本体部分になります。<li>以外にも自由に記載可能です。cssでの装飾はampルールにのっとりヘッダー内に直接記載する必要が当然あります。id=’sidebar1′layout=”nodisplay”side=”left”>ここがメニュー内部</amp-sidebar>このleftはメニューが出てくる方向です。次にampページを直接吐いているテーマファイルを編集します。simplicityというテーマの場合はsingle-amp.phpです。ステップ1新規作成したamp-menu.phpを読み込むように記載します。以下のコードを読み込ませてください。layout=”nodisplay”となっているのでどこに描写してもHTMLでは表示されませんが、<div>の内側に書くとampエラーと警告されるので</body>の直前がいいでしょう。//追加AMPメニュー?>お好みでステップ2右上のアイコンとは別にボタンでも開ける。アイコンは必須じゃない。サイドメニューを開くボタンを別に記載したい場合は以下をコピペしてください。on='tap:sidebar1.open'>サイドメニューを開く</button></p>テキストなどボタン以外spanなどでも可能。ヘッダー部分においてもいい。on='tap:sidebar1.open'>サイドメニューを開く</span></p>必要なのはこれら必要なのはヘッダーのスクリプト、出すボタン、メニュー部分、メニュー部分に消すボタン。サイドバーで出てくるメニューは自由に記載できるので工夫次第で様々なことができると思います。サイドバーを設置するAMPのamp-sidebarは、サイドバーを設置するための要素です。ボタンをクリックするとサイドからメニューが表示されます。サンプルコード、デモなど。最新情報をお届けします。歩き方2009年よりスラックライン乗ってます。日本山岳ガイド協会公認ガイド(自然II、登山III、山岳I)、登山用品店店員(元)、平尾台ボランティアガイド、NACS-J自然観察指導員など。アウトドア好きでキャンプ、洞窟、植物好き。コメントをキャンセルメールアドレスが公開されることはありません。初心者も歩けるようになるスラックライン入門ガイド-メイン記事リンクスラックラインって難しそうでしょ?自分も数年前に雑誌で初めて見た時にそう思いました。近所には丁度良さそうな公園があるし、キャンプ場でも遊べそう。なにより子供も喜びそうだか...slackline.jp2019.10.012020年スラックライン大会(イベント)情報2020年のスラックライン大会、イベントこのページでは主にスラックラインのコンペを紹介しています。ギボンカップや日本オープン、フルコンボワールドカップなどのです。CalculaterJSFedジャッジングフォーム最近のコメント歩き方2020.02.12コメントありがとうございます。高速化設定でJavaScript縮小化をしてい...「/util」というサーチコンソールの大量のエラーの原因はcocoonテーマのプラグインだった通りすがりの記事編集者2020.02.12今日私のブログでもutilのエラーが多く気持ち悪かったために、御指南通りテーブル...「/util」というサーチコンソールの大量のエラーの原因はcocoonテーマのプラグインだった歩き方2020.01.11コメントありがとうございます。調べて訂正しておきます。