小規模Webサイト向け CMS 「すぐ使えるCGI」のサポート情報

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

最終更新日: 2014-04-15

空行が無くなる現象

CMSの管理画面で空行を含む文章を入力し、管理画面上の確認画面では空行が見えていたのに、書き出されたホームページ側の表示では空行が無くなってしまう。

空行が消えてしまう直接の原因

CSS 設定で、<p> タグの後の空行を 0px などに設定している事が直接の原因です。

「すぐ使えるCGI」では、管理画面から入力された空行を <br> 2つではなく、パラグラフ(<p>)の境としてタグ付します。このため、<p> タグ間のマージンの設定が 0px になっていると間の空行が無くなってしまいます。

パラグラフの間に空行を空ける方法(CSS)

パラグラフの間の空間を保つには、CSS(スタイルシート)で調節します。テンプレートファイルを編集し以下のように CSS を設定して下さい。

a. テンプレートの %_body_% 部分にCSSクラスを設定
b. 設定したクラス配下の <p> タグに margin-bottom を設定

テンプレート編集例

a. %_body_% に class を設定

templates/article/article.html や templates/article/article_list.txt など、記事内容( %_body_% )を掲載しているテンプレートが編集対象です。「%_body_%」を <div> タグで囲ってCSSクラスを設定して下さい。下記例だと「bodyblock」というクラス名にしています。

※ 書き出されるページと編集すべきテンプレートファイルの対応について詳しくは、マニュアル一覧から「テンプレート対応図」をご参照下さい。

<div class="bodyblock">
%_body_%
</div>


b. CSS で <p> タグのマージンを指定

生成されるページの <head> 内に CSS のスタイル設定が書き出されるように、テンプレート内に CSS 設定を追加して下さい。templates/article/article.html や templates/article/article_list.html など、<head> タグを含むテンプレートが編集対象です。

既に <head> 内または別の場所にスタイル指定がされている場合は、「.bodyblock」...で始まる設定行のみを追加して下さい。

<head>
 :(既存の内容)
<style type="text/css">
.bodyblock p {margin-bottom: 2em;}
</style>
 :
</head>


変更の反映

テンプレートを編集したら以下の手順で変更の反映を確認して下さい。

1.アップロード
変更したテンプレートファイルをサーバに上書きアップロードして下さい。

2.再構築
管理画面一覧の下にある「再構築(テンプレート変更反映)」ボタンを押して下さい。

3.確認
ブラウザからページを再読み込みして表示が変更される事を確認して下さい。

参考情報:「すぐ使えるCGI」での改行の反映方法

管理画面から入力した改行は、書き出されるページの HTML コードには以下のように反映されます。

1.入力内容全体を通して空行が無い場合 -> 改行は <br> (または <br />)に変換

2.入力内容のどこかに空行がある場合 -> 前後のブロックをパラグラフ(<p>..</p>)としてタグ付け

管理画面での入力

最初のブロックです。
改行します。

2つ目のブロックです。
また改行します。


ページの HTML コードへの反映

<p>最初のブロックです。<br>改行します。</p>
<p>2つ目のブロックです。<br>また改行します。</p>

関連リンク

さらに詳しく