Weitere ähnliche Inhalte
Ähnlich wie ビジュアルエディタ用CSSで 快適なブログライフを! (20)
ビジュアルエディタ用CSSで 快適なブログライフを!
- 2. 田原遊馬(たはらゆうま)
株式会社クロスキューブ 取締役 / ディレクター / デザイナー
facebook.com/BuccaneerBoogie
@90zbear
WordPressを含む、CMS案件を中心にお仕事してます。
WordPress / concrete5 / EC-CUBE / PHP / JavaScript / HTML / CSS /
DTP & WEB Design and more!!
- 16. 指定したエディタ用スタイルシート
表示画面の記事部分に適応しているCSSをコピーして設定。
WordPressの標準エディタ準拠なら・・・
p, h1, h2, h3, h4, h5, h6
strong, em, blockquote, del, ins,
hr, img, ul, ol, li, code, img
このへんを設定!
- 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/ブログに書きました!