トップページ
AMP導入前の予備知識|記事内装飾、画像等への対応?
シリウス専用のAMP HTMLソース公開
AMP検証テスト
AMPオープンソースTP仕様導入
サイト内ファイルの構築?
AMP化する理由
AMP専用youtube
ページスクロールボタン
メインサイト

AMPCSSの簡単行詰め方法

スポンサー広告

CSS行詰めは簡単にできます

サイトの構造を指示するCSSですが、当サイト原本ではデフォルトの記載そのままで
行詰めしておりませんね..

 

この中です..
<style amp-custom>

 

普通のコードですね...
==================================================
基本スタイル
==================================================
*/
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}

 

body {
margin: 0;
}

 

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
display: block;
}

 

CSSを行詰めしなくともそのまま使える...そんな理由で難しくしていない...

 

しかし、もっと指示CSSを追加したいと願うならですね..
行詰めしませんと容量オーバーしてしまうかもしれません...(隙間有りなので)

 

 

行詰め行
/* ================================================== 基本スタイル ================================================== */ html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } progress { vertical-align: baseline; } template, [hidden] { display: none; } a { background-color: transparent; -webkit-text-decoration-skip: objects; } a:active, a:hover { outline-width: 0; } abbr[title] { border-bottom: none; text-decoration:

 

 

さて、そんなときはどうすればよいか?
手動作業で隙間を埋めますか?

 

面倒ありき作業の追加?
しかし、シリウス機能を使えば簡単に行詰めができるのでアナウンスしておきますね..

 

 

手順

 

1、CSSを記事内に貼り付ける...
スタイルシート記載のCSS行をシリウスエディタへ貼り付ける..

 

2、改行設定の変更..
改行なしにチェック

 

3、サイトオプションで適合フォントの設定
文字サイズ指定を0にする.

 

プレビューで確認してみましょう...行詰め確定です??

 

コピーしてHTML...<style amp-custom>に貼り付ければ完了…

 

 

 

後々のCSS改行.について...

 

後々カスタマイズを行うこともあるでしょう..
でも、行詰めですと何が何やら...?

 

その際は、原本並びへ戻します..

 

<style amp-custom>内に貼り付けた記載を再度記事内エディタに貼り付けて
pタグ改行しますと...整列しますので、個所を修正して再度改行なし...
MTMLへ戻しましょう...

 

 

行詰めするソフトもどこかにあるようですが、シリウス機能で進めれば面倒をおさえ
素早く対応できるでしょう..

 

また、ネットで配布されているAMPテンプレートなど使用する際は、そのままコピーして
シリウスエディタへ貼り付け..Pタグ開業のままプレビューで確認できます..