sirius_amp｜シリウスへのAMP仕様導入..変更について

シリウスをAMP化する？提案です。

シリウスサイトを構築するhtmlをグーグルのモバイル高速表示するための構造、AMPに
カスタマイズ..というわけではありません...

ここでいう提案とは、AMPのオープンソースをシリウスに入れ込み、シリウス機能で
サイトを構築する..ですね..

シリウス構造をAMP化することもできますが、なんとも..？
基本シリウスデザインでしょ？...興味が湧かない...やる気さえ起きない？...
せっかく作るAMPサイトなら...それなりの仕様..ナイスなデザインサイトでやりたい...

そんな理由...その他で言えばAMPは、構造規制ありなんですね..
構築を間違えばエラーでAMPとして認知されない...（解除面倒ですよ）
そんなことで、AMP対応のオープンソーステンプレートを公開しているampstartより
ファイルをいただいて...シリウスに組み込む仕様のやりようでご案内します...

はっきり言って...この手法が一番簡単...ライバルには教えないで？？？

参照..
https://www.ampstart.com/

でも、シリウスサイト構造をAMP化する方法はありませんか？とのサポート問い合わせも
多くあるので、手順を追加しました..以下ご確認ください..速攻AMP化対応です..
https://www.affiliateno1.com/sirius_mobile_amp/

AMPに関しての導入理由など..云々は、ウェブ上で多く語られておりますので
各事情は当サイトではパスします

ファイルいただいて、シリウスに組み込む...すると当サイトみたいになります..
オープンソースは、見た目ほとんどCSSテンプレート...とすると記事追加など面倒と
思われるでしょうね..
しかし、シリウス機能が合わされば...記事は、シリウスエディタで通常作業のように
書く？ことができるんです..

AMP構造の検証でも完全であることが確認されています..

テスト日時: 2018/11/28、5:47
有効な AMP ページです
このページは、Google 検索結果の AMP 検索機能の対象です..

...と、完全ですね...

ただし、何かしら追記するとか禁止タグ使うと外されますのでご注意..
詳細は、サイト内で記載します...

スポンサー広告

では、興味がわき出でましたらお進みください...

導入に関しての前置き

１...
使用するAMPソース..テンプレートですね..
AMP Startで、配布されているテンプレートを使います..採用理由ですが、グーグル仕様
ですのでエラーなし,,,

以下にある..FOOD & DRINKテンプレートが当サイトの原本になります。
https://www.ampstart.com/templates
他テンプレートでも類似ソースなので応用は可能...
後ほど他のカスタマイズソースも追記いたしますのでお待ちください...

レイアウトデザイン参照...原本を当サイト内に収めて表示させております...
https://www.affiliateno1.com/sirius_amp/home.amp.html

２...
導入する際は、いきなり新ドメイン..では、お勧めしません...後悔しないため？です...
運営中サイトを？..AMP構造は規制ありですので、画像などAMPコードで書き直しが必要..
今までの画像が表示されなくなります..ということ...
また、画像はサーバーから読み込む仕様になりますので、サブディレクトリサイトを
新規...で作ってから...いくつか記事を追加したのち...慣れてからですね...そんな手順で...
お試しください..

３、よくあるミス..禁止タグ
禁止タグに関しては別途記載しますが、最初は気が付かずに...その例で..
HTMLソース内のリンクタグは、リンクコードのみ書き換えるのでミスはしないと理解
しますが、記事内でリンクコード記載する際..シリウス機能は使えません？？
リンクはするが、AMP適正構造とは認識されない...というわけです..

記事内でリンクコード記載する際は、以下こ記述に習ってください...
当サイトのURLだけ自分用にですね..
<a class="amp-nav-link" href="https://www.affiliateno1.com/sirius_amp/home.amp.html"><span style="color:#0A4FFF">テキスト</span></a>

４、モバイル、PCの読み込み分別...
公開するHTMLソースは、どちらのデバイスでも読み込まれる指定値...
分離読み込みを指定する際は、二つのページを作る必要がありますが、用意した
AMPは準拠したHTMLで作成されているので、通常のページとAMPページでURLを
分ける必要がありません..

