質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.83%

  • PHP

    18242questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • HTML5

    3500questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    1806questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 404

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;
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2018/05/30 12:44

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

    キャンセル

  • hashimoto-japan

    2018/05/30 19:15

    はい。承知しました。

    キャンセル

  • hashimoto-japan

    2018/05/30 19:15

    はい。承知しました。

    キャンセル

回答 1

checkベストアンサー

+2

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();
});

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/31 15:57

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.83%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • PHP

    18242questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • HTML5

    3500questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    1806questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。