Upgrade to Pro — share decks privately, control downloads, hide ads and more …

a-blog cms 2020年版 公式テーマの紹介

a-blog cms 2020年版 公式テーマの紹介

a-blog cms zoom up 2020/08で発表する際に使用した「a-blog cms 2020年版 公式テーマの紹介」のスライドです。

スライドで紹介している関連リンクはこちらです。
https://developer.a-blogcms.jp/blog/changelog/theme2020.html
https://mail.yahoo.co.jp/antispam/dmarc.html
https://developer.a-blogcms.jp/blog/kaizen/amp-template-2020.html
https://parashuto.com/rriver/development/img-size-attributes-are-back

Kasumi Morita

August 11, 2020
Tweet

More Decks by Kasumi Morita

Other Decks in Programming

Transcript

  1. <amp-img class="columnImage" src="%{HTTP_ROOT}{path}" alt="{alt}[delnl]" width="{x}" height="{y}" layout="responsive" style="max-width: {x}px;”> </amp-img>

    すでにAMP HTML化されたunit.htmlを⽤意 <img class="js-lazy-load columnImage" src="/images/placeholder/image.svg" data-src="%{HTTP_ROOT}{path}" alt="{alt}[delnl]" width="{x}" height="{y}">
  2. @charset "utf-8"; // acms.css݉༻ @import "../../system/scss/variable"; @import "../../system/scss/mixins"; // siteςʔϚઐ༻

    @import "variables"; @import "mixins"; …ʢলུʣ... // ίϯςϯπ @import "../../system/scss/unit.scss"; @import "entry"; $grid-space : 20px; $unit-gutter : $grid-space; .#{$entry-class} { @each $text-unit in $text-unit-tags { #{$text-unit} { margin-right: ($unit-gutter / 2); margin-left: ($unit-gutter / 2); } } } 1. 余⽩を管理しやすく
  3. @each $unit in $unit-type { .#{$entry-class} [class*="column-#{$unit}"] { @if $unit

    == 'map' { border-right: ($unit-gutter / 2) solid transparent; border-left: ($unit-gutter / 2) solid transparent; box-sizing: border-box; } @else if $unit == 'quote' { margin-right: ($unit-gutter / 2); margin-left: ($unit-gutter / 2); } @else if $unit == 'street-view' { &:not(.column-street-view-inner) { padding-right: ($unit-gutter / 2); padding-left: ($unit-gutter / 2); } } @else { padding-left: ($unit-gutter / 2); padding-right: ($unit-gutter / 2); box-sizing: border-box; } } } 地図ユニット 引⽤ユニット ストリートマップ そのほか @VOJUTDTT
  4. @each $unit in $unit-type { .#{$entry-class} [class*="column-#{$unit}"] { @if $unit

    == 'map' { border-right: ($unit-gutter / 2) solid transparent; border-left: ($unit-gutter / 2) solid transparent; box-sizing: border-box; } @else if $unit == 'quote' { margin-right: ($unit-gutter / 2); margin-left: ($unit-gutter / 2); } @else if $unit == 'street-view' { &:not(.column-street-view-inner) { padding-right: ($unit-gutter / 2); padding-left: ($unit-gutter / 2); } } @else { padding-left: ($unit-gutter / 2); padding-right: ($unit-gutter / 2); box-sizing: border-box; } } } 地図ユニット 引⽤ユニット ストリートマップ そのほか @VOJUTDTT
  5. /* yahoo஍ਤ഑ஔʢ͓·͔ͤʣ */ .column-yolp-auto { margin-bottom: $unit-margin-bottom; } /* yahoo஍ਤ഑ஔʢࠨʣ

    */ .column-yolp-left { float: left; margin-bottom: $unit-margin-bottom; } /* yahoo஍ਤ഑ஔʢӈʣ */ .column-yolp-right { float: right; margin-bottom: $unit-margin-bottom; } /* yahoo஍ਤ഑ஔʢதԝʣ */ .column-yolp-center { display: block; @VOJUTDTT 2. 配置のレイアウトも /* yahoo஍ਤ഑ஔʢதԝʣ */ .column-yolp-center { display: block; float: none; margin-right: auto; margin-bottom: $unit-margin-bottom; margin-left: auto; } /* YouTube഑ஔ (ࠨ) */ .column-youtube-left, .column-video-left { display: inline; float: left; } /* YouTube഑ஔ (ӈ) */ .column-youtube-right, .column-video-right { display: inline;
  6. @each $unit in $unit-type { /* ഑ஔͷελΠϧ */ @each $align-name

    in $align { @if $align-name == left { float: left; text-align: left; } @if $align-name == right { float: right; text-align: right; } @if $align-name == center { display: block; float: none; margin-right: auto; margin-left: auto; text-align: center; } @if $align-name == auto { float: none; } } } } 配置のレイアウトも