５、CSSコードについて
シリウスでいえばスタイルシートですね...
AMPでは、body内での指示はないためhead内のstyle amp-customに凝縮され
収まっていますが、オリジナルな仕様を反映する際は、詰めなくてもよいので指定値を
追加記載してください...

後追加コードが優先読み込みされます...
...エラーになる可能性も高いのであまりお勧めはしませんけど？

もしくは、ダウンロードファイル内、stylesheetの指示記載を書き換えてサーバーへ
アップしてください..

CSS指示といってもテンプレート内ですべてが対応されているわけではありません..

head内のstylesheetコードが、グーグルさんから指令を引っ張ってきてもいます..
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700%7CLora%7CLato" rel="stylesheet">

けれど、上例に習い...後付け指示が優先されます...

６..UTF_８指示
ソースの文字コードはUTF_8と記載ありますが、それだけでは指示が到達しないため
シリウスの全体設定で、UTF_8と設定ください..

導入手順

記載のHTML項目は、列折れしておりますが、コピー..張り付ければ整列します...

ソースの導入

ampstart.comよりテンプレートをダウンロードして、解凍してください...
でも、別に使いません...参考程度に利用するだけ...
画像など当サイトみたく使う際は、別ですが？

ソース参照
AMP原本ソース

コードの張替え..
原本を導入しても..シリウスで操作不能...ですので改変しました..が、ここに記載すると
記事理解が不明になるので、ページ移動してください...
導入するAMP_HTMLソース

記載あるAMP　HTMLソースをコピーして、シリウスのテンプレートソースを全て張替え..
てください..
CSS記載ですね...？？
AMPは、外部ファイル採用不能...スタイルシートは外部ファイルなので利用不可...
使いません...読み込みしないということです...
ですので、ここだけですべてのサイト表示が完結するのです...

次は、シリウスエディタに数行ですので記事入れてプレビュー確認してください..

当サイトの表示同様...サイトが確認できたと思いますが？いかがでしょう..

ここまでは、簡単に進められたと理解します..
記事はシリウスエディタで書けば通常に反映される..面倒なし...
そのように改行しているからなんですね...（あたしがです）誇張？

でも、画像の表示方法やメタタグのやりよう..は機能デフォルトでは作動しません..
また、HTML構造を理解..改行しませんと当サイト関連にリンクしてしまいますので、
自己リンクに書き換えを忘れないでくださいね..
他含め合わせて、改行箇所も理解いただけると思いますので詳細解説をご確認ください...

では、HTML構造の仕様とやりようを説明します..

1..AMPの承認
AMP　HTMLのフレームワークであることを承認させるための指令コードなのですが...
<html ?="">となっていましたので...以下
<html amp lang="ja">に書き換えてます...

もう一つのAMPコード...
雷記号でもよいのですが、デベロッパーツールで確認するとエラー警告とマーキング
されていたので上コードにしました..

2..メタタグ
ウェブマスターで所得するメタタグコードは、シリウス設定のウィンドウに記載しても
読み取られませんので、head内に手動記載してください..

3..タイトルなど
サイトタイトル、h1などは、ソース内で、読み込みをシリウス関数に書き換えてあるので
設定画面に通常道理記載ください..ここが検索で読み込まれます..

サイト説明文も同様で記載が検索.ディスクリプションで表示されます..

ヘッダータイトルは、、以下行で手動記載してますが、sirius_ampの記載をシリウス関数
<% pageTitle %>に書き換えても作用します..
<span class="h6 block caps">Welcome to</span><span class="h1 block bold caps my1">sirius_amp</span><span class="h6 block caps">customize_contents_only</span>

4...ページ追加について
AMPでは、HTMLソースごとにページリンクを記載する指示となっていますが、シリウスは
トップ、カテゴリー、エントリーと3つしかございません..ね..
で、配布HTMLも3つ配置が限界...
対応はシリウスコード関数を書き加えて追加ごとに自動変換するようにしました..

