2017/12/16 MT東京 LT用

1. 細かすぎて伝わらない
イザナキ仕様

2. ENTRY NO.1
他の箇所に影響を与えないCSS設計

3. ＼すべての記事セットの生みの親ァッ!!／
.article_body
記事セット全体の親要素をつくる

4. .article_body {
&__section {…} //セクション
&__row {…} //記事セット
&__col {…} //カラム
}
BEMを採用

5. ENTRY NO.2
ver.1のCSSの見直し
外注のコーダーの学習コストダウン

6. //article_body全体
@import 'article_body_function.scss';
@import 'article_body_style.scss';
//セクション
@import 'article_section.scss';
//row,column
@import 'article_body_row.scss';
//記事セット
@import ‘set_heading.scss’;
@import ‘set_wysiwyg.scss';
階層・記事セットごとに
ファイルを分割

7. zw
さらに、触っていいところ
触って良くないところで分割
//article_body全体
@import '/core/article_body_function.scss';
@import '/customize/article_body_function.scss';
@import '/customize/article_body_style.scss';
//セクション
@import ‘/core/article_section.scss';
@import '/customize/article_section.scss';
//row,column
@import '/core/article_body_row.scss';
@import '/customize/article_body_row.scss';
//記事セット
@import ‘set_heading.scss’;

8. 余白は記事セット構成の階層に合わせて、
基本4段階に設定
ENTRY NO.3

9. セクション
80px

10. 行=記事セット
40px

11. カラム
20px

12. 要素
15px
※行間のマージンでもあり、
使用頻度が最も高いもの

13. li + li {margin-top: 10px}
.set_images figcaption {margin-top: 10px}
その他

14. ENTRY NO.3
「“見出し”の直後にくる記事セットだけ、余白を狭くする」から
「”見出し”の直前の記事セットだけ、余白を広くする」に

15. “見出し”の直後にくる
記事セットだけ、余白を狭くする

16. 次の記事セットが
同じ章節だとしても
はなれすぎて連続性がうすい

17. ”見出し”の直前の
記事セットだけ、余白を広くする
※ただし直前が”見出し”の場合をのぞく

18. コンテンツの流れがとぎれず
読みやすくなった
※ 記事セット標準の余白を少しせまくとるのも
ポイント

20. .article_body__row:not(.set_heading) + .set_heading{
margin-top: 80px;
}
:notが便利

21. ENTRY NO.4
WYSWIYGのメニューをカスタマイズする

22. 記事セットで大体の表現はがっちり作り込んでいる
WYSIWYGはテキスト入力に集中

23. メニューは
最小限の書式選択に減らす

24. ENTRY NO.5
編集画面のスクロール量削減

25. カスタムフィールドによる編集画面が
縦に長くなってしまうのを防ぐ

26. タブを活用する

27. ラジオボタンは横並びにする

28. カスタムフィールド製造開発パートナー募集中!
WordPress/Movable Type/WebRelease
concrete5/CraftCMS