簡易SNSを作ってみよう（11）

見栄えの修正（２）

メッセージ表示部に，dismissボタンを付けて，読んだら消せるようにしよう．

styleタグによるこの設定は使えない．dismissボタンを付けることによって，メッセージがないときでもemptyではなくなってしまうから．従って，この部分は削除する．

【手順】

vi app/views/layouts/application.html.erb

    <style>

      .alert:empty {

         display: none;

      }

    </style>

上記の部分を削除する．そのかわり，メッセージ表示部を次のようにする．

   <% if notice %>

     <div class="alert alert-info alert-dismissible fade show"

role="alert"><%= notice %>

       <button type="button" class="close" 

data-dismiss="alert" aria-label="閉じる">

         <span aria-hidden="true">&times;</span>

       </button></div>

   <% end %>

   <% if alert %>

     <div class="alert alert-warning alert-dismissible fade show" 

role="alert"><%= alert %>

       <button type="button" class="close" 

data-dismiss="alert" aria-label="閉じる">

         <span aria-hidden="true">&times;</span>

       </button></div>

   <% end %>