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

Transcript

1. 2020 公式テーマの紹介 年 版 有限会社アップルップル 森⽥かすみ #ablogcms
2. 主な変更点 • Site2020テーマのトップページを1カラムに • フォームの設定 • AMPテンプレートの追加 • ユニットのスタイル調整 ࡉ͔͍఺͸
   ։ൃϒϩάͰʂ
3. τοϓϖʔδΛ
   1ΧϥϜʹมߋ͠·ͨ͠ Site2020ςʔϚ
4. 実際に直近でライセンスが更新された 50サイトを対象に リサーチしてみました
5. τοϓϖʔδ͕ 1ΧϥϜߏ੒ 31/50αΠτ
6. τοϓϖʔδ͕ 1ΧϥϜߏ੒ 31/50αΠτ
7. KVΛݻఆʹ͍ͯ͠Δ 30/50αΠτ
8. KVΛݻఆʹ͍ͯ͠Δ 20αΠτ͸KV͕ͳ͔ͬͨΓɺεϥΠμʔʹ ͍ͯͨ͠Γ… 30/50αΠτ
9. ʮʓʓʹ͍ͭͯʯ ʮʓʓͱ͸ʯΛ ܝࡌ͍ͯ͠Δ 14/50αΠτ
10. ʮʓʓʹ͍ͭͯʯ ʮʓʓͱ͸ʯΛ ܝࡌ͍ͯ͠Δ 14/50αΠτ
11. Entry_BodyΛ τοϓʹ࢖ͬͯΔ 8/50αΠτ
12. Entry_BodyΛ τοϓʹ࢖ͬͯΔ 8/50αΠτ
13. lp@site2020 Entry_Bodyで1カラムの ページを作るなら！ 余談
14. ϑΥʔϜͷઃఆΛ
    ݟ௚͠·ͨ͠ Site2020 Beginner2020 Bootstrap2020
15. DMARCରࡦ ͳΓ͢·͠ϝʔϧͱೝࣝ͞Εͯ͠·͍ɺϝʔϧ͕૬खʹಧ͔ͳ͘ͳΔՄೳੑ͕͋Γ·͢ɻ
16. https://mail.yahoo.co.jp/antispam/dmarc.html
17. https://mail.yahoo.co.jp/antispam/dmarc.html DMARCͱ͸ʁ 「なりすまされたメールの扱い（ブロック、迷惑メール判定など）を設定」 することで、ユーザーの皆様になりすまされたメールが届かないようにする ための技術のこと。 - 記事「Yahoo!メール ドメイン認証技術「DMARC」について」より
18. ؅ཧը໘͔ΒϑΥʔϜͷૹ৴಺༰͸֬ೝͰ͖Δ͚ΕͲɺ؅ཧऀѼϝʔϧΞυϨε ʹ͸ϝʔϧ͕ಧ͍͍ͯͳ͍ʢJDMPVEͳͲͷҰ෦ͷϝʔϧΞυϨεͷΈʣ a-blog cms のサイトで実際に起こっていた現象 サイト訪問者 お問い合わせフォーム サイト 訪問者⾃⾝宛 サイト 管理者宛
19. ؅ཧը໘͔ΒϑΥʔϜͷૹ৴಺༰͸֬ೝͰ͖Δ͚ΕͲɺ؅ཧऀѼϝʔϧΞυϨε ʹ͸ϝʔϧ͕ಧ͍͍ͯͳ͍ʢJDMPVEͳͲͷҰ෦ͷϝʔϧΞυϨεͷΈʣ a-blog cms のサイトで実際に起こっていた現象 サイト訪問者 お問い合わせフォーム サイト 訪問者⾃⾝宛 サイト 管理者宛 届かない
20. 対応策
21. ϑΥʔϜID͔Β΋ όϦσʔλʔొ࿥ ςϯϓϨʔτ্͚ͩͩͱɺ։ൃπʔϧ͔Βमਖ਼͞ΕΔՄೳੑ΋ʜɻ
22. 対応策
23. AMPରԠͨ͠
    AMPςϯϓϨʔτΛ
    ௥Ճ͠·ͨ͠ Blog2020
24. くわしくはブログ記事をご覧ください https://developer.a-blogcms.jp/blog/kaizen/amp-template-2020.html
25. systemϑΥϧμʹ AMPʹରԠͨ͠unit.html͕௥Ճ AMPରԠ͠΍͍͢Α͏ʹTZTUFNϑΥϧμʹ௥Ճ͞Ε͍ͯ·͢
26. <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}">
27. ը૾ͷwidthͱheightΛ ٻΊ΍͘͢ͳΓ·ͨ͠ すべてのユニットの横幅と⾼さが求められるように、 そして新しい校正オプション[imageRatioSizeH]と[imageRatioSizeW]の追加
28. https://parashuto.com/rriver/development/img-size-attributes-are-back
29. Ϣχοτͷ SCSSઃܭͷݟ௚͠ acms.css Site2020 Beginner2020
30. 602→319 @VOJUTDTTͷߦ਺͕େ෯ʹݮΓ·ͨ͠
31. @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. 余⽩を管理しやすく
32. @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
33. @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
34. /* 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;
35. @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; } } } } 配置のレイアウトも
36. ありがとうございました フィードバックお待ちしております！ #ablogcms