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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

対応策

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

対応策

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

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

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

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

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

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

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

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

@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

@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

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

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

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