MarsEdit 4のプレビューでCSSを反映させて実際の表示に近づける

macOS用のブログエディターMarsEdit 4には、プレビュー機能があります。

書いた記事をアップする前にプレビューできる機能で、まずはこれでチェックしてみてからアップするのが定番となっていますが、デフォの状態では実際のブログとは表示が異なります。

それは、CSSが適用されていないからです。

記事のチェックだけならそのままでも問題はありませんが、アンダーラインやボタンなどの装飾をほどこしているブログの場合は、実際の表示に近づけたいというのがありますよね。

CSS、最優先で反映する!important、リストのマークを非表示にする

CSSの優先順位は、インラインがまず優先されます。
WordPressの設定からデザインを変更できる一部のテーマでは、インラインで設定されてしまうので、いくら外部cssを変更しても反映されないということがあります。

ミニマルなCSSフレームワーク「Milligram」。
DLしたCSSファイルをヘッダーで読み込むだけですぐ導入、ミニマルデザインでそのまま使っても良いし、これをサンプルとしてカラーや形を変更させても良いし。

グリッドレイアウトが簡単に実装できるCSS「@mdo/table-grid」。
テーブルからレスポンシブ、複雑なグリッドまで様々なレイアウトに対応していて、実装は<div>だけで行える手軽さが売り。

チェックボックスにチェックを入れたときのアニメーションエフェクトを追加できるCSS3。

地味なチェックボックスにちょっとした味付け。ユニークなエフェクトが多くあるので、気になる人はデモをチェックしてみよう。