入力がない場合は表示しない、という設定について

Question

CMSを使用して、記事部分を構築していますが、
（Owlet（アウレット）という言語を使用したシステムです。このCMS自体はPHPで書かれているようですが、当方で触れるのはCSSとhtmlの部分のみとなります。）
それぞれの項目にタグコードを設定し、管理画面で入力した情報を表示させています。

ただ、入力は任意で、入力した項目のみを表示させたいのですが、
cssでその項目にスタイルを施したものに関しては、入力がなくてもスタイルのみが表示されてしまいます。
本来は未入力であればそのスタイル自体も表示しないようにしたいのですが、
未入力だと、もちろん入力しないものは表示されませんが、スタイルのみ表示されてしまう、という現象です。

これを、
「入力がない項目に関しては、表示させない」、という風に設定したいのですが、
当方関数？PHP？がイマイチ理解できておらず、四苦八苦しています。

どなたかご教授いただけないでしょうか。
該当部分のコードは下の8行の<p>の部分で、
{[------]} この部分にはシステムで設定したコードが入るようになっています。

<div class="primary">
<div class="main-contents">
    <div class="blog-shoulder">
        <p class="blog-category">{=directory(@directory)['name']=}</p>
        <p class="blog-body-date">{[日付]}</p>
        </div>
        <h2 class="blog-naka-ttl">{[ブログタイトル]}</h2>
        <div class="blog-snsbox">
            <ul class="blog-sns-list">
            <a href="#" class="blog-sns-content-fb-link"><li class="blog-sns-content-fb">facebook</li></a>
            <a href="#" class="blog-sns-content-tw-link"><li class="blog-sns-content-tw">twitter</li></a>
            <a href="#" class="blog-sns-content-gg-link"><li class="blog-sns-content-gg">google+</li></a>
            <a href="#" class="blog-sns-content-hatena-link"><li class="blog-sns-content-hatena">Hatena</li></a>
            </ul>
        </div>
            <p class="blog-main-image">{[メイン画像]}</p>
            <p class="blog-txt01">{[テキスト01]}</p>
          <p class="blog-s-mid">{[見出し]}</p>
            <p class="blog-txt02">{[テキスト02]}</p>
            <p class="blog-sub-image">{[サブ画像]}</p>
            <p class="blog-s-mid">{[見出し02]}</p>
            <p class="blog-txt02">{[テキスト03]}</p>
            <p class="blog-sub-image-underline">{[サブ画像02]}</p>
            <a href="#" class="blog-back-link">実績・実例一覧へ戻る</a></div>
</div>

.blog-main-image {
	margin-bottom: 30px;
}
 @media screen and (min-width: 768px) {
.blog-main-image {
	margin-bottom: 30px;
}
}
.blog-txt01 {
	margin-bottom: 30px;
}
 @media screen and (min-width: 768px) {
.blog-txt01 {
	margin-bottom: 30px;
}
}
.blog-s-mid {
	color: #41a9c6;
	font-size: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-top: 1px solid #41a9c6;
	border-bottom: 1px solid #41a9c6;
	margin-top: 10px;
	margin-bottom: 10px;
}
 @media screen and (min-width: 768px) {
.blog-s-mid {
	font-size: 24px;
}
}
.blog-sub-image {
	margin-bottom: 30px;
}
.blog-sub-image-underline {
	margin-bottom: 60px;
	padding-bottom: 30px;
	border-bottom: 1px solid #ccc;
}

Comments

[m.ts10806]

「CMSを使して」何のCMSでしょうか？またタイトルにある「ret関数」がコード内にどこにも出てきませんが、どのような関係性があるのでしょうか？

[hashimoto-japan]

Owlet（アウレット）という言語を使用したシステムを使用しています。ret関数は当方が勝手に思い込んで書いてしまっているので、関数でなくて、cssやjs等で同じように入力のないものは表示しない、という風にできればと思っています。説明不足ですみません。。。

[hashimoto-japan]

関数でなくても、他に方法があれば…という意味です。

[m.ts10806]

質問者さんの思い込みのものですと知らない人には何のことかわからないので、なるべく簡潔に要件のみをタイトルにしてはいかがでしょうか？

[hashimoto-japan]

承知いたしました。ありがとうございます。そういたします。

[m.ts10806]

質問は質問者さんのみが編集できます。環境情報などは回答に必要な情報となるのでなるべく質問に追記してください。このコメント欄はデフォルトでは非表示なので大事な情報が他の回答者の目につきにくくなります。

[yyyy.yyyy]

HTMLとCSSのご質問というよりは、WPの組み込みについてのご質問でしょうか？タグにPHPを追加した方が、回答が得られやすいと思います。

[hashimoto-japan]

ありがとうございます。システム自体はPHPで作られているようなのですが、こちらが触れる領域は、cssとhtmlのみになっておりまして…

[m.ts10806]

「Owlet（アウレット）という言語を使用したシステム」部分を質問に追記してください。PHPでCMSというとWordPressというイメージが強くなります。

[hashimoto-japan]

はい。承知しました。

[hashimoto-japan]

はい。承知しました。

Answer 1

CSSとHTMLでのみ実装する場合は、CSS3の疑似クラスを使用する方法があります。

.blog-s-mid:empty{
display:none;
}

ただ、比較的新しい手法なので古いブラウザでの確実性は保証できません…。
（旧IEやスマホ対応時は厳しいかも　参考：https://caniuse.com/#search=%3Aempty

もしjQueryを記載できるなら、そちらの方がブラウザ対応と更新性を考えると便利です。

$(function(){
　$("消したいclass名など:empty").remove();
　$(".blog-s-mid:empty").remove();
});

参考：http://blog.pinkmonky.net/detail/?id=36

---

ここから以下は余談かもしれませんが、
もし都度classを指定するのが大変な場合は、親要素からemptyを探し出す指定にすると便利かと思います。

$(function(){
　$(".main-contents").find(':empty').remove();
});

Comments

[hashimoto-japan]

cssのパターンで解決しました！分かりにくい質問にとてもごていねいに回答いただきありがとうございます。