ホームページ制作・SEO対策を通じて集客向上↑売上UP↑ならCyberAccel-Advisors

   投稿日: 2018/01/11    投稿者:webコラム

こんにちは！　ライターのモモタロウです。今回は、はてなブログカスタマイズ　要素の表示、非表示を切り替える方法をお伝えします。

要素の表示、非表示ボタンを設定してブログの表現力をアップしよう

まず、はてなブログにログインします。

その後、「ダッシュボード」→「デザイン」をクリックします。


メニューにある「｛｝デザインCSS」をクリックして、以下の通り入力しよう。

/*全体*/
.hidden_box {
    margin: 2em 0;
    padding: 0;
}

/*ボタン装飾*/
.hidden_box label {
    padding: 15px;
    font-weight: bold;
    background: #F6CEF5;
    border-radius: 5px;
    cursor :pointer;
    transition: .5s;
}

/*アイコンを表示*/
.hidden_box label:before {
    display: inline-block;
    content: '\f078';
    font-family: 'FontAwesome';
    padding-right: 5px;
    transition: 0.2s;
}

/*ボタンホバー時*/
.hidden_box label:hover {
    background: silver;
}

/*アイコンを切り替え*/
.hidden_box input:checked + label:before {
     content: '\f00d';
     -ms-transform: rotate(360deg);
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
     color: #668ad8;
}

/*チェックは見えなくする*/
.hidden_box input {
    display: none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.hidden_box input:checked + label + .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}





入力が終わったら、「変更を保存する」ボタンをクリックして、編集した内容を保存します。

その後、ブログ記事を新規で作成しよう。


「編集みたまま」画面で、タイトルを入力します。

その後、「HTML編集」で以下のコードを設定します。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="hidden_box">
    <input type="checkbox" id="label1" />
    <label for="label1">クリック</label>
    <div class="hidden_show">
      <!--非表示ここから-->    
      <p>こんにちは、はてなブログカスタマイズ　要素を表示、非表示を切り替える方法をお伝えします</p>
      <!--ここまで-->
    </div>
</div>





<p>こんにちは、はてなブログカスタマイズ　要素を表示、非表示を切り替える方法をお伝えします</p>


上記の部分は、「タイトル」、「文章」など自由に書き込みます。


「公開」ボタンをクリックして、ブログを確認すると・・・




クリックボタンがブログ記事に作成されました。

このクリックボタンをクリックすると、以下の画像のように、非表示になっていた文章などが表示されます。







まとめ

如何でしたか？

今回は、要素を表示させたり、非表示にさせたりするボタンの設定をお伝えしました。

是非、試してみて下さいね！