シリウスエディタで記事進行する際の注意ごと
シリウスのhtml構造をAMP対応HTMLに改変すると今までの通常理解のやりようが一部
できなくなる..
できることはできるんですけど、PCで見る限りはエラーではない...
...けれど...AMP認証されない...モバイル閲覧優先枠に入れない...という事情があるので
参照ください。
scriptへの対応
AMPでは、Google提供のscript以外使用できません..
ですので、現行サイトでいろんなscript導入している際は、取り外す必要があります。
利用可能なscriptは、https://ampbyexample.com/をご確認ください..
当サイトでも詳細を後ほど追記しますが、今しばらくお待ちください..
記事更新スロー？
記事を新規で追加した際は、案外早く数時間でインデックスされる例も経験して
ございますが、記事を更新した際は...
パソコン画面では確認できますが、モバイルでの更新反映は数日要しますね..
何日要すかは正確に言えません...いつのまにか...経験不足？
新規記事や更新する際は、途中で不用意なとりあえずのサーバーアップはしない..
未完成状態がAMP認証されてしまうと完成記事アップしても時間を要すから..
理由は、AMPサイトファイルは高速表示するためにAMP認証されれば専用サーバーに
自動保管されることで瞬間表示される..
とは、貴方のサーバーから読み込まれるのではない..
でも、更新などの認知のため原本サーバーも確認してくれるんですけど毎日ではない
理由で誤差がある..と理解しておきましょう..
頻繁に..毎日記事追加される、訪問者も多いサイトあれば上例は当てはまらく..
スピーディな更新が反映されます..
禁止タグへの対応
AMP化する際、現運営中のサイトですと禁止タグの削除、改行作業は面倒ですけど
やらねばならない...とご理解くださいね...
禁止タグは、多く指定されますが、シリウス機能で自動装飾するタグで説明します...
警告級の注意ごと
scriptを多用しているカスタマイズてんこ盛りのサイトの場合ですね..
AMP対応するに至り...頭痛くなるほど苦労するかもしれません？
scriptを排除し...次にCSS指示行の削除でしょう...
私例でいえば...カスタマイズやりすぎの現行サイトはAMP化はあきらめ..ノンカスタム
サイト＆新規はAMP化...
もしくは、トップページだけNONAMPのままにしてカテゴリ、エントリはノーマル状態に
近いカスタムにしてAMP化...これでも行けますね..
また、scriptてんこ盛りのトップページをAMP対応とする際は、ノンカスタムの
AMP用HTMLファイルに同記事書いて...専用リンクでモバイルページを
読み込ませています..
一つ目
borderが使えません..AMP対応コードは未認識（代用はあるかもしれません）
<hr style="border-bottom:solid 1px #CCC" border="0" />
対応策として言えば...見出し h2 ｈ3で区切りをつける,,,はいかがでしょう..
見出しで区切り付けている例をよく見かけますので行ってます..
ただ、h3見出しと同じでデザインで...なんともね？と思われるならh5の見出しをh3の
見出しコードに切り替え...
スタイルを改変してサイトカラー以外のイメージに置き換える...
h5を書き換えました.. これでいけば borderの代用で使えるかと？
DEMO
CSSのh5行にh3の指示コードを入れ替え配置..以下参照
#main h5 {
background-color: #777;
border-bottom: 1px solid #fff;
border-radius: 3px;
-webkit-box-shadow: 1px 1px 3px #888;
box-shadow: 1px 1px 3px rgba(0,0,0,.3);
color: #fff;
font-size: 16px;
line-height: 1.5;
margin: 0 0 10px 0;
padding: 10px;
height: 19px;
position: relative;
clear:both;
}
#main h5 {
padding:3px;
}
ここまで..
上コードの作用は、パソコンでの反映です..
モバイル画面では未指定のためh3デザインに切り替わってしまいます..ね..
メディアコードをもう一つ追加すれば作用します...
以下記載は公開コードに入れ込んでおりませんので必要なに応じて
ご利用ください..
@media screen and (min-width: 768px) {
#main h5 {
background-color: #777;
border-bottom: 1px solid #fff;
border-radius: 3px;
-webkit-box-shadow: 1px 1px 3px #888;
box-shadow: 1px 1px 3px rgba(0,0,0,.3);
color: #fff;
font-size: 16px;
line-height: 1.5;
margin: 0 0 10px 0;
padding: 10px;
height: 19px;
position: relative;
clear:both;
}
#main h5 {
padding:3px;
}
}
二つ目
リンクコード..書き換えませんと使えません
以下はデフォルトコード...
<a href="https://www.affiliateno1.com/">シリウスカスタマイズ | オンラインマニュアルLibrary</a>
対応コード
class="amp-link"を書き足してください
<a class="amp-link" href="https://www.affiliateno1.com/sirius_amp/">シリウスカスタマイズ | オンラインマニュアルLibrary</a>
三つ目
画像コードも書き換えます...
imgのタグは、読み込まれませんので amp-を加えた記述に書き換えます..
縦横ともサイズ指定必須,,,
シリウス機能で読み込まれるコード
<img src="<% pageDepth %>img/header.jpg" style="width:300px;" alt="" />
ここで訂正になります..
過去記事でのコードは、HTML内で記述であったため記事内に配置しても
反応しない...画像が表示されませんでした...申し訳ございませんでした。
AMPprojectを参考に記述をシリウスに当てはめまして正常作動完了..
以下例にレスポンシブで表示されます...AMPテストでもOK...
画像コード
<amp-img alt="A view of the sea"src="<% pageDepth %>img/ooi1.jpg"width="400"height="375"layout="responsive"></amp-img>
ooi1.jpgをあなたの画像コード、及びサイズ等好みに書き換え..張り替えてください..
基本概念ありでミスしたこと...<% pageDepth %>をURL記載にすると..
.なぜか表示されなくなります..
以降、気が付いたことありましたら追記いたします。