戯れ言葉

Atomで外部(ローカル)cssを反映させる

カテゴリ:フリーソフト
タグ:

 数ヶ月前からAtomというエディタで、ブログの記事を書き出したんですが, プログラマーには便利でも、私のようにAtomでブログ記事しか書かない人間にとっては、なかなか親切ではありません。
 テキストエディタ Atom に挑戦
 の記事で書いたように、日本後入力時の操作がかなり不便なのです。
 調べてみると、Atom では仕組み上できないんだとか。
 時々ネットでググってみるんですが、まだ解決策はないようです。
 入力する文字を短くして変換すれば少し面倒ですが、それで使用しています。

 htmlを使用しながら書いていくには、そこは専用のエディタなのでめっちゃ便利です。

Atom html preview
左からツリービュー,編集画面,プレビュー画面

 また、PreviewHTML というパッケージ(アドイン?)を入れると、リアルタイムにプレビュー表示をしてくれます。
 ただ、ソース側で入力をしていく度にプレビュー画面はページトップに戻るので、プレビューの確認はプレビュー画面をスクロールしなければいけません。
 記事を書いていきながら、ほぼリアルタイムで表示が確認できるので、その都度ブラウザを開いて確認するよりは、はるかに作業ははかどります。
 
 この作業時に、ブログと同じCSS を適用できれば、独自のCSS による装飾も確認できます。

 必要なcss を例えば mycss.css という名前に書き出し(コピーし)、作業中のhtml ファイルと同じフォルダーにおき、html に
 <link rel="stylesheet" href="mycss.css">
 と記述してやれば、作業中のhtml に、css が反映されました。

 css ファイルが同じフォルダーにない場合、Windows のフルパス指定のように、css ファイル名を
 c:\MyData\Memo\Blog\mycss.css
 とかいうふうに記述してやっても反映されました。
 しかし、正しくは
 file:///c:/MyData/Memo/Blog/mycss.css
 こう記述するんだそうです。これはファイルのフルパスのurl 表記になるんだと思います。
 ブラウザでファイルを開く・・Windows のエクスプローラ等のファイラーでcss ファイルを開くとブラウザで開けます。
 このブラウザで開いた時のアドレスバーに表示されたものがファイルのフルパスになります。これをコピーすれば簡単。

 フルパスの最初の部分
 file:///c:/
 が、自分のPC を指しているようで、同じ書き方をすれば自PC 内の画像を表示することも出来ます。
 もちろん自分自身だけのローカルな環境にだけでの話ですが。

Comments 0

There are no comments yet.

Leave a reply
コメントをどうぞ

ブログやホームページのURLをどうぞ

パスワードを入力すると投稿後、訂正・削除が出来ます