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

田原遊馬（タハラユウマ）

株式会社クロスキューブ 取締役 / ディレクター / デザイナー

facebook.com/BuccaneerBoogie

@90zbear

ビジュアルエディタ派のためのプチカスタム

2015.07.03 WordBench 東京 LT

田原遊馬（たはらゆうま）株式会社クロスキューブ 取締役 / ディレクター / デザイナー

facebook.com/BuccaneerBoogie

@90zbear

WordPressを含む、CMS案件を中心にお仕事してます。WordPress / concrete5 / EC-CUBE / PHP / JavaScript / HTML / CSS /

DTP & WEB Design and more!!

ブログ、やってます。90zbear.com2014年4月～

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

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

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

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

このブログを書くために

こうしてみた

このブログのここが

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

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

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

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

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' );

指定したエディタ用スタイルシート

表示画面の記事部分に適応しているCSSをコピーして設定。

WordPressの標準エディタ準拠なら・・・p, h1, h2, h3, h4, h5, h6 strong, em, blockquote, del, ins, hr, img, ul, ol, li, code, img

このへんを設定！

指定したエディタ用スタイルシート

ビジュアルエディタ全体にかかわる調整はこんな感じ。

body.mceContentBody { margin:15px; padding:20px; line-height:1.6em; font-size:12pt; color:#444; }

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/ブログに書きました！

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

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