ここです..
<link rel="canonical" href="<% permaLink %>">

5...ヘッダー画像について..及び画像読み込みに関して
現在表示されているヘッダー画像..巻末付近の画像は当サイトサーバーのimgファイルを
読み込んでいるのでね..

AMPで、画像を表示する際はヘッダー内..記事内ともAMPコード内にimgを置く必要が
あります..
さらにシリウスコードでは読み込み不能...ですので..
画像も一度サーバーにアップしてからのリンク読み込みとなるので記載コードを
参照ください..

ヘッダー読み込みは以下のコード..上がモバイル用..下がパソコン用ですが、どちらも
画像コードを書き換えてください...

<figure class="ampstart-image-fullpage-hero m0 relative mb4">
<amp-img width="404" height="720" alt="Welcome to Beck & Galo Modern American Cuisine" layout="responsive" src="https://www.affiliateno1.com/sirius_amp/img/hero.jpg" media="(max-width: 415px)"></amp-img>
<amp-img height="720" alt="Welcome to Beck & Galo Modern American Cuisine" layout="fixed-height" src="https://www.affiliateno1.com/sirius_amp/img/hero.jpg" media="(min-width: 416px)"></amp-img>

画像の記事内配置コードは以下例
<amp-img class="mb2" src="URL/img/waffles.jpg" width="300" height="200" alt="" layout="responsive"></amp-img>

6...ハンバーガーメニューボックスで表示される項目について
ハンバーガーメニュー...左サイドにあるアイコン（≡）オンで出現するボックスですが、原本ソースの
≡指示記号では、シリウス上で..?マークに変換？読み込まれませんので入れ替えました。

ここで手動作業になりますが、ページリンク及び外部リンク...ソーシャルリンクなどを
書き換えます..

<header class="ampstart-headerbar fixed flex justify-start items-center top-0 left-0 right-0 pl2 pr4 ">
アイコン記号読み込みコードを書き換えた行
<div role="button" aria-label="open sidebar" on="tap:header-sidebar.toggle" tabindex="0" class="ampstart-navbar-trigger pr2 ">≡</div>

</header>

<amp-sidebar id="header-sidebar" class="ampstart-sidebar px3 " layout="nodisplay">
<div class="flex justify-start items-center ampstart-sidebar-header">
<div role="button" aria-label="close sidebar" on="tap:header-sidebar.toggle" tabindex="0" class="ampstart-navbar-trigger items-start">?</div>
</div>
<nav class="ampstart-sidebar-nav ampstart-nav">
<ul class="list-reset m0 p0 ampstart-label">
7...ページリンク
以下行のリンクコード...#.の箇所.....テキスト...Home例..は書き換えてください..
行追加もできます..
<li class="ampstart-nav-item "><a class="ampstart-nav-link" href="#">Home</a></li>
<li class="ampstart-nav-item "><a class="ampstart-nav-link" href="menu.amp.html">Menu</a></li>
<li class="ampstart-nav-item "><a class="ampstart-nav-link" href="#locations">Locations & Hours</a></li>
</ul>
</nav>

8.....social
SNS関連は、左上のハンバーガメニューをオンすると確認できます..

