WordBench東京 7月『WordPressでのブログライティングとブログ運営』でのLT用スライド

1. ビジュアルエディタ用CSSで
快適なブログライフを！
田原遊馬（タハラユウマ）
株式会社クロスキューブ 取締役 / ディレクター / デザイナー
facebook.com/BuccaneerBoogie
@90zbear
ビジュアルエディタ派のためのプチカスタム
2015.07.03 WordBench 東京 LT

2. 田原遊馬（たはらゆうま）
株式会社クロスキューブ 取締役 / ディレクター / デザイナー
facebook.com/BuccaneerBoogie
@90zbear
WordPressを含む、CMS案件を中心にお仕事してます。
WordPress / concrete5 / EC-CUBE / PHP / JavaScript / HTML / CSS /
DTP & WEB Design and more!!

3. ブログ、やってます。
90zbear.com
2014年4月∼

4. ビジュアルエディタ
使ってますか？

5. ぶっちゃけ
お金をかけたくない！

6. ブログの書きやすさとは何だ

7. エディタ上の見た目=表示の見た目

8. このブログを書くために

9. こうしてみた

10. このブログのここが

11. ビジュアルエディタのここ

12. 投稿された記事のイメージがしやすいことは
プレビューの回数を減らし、
「書く」ことに集中できる環境！

13. 見た目がイケてると
テンションが上がる！

14. しかも、結構お手軽です。

15. functions.phpに追加
//テーマディレクトリ内のエディタ用スタイルシートのパスを設定
add_editor_style(‘css/editor-style.css');
function custom_editor_settings( $initArray ) {
//ビジュアルエディタのtextareaのclass
$initArray['body_class'] = 'editor-area';
return $initArray;
}
add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );

16. 指定したエディタ用スタイルシート
表示画面の記事部分に適応しているCSSをコピーして設定。
WordPressの標準エディタ準拠なら・・・
p, h1, h2, h3, h4, h5, h6
strong, em, blockquote, del, ins,
hr, img, ul, ol, li, code, img
このへんを設定！

17. 指定したエディタ用スタイルシート
ビジュアルエディタ全体にかかわる調整はこんな感じ。
body.mceContentBody {
margin:15px;
padding:20px;
line-height:1.6em;
font-size:12pt;
color:#444;
}

18. sassとかcompassとか使っている人用
$pink: #F2295F;
$blue: #3DBCD9;
$lightgrey: #F2F2F2;
$yellow: #F2E422;
@mixin postFormat{
h1{
position: relative;
color: #fff;
background: lighten($pink, 15%);
font-size: 140%;
font-weight: bold;
margin: 0 0 0.5em -0.5em;
padding: 0.3em 0.5em 0.3em 0.5em;
@media (max-width: 640px) {
padding: 0.3em 1.5em 0.3em 0.5em;
}
}
（以下略）
_posts.scss editor-style.scss
@import "compass";
@import "posts";
body.mceContentBody {
margin:15px;
padding:20px;
line-height:1.6em;
font-size:12pt;
color:#444;
}
@include postFormat;
style.scss
.postContent{
@include postFormat;
}
http://www.90zbear.com/web-develop/wordpress/871/ブログに書きました！

19. ビジュアルエディタ用CSSで
快適なブログライフを！

20. ご静聴ありがとうございました！