WordPress 改行 WLWで高度な技を披露！！

2014年7月23日

WindowsLiveWriter(WLW)を使用して、文字を書いてWordPressに投稿する時に注意する改行についてです。

WindowsLiveWriter上では、大きく余白をとる場合のソースコードを確認してみると、以下のようになっています。

[code]
WindowsLiveWriterを使用して、文字を書いてWordPressに投稿する時に注意する改行についてです。
#160;
WindowsLiveWriter上では、大きく余白をとる場合のソースコードを確認してみると、以下のようになっています。
[/code]

この部分

[html] [/html]

が余計です。無駄なソースコードとなってしまいSEO的にもよろしくありません。では、どうするのかというと、スタイルシートに改行の設定を新たに記述するのです。今回は、見た目の改行に合わせてソースコードも綺麗にするテクニックのご紹介です。

改行部分のソースコードを綺麗にする手法

WordPressファイルに変更を記述

変更するファイル

style.css

追記内容

[code]
.kizi-margin-height{
margin-bottom: 36px;
}
[/code]

ページ内の複数箇所に使あ用するかもしれないので、id要素ではなくclass要素として、スタイルシートに記述し、使用する際は以下のように

[code]
余白を大きく付けたい
[/code]

と記述します。これで、pタグを使うと通常より大きく余白をつくる事が出来ます。この方法により、今までと同じレイアウトで、かつ、ソースコードがきれいなWEBサイトを作る事が出来ます。唯一のデメリットは、毎回ソースコードを直接記述しないといけない点でしょうか。しかし安心して下さい、WindowsLiveWriterを使用すれば、そんなめんどくささからも解放できるのです。

それでは、上級編へと進んで下さい。上級編といっても驚くほど簡単ですよ。