以下コード内にソーシャルコードが記載ありますので自分用のソーシャルリンクに
書き換えてください..
<ul class="ampstart-social-follow list-reset flex justify-around items-center flex-wrap m0 mb4">
<li>
<a href="#" target="_blank" class="inline-block p1" aria-label="Link to AMP HTML Twitter"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="22.2" viewBox="0 0 53 49"><title>Twitter</title><path d="M45 6.9c-1.6 1-3.3 1.6-5.2 2-1.5-1.6-3.6-2.6-5.9-2.6-4.5 0-8.2 3.7-8.2 8.3 0 .6.1 1.3.2 1.9-6.8-.4-12.8-3.7-16.8-8.7C8.4 9 8 10.5 8 12c0 2.8 1.4 5.4 3.6 6.9-1.3-.1-2.6-.5-3.7-1.1v.1c0 4 2.8 7.4 6.6 8.1-.7.2-1.5.3-2.2.3-.5 0-1 0-1.5-.1 1 3.3 4 5.7 7.6 5.7-2.8 2.2-6.3 3.6-10.2 3.6-.6 0-1.3-.1-1.9-.1 3.6 2.3 7.9 3.7 12.5 3.7 15.1 0 23.3-12.6 23.3-23.6 0-.3 0-.7-.1-1 1.6-1.2 3-2.7 4.1-4.3-1.4.6-3 1.1-4.7 1.3 1.7-1 3-2.7 3.6-4.6" class="ampstart-icon ampstart-icon-twitter"></path></svg></a>
</li>
<li>
<a href="#" target="_blank" class="inline-block p1" aria-label="Link to AMP HTML Facebook"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="23.6" viewBox="0 0 56 55"><title>Facebook</title><path d="M47.5 43c0 1.2-.9 2.1-2.1 2.1h-10V30h5.1l.8-5.9h-5.9v-3.7c0-1.7.5-2.9 3-2.9h3.1v-5.3c-.6 0-2.4-.2-4.6-.2-4.5 0-7.5 2.7-7.5 7.8v4.3h-5.1V30h5.1v15.1H10.7c-1.2 0-2.2-.9-2.2-2.1V8.3c0-1.2 1-2.2 2.2-2.2h34.7c1.2 0 2.1 1 2.1 2.2V43" class="ampstart-icon ampstart-icon-fb"></path></svg></a>
</li>
<li>
<a href="#" target="_blank" class="inline-block p1" aria-label="Link to AMP HTML Instagram"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 54 54"><title>instagram</title><path d="M27.2 6.1c-5.1 0-5.8 0-7.8.1s-3.4.4-4.6.9c-1.2.5-2.3 1.1-3.3 2.2-1.1 1-1.7 2.1-2.2 3.3-.5 1.2-.8 2.6-.9 4.6-.1 2-.1 2.7-.1 7.8s0 5.8.1 7.8.4 3.4.9 4.6c.5 1.2 1.1 2.3 2.2 3.3 1 1.1 2.1 1.7 3.3 2.2 1.2.5 2.6.8 4.6.9 2 .1 2.7.1 7.8.1s5.8 0 7.8-.1 3.4-.4 4.6-.9c1.2-.5 2.3-1.1 3.3-2.2 1.1-1 1.7-2.1 2.2-3.3.5-1.2.8-2.6.9-4.6.1-2 .1-2.7.1-7.8s0-5.8-.1-7.8-.4-3.4-.9-4.6c-.5-1.2-1.1-2.3-2.2-3.3-1-1.1-2.1-1.7-3.3-2.2-1.2-.5-2.6-.8-4.6-.9-2-.1-2.7-.1-7.8-.1zm0 3.4c5 0 5.6 0 7.6.1 1.9.1 2.9.4 3.5.7.9.3 1.6.7 2.2 1.4.7.6 1.1 1.3 1.4 2.2.3.6.6 1.6.7 3.5.1 2 .1 2.6.1 7.6s0 5.6-.1 7.6c-.1 1.9-.4 2.9-.7 3.5-.3.9-.7 1.6-1.4 2.2-.7.7-1.3 1.1-2.2 1.4-.6.3-1.7.6-3.5.7-2 .1-2.6.1-7.6.1-5.1 0-5.7 0-7.7-.1-1.8-.1-2.9-.4-3.5-.7-.9-.3-1.5-.7-2.2-1.4-.7-.7-1.1-1.3-1.4-2.2-.3-.6-.6-1.7-.7-3.5 0-2-.1-2.6-.1-7.6 0-5.1.1-5.7.1-7.7.1-1.8.4-2.8.7-3.5.3-.9.7-1.5 1.4-2.2.7-.6 1.3-1.1 2.2-1.4.6-.3 1.6-.6 3.5-.7h7.7zm0 5.8c-5.4 0-9.7 4.3-9.7 9.7 0 5.4 4.3 9.7 9.7 9.7 5.4 0 9.7-4.3 9.7-9.7 0-5.4-4.3-9.7-9.7-9.7zm0 16c-3.5 0-6.3-2.8-6.3-6.3s2.8-6.3 6.3-6.3 6.3 2.8 6.3 6.3-2.8 6.3-6.3 6.3zm12.4-16.4c0 1.3-1.1 2.3-2.3 2.3-1.3 0-2.3-1-2.3-2.3 0-1.2 1-2.3 2.3-2.3 1.2 0 2.3 1.1 2.3 2.3z" class="ampstart-icon ampstart-icon-instagram"></path></svg></a>
</li>
<li>
<a href="#" target="_blank" class="inline-block p1" aria-label="Link to AMP HTML pin trest"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="28.5" viewBox="0 0 43 51"><title>pinterest</title><path d="M8.134 18.748c0-1.6.2-3 .8-4.4.5-1.4 1.2-2.6 2.2-3.6.9-1 2-1.9 3.2-2.6 1.2-.8 2.5-1.3 3.9-1.7 1.5-.4 2.9-.5 4.4-.5 2.2 0 4.3.4 6.2 1.4 1.9.9 3.5 2.3 4.7 4.1 1.2 1.9 1.8 3.9 1.8 6.2 0 1.4-.1 2.7-.4 4-.2 1.3-.7 2.6-1.2 3.8-.6 1.2-1.3 2.3-2.2 3.2-.8.9-1.8 1.7-3.1 2.2-1.2.6-2.5.9-4 .9-1 0-1.9-.3-2.9-.7-.9-.5-1.6-1.1-2-1.9-.1.5-.3 1.4-.6 2.4-.3 1.1-.4 1.7-.5 2-.1.3-.2.9-.4 1.6-.3.7-.4 1.2-.6 1.5-.1.3-.4.7-.7 1.3-.3.6-.6 1.2-1 1.7-.3.5-.7 1.1-1.3 1.8l-.3.1-.2-.2c-.2-2.2-.3-3.6-.3-4 0-1.3.2-2.8.5-4.4.3-1.7.8-3.7 1.4-6.2.6-2.5 1-3.9 1.1-4.4-.5-.9-.7-2.1-.7-3.6 0-1.2.4-2.3 1.1-3.3.8-1.1 1.7-1.6 2.8-1.6.9 0 1.6.3 2.1.9.4.6.7 1.3.7 2.2 0 .9-.3 2.3-1 4.1-.6 1.8-.9 3.1-.9 4 0 .9.3 1.6 1 2.2.6.6 1.4.9 2.3.9.8 0 1.5-.2 2.2-.5.6-.4 1.2-.9 1.6-1.5.5-.6.9-1.3 1.2-2 .4-.8.6-1.5.8-2.4.2-.8.4-1.6.5-2.4.1-.7.1-1.4.1-2.1 0-2.5-.8-4.4-2.3-5.8-1.6-1.4-3.6-2.1-6.1-2.1-2.8 0-5.2 1-7.1 2.8-1.9 1.9-2.9 4.2-2.9 7.1 0 .6.1 1.2.3 1.8.2.6.4 1.1.6 1.4.2.3.4.7.5 1 .2.3.3.5.3.6 0 .4-.1.9-.3 1.6-.2.6-.5 1-.8 1 0 0-.1-.1-.4-.1-.7-.2-1.3-.6-1.9-1.2-.5-.6-1-1.3-1.3-2-.3-.8-.5-1.6-.7-2.4-.2-.7-.2-1.5-.2-2.2z" class="ampstart-icon ampstart-icon-pinterest"></path></svg></a>
</li>
<li>
<a href="#" target="_blank" class="inline-block p1" aria-label="Link to AMP HTML E-mail"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="18.4" viewBox="0 0 56 43"><title>email</title><path d="M10.5 6.4C9.1 6.4 8 7.5 8 8.9v21.3c0 1.3 1.1 2.5 2.5 2.5h34.9c1.4 0 2.5-1.2 2.5-2.5V8.9c0-1.4-1.1-2.5-2.5-2.5H10.5zm2.1 2.5h30.7L27.9 22.3 12.6 8.9zm-2.1 1.4l16.6 14.6c.5.4 1.2.4 1.7 0l16.6-14.6v19.9H10.5V10.3z" class="ampstart-icon ampstart-icon-email"></path></svg></a>
</li>
</ul>

