シリウスデフォルト2カラム..AMP構造に変更する手順
シリウスで用意されるデフォルトの2カラムテンプレートをAMP認証に適合したHTML
構造に改変..カスタマイズする手順ではありません...お話しするだけで面倒なので？
無礼な言葉..すみません..説明が下手なのでが理由です..
すでに対応済みのAMP HTMLソースを公開しておりますので、どこをどうしたのか？
ここは、こうしたという項目ごとの説明をここの記事で分割理解くださいね...
基本は、AMP プロジェクトで公開されるオープンソースをシリウス構造に組み入れ
有効化認証済みの仕様ですので、ミスなく進めれば短時間で完了すると？
思われます....
やりようはいくつかあるが、シリウスに合わせたものの一つとしてご理解ください。
解説は２カラムのデフォルトで進めますが、備えあるすべてのテンプレート当てはめる
ことは可能かと思います..多分? 全ての検証はしておりません...
パソコン、モバイルともどちらでも読み込まれる指定値でありAMP専用のファイルを
別に作る必要はありません..
(パソコン、モバイル用と二つのサイトファイルを作成して分離読み込みさせる手立ても
ございますが...後ほど記事追加します）
当ページでHTMLパーツの解説..どこをどう変えたのか？変えるべき理由等々..
詳細を構造の上から下へ順に、記載しますので要参照してください..（大事なので）
全てご確認いただければ、AMP対応構造にサイト切り替えは..さほど面倒でもない..
とご理解いただけると..
デモサイトは、当サイト...と認識願いますね..
素早く簡単に導入するならソースを公開しておりますので、あなたのサイトのHTMLを
張り替えれば...即座に変換完了しますけど..その他書き換え作業も少しあるので記事を
最終まで確認してから進めてください...
（不用意な導入はエラー出まくり..ますぜ）
解説についてですが、他サイトでも随時AMP対応で利用しておりますので、何かしら
気が付いたこと..もしくは修正すべき個所など発見しましたら修正報告記事をここに
追加してまいります..
当サイトはAMP HTML改変済みで認証OK...レイアウトもデフォルト...
テスト日時: 2018/12/08、0:13
有効な AMP ページです
このページは、Google 検索結果の AMP 検索機能の対象です
.....シリウスでもできる...AMPですね。
このスタイルでよければGO...
では、シリウスHTMLをAMPに切り替えた..が項目へ進みましょう..
ですがAMPprojectからソースをいただいて、どこをどう変えるなどとお話ししていると.
.長文になってしまい..
あたしが混乱してしまいますので、公開しているソースを原本にして進め参ります。
張り替えようコピーソース...現時点の当サイトをDEMOスタイルと認識ください...
https://www.affiliateno1.com/sirius_mobile_amp/entryfile.html
ここからのコンテンツはすべて公開ソースに導入済みですので、新たに組み入れる
必要はありません...自己改変の参考にしてください..
シリウスHTMLをAMP構造に改変する
上から...
最上行ですが、シリウス原本ソースはほとんど書き換えることになります
配布ソースは書き換える必要はありません..
<!doctype html>
<html amp lang="ja"> amp指示は、⚡ 記号でもよい
タイトル..シリウス関数で自動表示にしました、
AMP指示では、各ページごとにURLを配置しなければならないルールあり..
<% permaLink %>に書き換えてます
<head>
<meta charset="utf-8">
文字コードは、UTF-８に記載ありますが、シリウスの特性上、サイトオプションの
文字コードもUTF-８にしませんと文字化け？..変更ください..
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title><% pageTitle %></title>
<link rel="canonical" href="<% permaLink %>">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
以下は、サイト上部のメニューのCSSを読み込んでいます
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
スタイルシート
AMP HTMLではシリウスに収まるスタイルシートは外部ファイルとして読み込みしない
制御ありなので、head内に配置換えすることになります..
<style amp-custom>内にスタイルシート、CSSは収めるのです..
しかし、AMPではCSS容量が、50,000バイト内に収めなければならない制限あり..
デフォルトですと80000クラスで、大幅なコード削除をします..
配布ソースのCSSは、普段使わないようなコードは大幅に削除しておりますの
で使えない機能もいくつかございます..
デフォルトのスタイルシートと比較して理解ください..
CSS行詰めしておりません
/*! Bassplate | MIT License | http://github.com/basscss/bassplate */
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}but
上例参照
AMPでは、速攻ファイル呼び出しを行うためバイト軽量する行詰めコードにするが通例..
行詰めにしなければAMP化できないと当初理解していたのですが、埋めずとも制限内に
収まるのであれば、シリウスCSS形式をそのまま使えます..
行詰めにしてしまうとその後のカスタマイズが調面倒...なのでパス..という理由もあり？
以降行詰めされる方は自己判断で願います...ね？
追加記事
行詰めもCSS指示が必要で追加しなければならないとなればやるしかございません..
シリウス機能を使えばですね...容易に行詰めはできます..
サイドメニューより...
AMPCSSの簡単行詰め方法を追加してますのでご確認ください...
何かしら指定を追加すると容量オーバーするかもしれません？
その際は、使わないものを捨てる...（覚えといてね）
サイドバーの位置について
シリウスでテンプレート選択時、サイドバーの位置は右に指定できますね..
当サイトは、右サイドバーですが、テンプレート選択時に右位置指定で読み込みました
のでスタイルシートは右指定..に改変されています..
左に変更する際は、スタイルシート改行してください..
テンプレートカラー
スタイルシートで色替え...
ヘッダーのサイド背景色指定箇所
サイトカラーを好みに変更してもヘッダー背景カラーが変更されない場合...
以下のカラーコードを書き換えてください..
header {
padding:10px;
background: #f4f4f4;
}
追記
スタイルシートCSS各所コードは、私の理解で項目削除しましたが、デフォルトを取り
込んで、自身の好みに合わせ調整も当然可能です...
ご注意
自身でスタイルシートを新規で入れる際は、!important;の ! は削除...
//padding-left: 2.85em; の // は削除しませんとAMP読み込みエラーとなります..
h1タイトルの表示を消す
左最上部のh1タイトルテキストを非表示にする際は、以下項目の
display: inline-block;をdisplay: none;に書き換えてください..
#top h1 {
display: inline-block;ここです
padding: 0;
}
bodyへ進みます
body内ですが、ナビメニューの位置指定が理由で、
直下にナビボタンコード配置
<body>
なぜか？シリウス機能、グローバルメニューが設定しても表示されません..
いろいろ試してもNG..
ですので、ハンバーガーメニューアイコン入れました..詳細はもう少し下部に記載..
<button on="tap:slide-menu.toggle" id="slide-button" class="ampstart-btn caps m2"><strong><strong>≡</strong></strong></button>
<amp-sidebar id="" layout="nodisplay" side="left">
アイコンタップで開くメニュー一覧は以下の箇所..リンク書き換えてください..
</amp-sidebar>
<amp-sidebar id="slide-menu" layout="nodisplay" side="left">
<button on="tap:slide-menu.toggle" class="ampstart-btn caps m2 close-button">
<i class="fa fa-times-circle-o" aria-hidden="true"></i> <span>CLOSE</span>
</button>
<div><a class="amp-nav-link" href="https://www.affiliateno1.com/sirius_mobile_amp/">トップページ</a></div>
<div><a class="amp-nav-link" href="https://www.affiliateno1.com/sirius_mobile_amp/category1/">AMP導入前の予備知識｜記事内装飾、画像等への対応?</a></div>
<div><a class="amp-nav-link" href="https://www.affiliateno1.com/sirius_mobile_amp/entryfile.html">シリウス専用のAMP HTMLソース公開</a></div>
<div><a class="amp-nav-link" href="https://www.affiliateno1.com/sirius_amp/">sirius_amp｜シリウスへのAMP仕様導入..変更について</a></div>
<div><a class="amp-nav-link" href="https://www.affiliateno1.com/">メインサイト</a></div>
</amp-sidebar><!--/slide-menu-->
<div id="wrapper">
<div id="top">
<header>
<% pageTopic3 %>
<!-- ★ヘッダー画像エリアここから★ -->
<div id="header">
ヘッダーコード書き換えてください
<amp-img width="1000" height="350" layout="responsive" src="https://www.affiliateno1.com/sirius_mobile_amp/img/header.jpg" alt="" layout="responsive"></amp-img>
<div id="headertxt">
<% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(h2 class="title") %>
<% pageDescription2 | str_replace(id="headertext",class="desc") %>
</div>
</div>
<!-- ★ヘッダー画像エリアここまで★ -->
</header>
</div>
</div>
<!-- ★ヘッダー画像エリアここまで★ -->
</header>
</div>
</div>
ヘッダー画像は、トップ、カテゴリー、エントリーで3つの種類..まで..
ここで、ハンバーガーメニューと収める一覧メニューのカスタマイズ説明...
現在の作動..右にメニュー、タップで左からスライドオープンの指定です..
ハンバーガーアイコンの位置指定及びカラー変更等は、スタイルシート終盤を確認..
button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
#slide-menu {
z-index: 99999999999;
width: 280px; /*開く横幅*/
height: 100%;
background: #fff;
overflow: scroll;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
font-size: 16px;
color: #000;
}
#slide-button {
font-size: 30px;
line-height: 30px;
border: none;
background: skyblue;/*背景カラー*/
}
#slide-button {
position: absolute;
top: 5px;
right: 30px;/*アイコン右位置 左指定箇所*/
height: 30px;
z-index: 99999999999;
padding: 5px;
}
.close-button {
width: 100%;
border: none;
font-size: 16px;
}
試行錯誤したこと...参照
グローバルナビの表示不能？
グローバルメニュー、ハンバーガーメニューの表示ができませんでしたので、いくつか
他のコード入れてみましたが...全てスマホサイズでは解除されてしまう状況でした。
で、AMPprojectに用意されるサイドメニューscriptを配置してナビ表示できるように
しております。
ナビメニューが中央に表示されておりますね？
ナビコードをheader内に置けば左位置に固定されたのですが、AMPテストで検証すると
AMPスクリプトは、body内でなければ有効な構造ではないと...相手にしてくれません..
で、致し方なくbody直下に配置してます..
メタタグ記入について...
google.search-consoleで所得するメタタグの入力ですが、全体設定のウィンドウに
入れ込んでも...読み込み不可..見当たりませんと？
ですので、head内に貼り付けましたら認識されました...参照ください..
関連事項
AMP対応には、スタイルシート容量が制限されるわけですが、シリウスでは以外に
commons table textのスタイルシートも装飾系で使うため備えございますけど
当コンテンツで進めれば...いずれも読み込みませんので使用不能です..
何か使う事情があるなら..指定項目だけ抜粋しAMPスタイルシートへ張り付けて下さい..
ここまで...
説明を当てはめれば、他テンプレートでも対応可能かと思いますが...
ご理解できましたでしょうか？
何かしら気が付きましたら追記いたします..