当テーマの以前の記事で、HTML/CSS編集ソフトとしてez-htmlを大きく推奨いたしました。
フリースペースを編集してアメブロを更新する際、改行を削除しなければなりませんが、その際にez-HTMLを役立てる方法を説明したいと思います。
ちょっと探しにくいところにあるんですよね。
右図の通りです!
一発完了ですね。
文字で説明すると少しややこしいですが、ツールバーから
改行を削除した状態で誤って保存してしまったら?
ついでですので、正規表現を使用した検索・置換についてもちょっとTIPSを。
正規表現とは、perlなんかでプログラムを書く方には必須だと思うんですが、文字列を表現する方法のひとつです。たとえば、「あいうえお」という文字を検索したいとき、(行の初めが)「あいうえお」という探し方ができたりします。いろんなパターンを設定して、条件付きで文字列を選択できちゃうんですね。
さて、本題です。
フリースペースを削除する前、私は必ずファイルを保存するようにしています。そして、改行コードを削除した後には、×をクリックして、保存せずにファイルを閉じるようにしてしまいます。
間違って、改行を削除した状態で上書き保存してしまうこと、よくあるんですよね。それを避けるためにそうしているのですが、やはりやっちゃうこともあります。そんな時に、改行を復活させるのに正規表現を使った置換を活用します。
2回の置換作業で完了です!
- {→{\n
- }→\n}\n
これだけです。
コピー&ペーストして使用される際は、[]はキーボードのキー入力を表現するために使っておりますので、この2文字はコピーしないようにしてください。
また\は、たいていキーボード最上部右にあると思われる「円マーク」(¥)のほうではなくて、たいてい右手小指の右下あたりにある「バックスラッシュ」(\)のほうです。どちらも同じように表示されることがあると思いますのでご注意を。
もしうまくいかない方は、文字コードと改行コードの設定が間違っているかも知れません。「ファイル」>「文字コードの設定(高度)」で「UTF-8で保存」「改行コードLFで保存」を繰り返して再度チャレンジしてみてください。この部分は通常、「ファイルオープン時の文字コードで保存」「ファイル文字コードの改行コードで保存」にしておくべきですので、作業の後は戻しておいてくださいね。
blog111206.cssに改行をつけて見やすくする
「blog111206.css」と聞いて反応された方は、おそらく半分以上はプロの方ですね(笑)
アメブロのデザインカスタマイズをしようとした時、HTMLを分析して、そのうえでCSSの設定を編集可能CSSで行なってゆくという手順になると思いますが、アメブロの基本デザインを規定しているのが、「blog111206.css」です。
で、このCSS、
http://stat100.ameba.jp/blog/new/css/cmn/blog111206.css
というURLにあるのですが、見てもらえば分かるように、改行コードが入ってないんですよね(笑)。このままだと、読みにくいというか、読めません(笑)
はい。これに改行をつけてテキストを見やすく整形するためにも、上記の方法は使えるんですよね。
ちなみに、所有してますが、まったく使わないAdobe Dreamweaver CS4では、CSSファイルを読み込んで、「コマンド」>「ソースフォーマットの適用」できれいに整形してくれます。