</amp-sidebar>

6..記事について
原本はCSSソースでしたので、通例記事を書くならアトムなどのテキストエディタで
ソース内記載となるのですが、シリウスは合わせて3ソースしかなく...適合しません..
ですので、シリウスの関数を入れ込み...通常の記事挿入ができるようにしました。

以下にシリウス関数
以下にシリウス関数
<% textTitle1 %>
<% textBody1 %>
を配置...操作画面でいう記事1ですが、記事2も入れたいなら自己判断で追加してください

追加した箇所
<main id="content" role="main">
<article class="px3">

<% textTitle1 %>
<% textBody1 %>

7..文字..
原本ではあちらのフォント指定のため日本語フォントは枯れすすき体で...なんともね？..
メイリオフォント体の指定コードを書き足して形態を指示しています..

記事フォント
body {
font-family: 'メイリオ', Helvetica, 'Hiragino Kaku Gothic Pro', sans-serif;
}

こちらは見出し..
h2、3の太字、細字は300の数値変更で変えられます

h1, h2, h3, h4, h5, h6, .title, dt {
font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,Verdana,'ＭＳＰゴシック',sans-serif;
font-weight: 300;

8．.記事終盤以下に表示される画像について
画像は、以下のコードで読み込まれます..
画像コードを書き換えてください..

画像内に表示されるテキストは、以下を書き換えます..
Happy Hou Mon-Fri 5PM

<figure class="ampstart-image-with-heading m0 relative mb4">
<amp-img src="https://www.affiliateno1.com/sirius_amp/img/bar.jpg" width="600" height="450" alt="Happy Hour Monday through Friday 5 PM" layout="responsive"></amp-img>
<figcaption class="absolute right-0 bottom-0 left-0">
<header class="ampstart-image-heading px2 py2 line-height-4"><h2 class="h1 bold">Happy Hour</h2><p class="h4">Mon-Fri 5PM</p></header>
</figcaption>
</figure>

9..フッターについて
フッターは、上項目に続いています...
原本では、住所や企業への記載でしたが...簡単に書き換えてます..
リンクコードにでも書き換えてください

<h2 id="locations" class="my4 theme2-anchored">Locations & Hours</h2>
<div class="col col-12 sm-col-6 mb4">
<h3 class="mb1">ibaraki_ken</h3>
<p class="mb0">funyu_hitatiomiya<br>web factory<br></p>
<p class="mb0">Mail<br>aizawajidouhanbaiki@lime.ocn.ne.jp<br></p>
</div>
<div class="col col-12 sm-col-6 mb4">
<h3 class="mb1">menu</h3>
<p class="mb0">https://www.affiliateno1.com/<br>https://www.affiliateno1.com/sirius.customize/<br></p>
<p class="mb0">https://www.ailibrary.jp/<br>https://www.affiliateno1.com/designer/<br></p>
</div>

10..Photo Galleryについて
こちらも上からの続きです..
一度画像をシリウスで読み込みサーバーアップしてからお使いください..
画像コードを書き換えてください..

<h2 id="gallery" class="my4 theme2-anchored">Photo Gallery</h2>
<amp-image-lightbox id="lightbox" layout="nodisplay"></amp-image-lightbox>
<amp-carousel class="my2 mxn3" height="200" layout="fixed-height" type="carousel">
<amp-img src=".../img/hero.jpg" width="300" height="200" alt="Dining area" on="tap:lightbox" role="button" tabindex="0"></amp-img>
<amp-img src=".../img/bar.jpg" width="267" height="200" alt="Bar area" on="tap:lightbox" role="button" tabindex="0"></amp-img>
<amp-img src=".../img/waffles.jpg" width="300" height="200" alt="Caramel Banana Waffles" on="tap:lightbox" role="button" tabindex="0"></amp-img>
<amp-img src=".../img/soup.jpg" width="300" height="200" alt="Pumpkin Soup" on="tap:lightbox" role="button" tabindex="0"></amp-img>
<amp-img src=".../img/steak.jpg" width="300" height="200" alt="Steak" on="tap:lightbox" role="button" tabindex="0"></amp-img>
<amp-img src=".../img/pie.jpg" width="300" height="200" alt="Key Lime Pie" on="tap:lightbox" role="button" tabindex="0"></amp-img>
</amp-carousel>
</article>
</main>

11..フッターのサイトリンクについて
サイトの一番下ですね..
タグ内にシリウスのフッター内リンクコード入れてるだけです...
このままで良いとも思いますが、サイトマップなど必要なら...シリウスよりコードコピー..
追加してください..

<footer class="ampstart-footer flex flex-column items-center px3 ">

ここまで...

後追加したコード

ソース公開以降、追加したコードの記事をご覧ください...

記事巻末にページのメニューと更新履歴が確認できると理解しますが、当初は
自動リンクを機能が作成するので、コード自体がAMP制限に払拭するかなと
控えていたんですが...テスト検証でもOKでした..

サイト内記事が多くなれば、ハンバーガーメニューでは掲載しきれなくなる..
そんなときの対応です..

というわけで、掲載したい場合は、<% textBody1 %>直下にコードを張り付けてください..

<% textTitle1 %>

<% textBody1 %>

<div id="menu">

<% freeSpace3 | tag_replace(h4,div class="title") %>
<% pickupEntry %>
<% siteMenu2 %>
<% subMenu %>
<% freeSpace4 | tag_replace(h4,div class="title") %>

</div>

<% whatsNew | str_replace(<a,<span><a) | str_replace(</li>,</span></li>) | tag_put(<div class="title"><span>更新履歴</span></div>) | tag_insert(div id="whatsnew") %>

<span style="color:#FF0A0A">参考</span>
記事内上部に表示させたい場合は、
<% textTitle1 %>
ここに貼り付け...ですよ...
<% textBody1 %>

カテゴリーHTMLに貼り付ける際は以下...

<% categoryListTitle | tag_insert(h3) %>
<div id="categorylist">
<% AQEntries %>
<article class="catbox">
<div class="title"><a href="<% permaLink %>"><% pageTitle %></a></div>
<div class="body">
<% pageThumbnail | tag_insert(a href="{% permaLink %}") | tag_insert(div class="thumb") %>
<% pageBody | tag_strip | str_replace( ,) | oneline | shorten(200,true) | tag_insert(p) %>
<div class="more"><a href="<% permaLink %>">続きを読む</a></div>
</div>
</article>
<% /AQEntries %>
</div>

<% else %>

<% AQNewEntries %>
<article class="blog">
<% pageThumbnail | tag_insert(a href="{% permaLink %}") | tag_insert(div class="thumb") %>
<div class="title"><a href="<% permaLink %>"><% pageTitle %></a></div>
<div class="info"><time><% pagePublicDate | parseDatetime(yyyy/MM/dd HH:mm:dd) %></time> <% parentPageList_all | tag_insert(span class="plist") %></div>
<div class="body"><% pageBody | tag_strip | str_replace( ,) | oneline | shorten(150,true) | tag_insert(p) %><div class="more"><a href="<% permaLink %>">≫この記事の続きを読む</a></div></div>
</article>
<% /AQNewEntries %>

スポンサー広告

まだ、書き足りないことに気が付きましたら追記いたします..

更新履歴

(2018/11/25)AMPメニューの一覧用　テンプレートを更新しました

Happy Hour

Mon-Fri 5PM

Locations & Hours

ibaraki_ken

funyu_hitatiomiya
web factory

Mail
aizawajidouhanbaiki@lime.ocn.ne.jp