Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ビジュアルエディタ用CSSで
快適なブログライフを!
田原遊馬(タハラユウマ)
株式会社クロスキューブ 取締役 / ディレクター / デザイナー
facebook.com/BuccaneerBoogie
@90zbear
ビジュアルエディタ派の...
田原遊馬(たはらゆうま)
株式会社クロスキューブ 取締役 / ディレクター / デザイナー
facebook.com/BuccaneerBoogie
@90zbear
WordPressを含む、CMS案件を中心にお仕事してます。
WordPre...
ブログ、やってます。
90zbear.com
2014年4月∼
ビジュアルエディタ
使ってますか?
ぶっちゃけ
お金をかけたくない!
ブログの書きやすさとは何だ
エディタ上の見た目=表示の見た目
このブログを書くために
こうしてみた
このブログのここが
ビジュアルエディタのここ
投稿された記事のイメージがしやすいことは
プレビューの回数を減らし、
「書く」ことに集中できる環境!
見た目がイケてると
テンションが上がる!
しかも、結構お手軽です。
functions.phpに追加
//テーマディレクトリ内のエディタ用スタイルシートのパスを設定
add_editor_style(‘css/editor-style.css');
function custom_editor_settings...
指定したエディタ用スタイルシート
表示画面の記事部分に適応しているCSSをコピーして設定。
WordPressの標準エディタ準拠なら・・・
p, h1, h2, h3, h4, h5, h6
strong, em, blockquote, de...
指定したエディタ用スタイルシート
ビジュアルエディタ全体にかかわる調整はこんな感じ。
body.mceContentBody {
margin:15px;
padding:20px;
line-height:1.6em;
font-size:1...
sassとかcompassとか使っている人用
$pink: #F2295F;
$blue: #3DBCD9;
$lightgrey: #F2F2F2;
$yellow: #F2E422;
@mixin postFormat{
h1{
posit...
ビジュアルエディタ用CSSで
快適なブログライフを!
ご静聴ありがとうございました!
Upcoming SlideShare
Loading in …5
×

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

896 views

Published on

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

Published in: Internet
  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 1. ビジュアルエディタ用CSSで 快適なブログライフを! 田原遊馬(タハラユウマ) 株式会社クロスキューブ 取締役 / ディレクター / デザイナー facebook.com/BuccaneerBoogie @90zbear ビジュアルエディタ派のためのプチカスタム 2015.07.03 WordBench 東京 LT
  2. 2. 田原遊馬(たはらゆうま) 株式会社クロスキューブ 取締役 / ディレクター / デザイナー facebook.com/BuccaneerBoogie @90zbear WordPressを含む、CMS案件を中心にお仕事してます。 WordPress / concrete5 / EC-CUBE / PHP / JavaScript / HTML / CSS / DTP & WEB Design and more!!
  3. 3. ブログ、やってます。 90zbear.com 2014年4月∼
  4. 4. ビジュアルエディタ 使ってますか?
  5. 5. ぶっちゃけ お金をかけたくない!
  6. 6. ブログの書きやすさとは何だ
  7. 7. エディタ上の見た目=表示の見た目
  8. 8. このブログを書くために
  9. 9. こうしてみた
  10. 10. このブログのここが
  11. 11. ビジュアルエディタのここ
  12. 12. 投稿された記事のイメージがしやすいことは プレビューの回数を減らし、 「書く」ことに集中できる環境!
  13. 13. 見た目がイケてると テンションが上がる!
  14. 14. しかも、結構お手軽です。
  15. 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. 16. 指定したエディタ用スタイルシート 表示画面の記事部分に適応しているCSSをコピーして設定。 WordPressの標準エディタ準拠なら・・・ p, h1, h2, h3, h4, h5, h6 strong, em, blockquote, del, ins, hr, img, ul, ol, li, code, img このへんを設定!
  17. 17. 指定したエディタ用スタイルシート ビジュアルエディタ全体にかかわる調整はこんな感じ。 body.mceContentBody { margin:15px; padding:20px; line-height:1.6em; font-size:12pt; color:#444; }
  18. 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. 19. ビジュアルエディタ用CSSで 快適なブログライフを!
  20. 20. ご静聴ありがとうございました!

×