Slide 1

Slide 1 text

2020 公式テーマの紹介 年 版 有限会社アップルップル 森⽥かすみ #ablogcms

Slide 2

Slide 2 text

主な変更点 • Site2020テーマのトップページを1カラムに • フォームの設定 • AMPテンプレートの追加 • ユニットのスタイル調整 ࡉ͔͍఺͸ ։ൃϒϩάͰʂ

Slide 3

Slide 3 text

τοϓϖʔδΛ 1ΧϥϜʹมߋ͠·ͨ͠ Site2020ςʔϚ

Slide 4

Slide 4 text

実際に直近でライセンスが更新された 50サイトを対象に リサーチしてみました

Slide 5

Slide 5 text

τοϓϖʔδ͕ 1ΧϥϜߏ੒ 31/50αΠτ

Slide 6

Slide 6 text

τοϓϖʔδ͕ 1ΧϥϜߏ੒ 31/50αΠτ

Slide 7

Slide 7 text

KVΛݻఆʹ͍ͯ͠Δ 30/50αΠτ

Slide 8

Slide 8 text

KVΛݻఆʹ͍ͯ͠Δ 20αΠτ͸KV͕ͳ͔ͬͨΓɺεϥΠμʔʹ ͍ͯͨ͠Γ… 30/50αΠτ

Slide 9

Slide 9 text

ʮʓʓʹ͍ͭͯʯ ʮʓʓͱ͸ʯΛ ܝࡌ͍ͯ͠Δ 14/50αΠτ

Slide 10

Slide 10 text

ʮʓʓʹ͍ͭͯʯ ʮʓʓͱ͸ʯΛ ܝࡌ͍ͯ͠Δ 14/50αΠτ

Slide 11

Slide 11 text

Entry_BodyΛ τοϓʹ࢖ͬͯΔ 8/50αΠτ

Slide 12

Slide 12 text

Entry_BodyΛ τοϓʹ࢖ͬͯΔ 8/50αΠτ

Slide 13

Slide 13 text

lp@site2020 Entry_Bodyで1カラムの ページを作るなら! 余談

Slide 14

Slide 14 text

ϑΥʔϜͷઃఆΛ ݟ௚͠·ͨ͠ Site2020 Beginner2020 Bootstrap2020

Slide 15

Slide 15 text

DMARCରࡦ ͳΓ͢·͠ϝʔϧͱೝࣝ͞Εͯ͠·͍ɺϝʔϧ͕૬खʹಧ͔ͳ͘ͳΔՄೳੑ͕͋Γ·͢ɻ

Slide 16

Slide 16 text

https://mail.yahoo.co.jp/antispam/dmarc.html

Slide 17

Slide 17 text

https://mail.yahoo.co.jp/antispam/dmarc.html DMARCͱ͸ʁ 「なりすまされたメールの扱い(ブロック、迷惑メール判定など)を設定」 することで、ユーザーの皆様になりすまされたメールが届かないようにする ための技術のこと。 - 記事「Yahoo!メール ドメイン認証技術「DMARC」について」より

Slide 18

Slide 18 text

؅ཧը໘͔ΒϑΥʔϜͷૹ৴಺༰͸֬ೝͰ͖Δ͚ΕͲɺ؅ཧऀѼϝʔϧΞυϨε ʹ͸ϝʔϧ͕ಧ͍͍ͯͳ͍ʢJDMPVEͳͲͷҰ෦ͷϝʔϧΞυϨεͷΈʣ a-blog cms のサイトで実際に起こっていた現象 サイト訪問者 お問い合わせフォーム サイト 訪問者⾃⾝宛 サイト 管理者宛

Slide 19

Slide 19 text

؅ཧը໘͔ΒϑΥʔϜͷૹ৴಺༰͸֬ೝͰ͖Δ͚ΕͲɺ؅ཧऀѼϝʔϧΞυϨε ʹ͸ϝʔϧ͕ಧ͍͍ͯͳ͍ʢJDMPVEͳͲͷҰ෦ͷϝʔϧΞυϨεͷΈʣ a-blog cms のサイトで実際に起こっていた現象 サイト訪問者 お問い合わせフォーム サイト 訪問者⾃⾝宛 サイト 管理者宛 届かない

Slide 20

Slide 20 text

対応策

Slide 21

Slide 21 text

ϑΥʔϜID͔Β΋ όϦσʔλʔొ࿥ ςϯϓϨʔτ্͚ͩͩͱɺ։ൃπʔϧ͔Βमਖ਼͞ΕΔՄೳੑ΋ʜɻ

Slide 22

Slide 22 text

対応策

Slide 23

Slide 23 text

AMPରԠͨ͠ AMPςϯϓϨʔτΛ ௥Ճ͠·ͨ͠ Blog2020

Slide 24

Slide 24 text

くわしくはブログ記事をご覧ください https://developer.a-blogcms.jp/blog/kaizen/amp-template-2020.html

Slide 25

Slide 25 text

systemϑΥϧμʹ AMPʹରԠͨ͠unit.html͕௥Ճ AMPରԠ͠΍͍͢Α͏ʹTZTUFNϑΥϧμʹ௥Ճ͞Ε͍ͯ·͢

Slide 26

Slide 26 text

Slide 27

Slide 27 text

ը૾ͷwidthͱheightΛ ٻΊ΍͘͢ͳΓ·ͨ͠ すべてのユニットの横幅と⾼さが求められるように、 そして新しい校正オプション[imageRatioSizeH]と[imageRatioSizeW]の追加

Slide 28

Slide 28 text

https://parashuto.com/rriver/development/img-size-attributes-are-back

Slide 29

Slide 29 text

Ϣχοτͷ SCSSઃܭͷݟ௚͠ acms.css Site2020 Beginner2020

Slide 30

Slide 30 text

602→319 @VOJUTDTTͷߦ਺͕େ෯ʹݮΓ·ͨ͠

Slide 31

Slide 31 text

@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. 余⽩を管理しやすく

Slide 32

Slide 32 text

@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

Slide 33

Slide 33 text

@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

Slide 34

Slide 34 text

/* 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;

Slide 35

Slide 35 text

@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; } } } } 配置のレイアウトも

Slide 36

Slide 36 text

ありがとうございました フィードバックお待ちしております! #ablogcms