管理画面で入力した空行がホームページ側に反映されません

空行が無くなる現象

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.確認

一旦ブラウザのキャッシュをクリアした後、ページを再読み込みして表示が変更される事を確認して下さい。