空行が無くなる現象
CMSの管理画面で空行を含む文章を入力し、管理画面上の確認画面では空行が見えていたのに、書き出されたホームページ側の表示では空行が無くなってしまう。
空行が消えてしまう直接の原因
CSS 設定で、<p> タグの後の空行を 0px などに設定している事が直接の原因です。
「すぐ使えるCMS」では、管理画面から入力された空行を <br> 2つではなく、パラグラフ(<p>)の境としてタグ付します。このため、<p> タグ間のマージンの設定が 0px になっていると間の空行が無くなってしまいます。
パラグラフの間に空行を空ける方法(CSS)
パラグラフ(<p>タグ)の間の空間を保つには、CSS(スタイルシート)で調節します。デザインテンプレートファイルを編集し以下のように CSS を設定して下さい。
a. テンプレートの該当項目部分にCSSクラスを設定
b. 設定したクラス配下の <p> タグに margin-bottom を設定
テンプレート編集例
編集対象ファイル
問題となっている項目が含まれているページのテンプレートファイルが編集対象です。
ページと編集すべきテンプレートファイルの対応は、テンプレート一覧をご参照下さい。通常の初期設定だと、templates/article/article.html や templates/article/article_list.txt です。
a. 該当項目にCSSクラスを設定
問題となっているテンプレート変数を囲うブロック(タグ)にCSSクラスを設定して下さい。通常の初期設定だとテンプレート変数は「%_body_%」です。
同じタグの中にテンプレート変数以外のものが含まれないようにしたいので、既に当該テンプレート変数が <div> や <td> で囲まれていれば、そのタグに CSSクラスを付けて下さい。他の要素が含まれないブロックで囲まれていなければ、新たに<div> タグで囲って下さい(下記例参照)。
<div class="bodyblock">
%_body_%
</div>
b. CSS で <p> タグのマージンを指定
生成されるページ用にCSS規則を追加して下さい。
templates/article/article.html や templates/article/article_list.html など、<head> タグを含むテンプレートに直接スタイル指定をしても良いですし、外部スタイルシートを利用しているのであれば、そこに追加して下さい。
a で追加したクラス名(下記例内赤字)を使い、下記例を参考に設定して下さい。下記例はテンプレートファイルの <head> - </head> の中に直接追加できる書き方です。既にスタイル設定があるところに追加する場合は、グレー字の <style> タグは不要です。
この設定で、<p> で囲われたパラグラフの下には 2em の空間が取られます。
<style type="text/css">
.bodyblock p {margin-bottom: 2em;}
</style>
変更の反映
テンプレートを編集したら以下の手順で変更の反映を確認して下さい。
1.アップロード
変更したテンプレートファイルとCSSファイル(あれば)をサーバに上書きアップロードして下さい。
2.再構築
管理画面一覧の下にある「再構築(テンプレート変更反映)」ボタンを押して下さい。
3.確認
一旦ブラウザのキャッシュをクリアした後、ページを再読み込みして表示が変更される事を確認して下さい。