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

Marsedit csspreview 01

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

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

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

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

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

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

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

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

Webページのナビゲーションとして、そこかしこで見掛けるようになった「トップページへ戻る」ボタン。

ページを下にスクロールさせるとぼわ〜ん出現して、クリック（タップ）するとぐい〜〜ん！と上に戻るというやつです。ボタンはCSSとFont Awesome、出現とクリック時のエフェクト動作はjQueryを使っているだけなので、様々なブログやWebサイトに簡単に導入することができます。