【はてなブログ】一部の文字をクリックで表示/隠す方法【コピペでOK！】

こんにちは

今回ははてなブログで記事中の一部分を表示/非表示する方法をご紹介します

クイズを作りたくて方法を探したのですがなかなか無くて、色々なサイトを回って最終的にやっと行き着いた方法です。

 つまりコレのやり方です

表示する

コレです！

 

参考にさせて頂いたワカログ様

http://wakalog.hatenadiary.jp/entry/2017/11/08/113759

 手順

jQueryの導入

 まずはjQueryというものをはてなブログに導入します

はてなブログのダッシュボードを開き設定→詳細設定と進み

 検索エンジン最適化の項のheadに要素を追加に以下のコードをコピペします

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

これで完了！

ヘッダにコードを貼りつけ

はてなブログのダッシュボードから今度はデザイン→カスタマイズ→ヘッダと進み、タイトル下の部分に以下のコードをコピペして下さい

    <script>
    //クリックすると表示されるボタン
    $(function(){
        $(".show-button").click(function(){
            var $this = $(this);
            var $target = $this.next();
            if($target.css('display') == 'none'){
                $target.slideDown(400);
                $this.text("隠す");
            }else{
                $target.slideUp(400);
                $this.text("表示する")
            };
        });
    });
    </script>

表示/非表示アイコンのデザインの変更

このままでも使えるのですがこのままだと[表示]/[隠す]と味気ないものになってしまうのでもう少しいじってみましょう！

さっきのヘッダのタブのもう少し下にある｛｝デザインCSSのタブを開き

以下のコードをコピペしてください！

<style>
/*隠すボタン*/
.show-button-block{
    text-align:center;          /*ボタンを中央揃えに*/
}
.show-button{
    display: inline-block;
    border: 2px solid black;    /*ボタンの枠の太さ・色*/
    border-radius: 5px;         /*ボタンに丸み*/
    padding: 10px 15px;         /*サイズ*/
    cursor: pointer;            /*カーソルポインターに*/
}
.show-button:hover{
    background: black;          /*背景色*/
    color: white;               /*文字色*/
    transition: .3s;            /*ぼんやりと変化*/
}
.hide-area{
    display: none;              /*隠しエリアの表示*/
}
</style>

これで見た目が

表示する

コレ！

 になりました！

HTML編集モードでコードを貼りつけ

ではいよいよ本分で表示非表示したいところにコードを入れてみましょう！

<div class="show-button-block">
    <span class="show-button">表示する</span>
    <div class="hide-area">
        <!--ここに隠したいものを入れる-->
    </div>
</div>

方法は簡単！編集モードをHTML編集にし、上記のコードを貼り付けます

そして隠したい文章を<div class="hide-area">の後に入れ込むだけです。<

では試しにQ&A形式でやってみましょう

例

Q『ブログで1日10000PV稼ぐ方法は？』

A『わかりません』

これをHTML編集で見てみると

<p>Q『ブログで1日10000PV稼ぐ方法は？』</p>
<p>A『わかりません』</p>

 となっていると思います

これのアンサーの部分を隠してみましょう

『わかりません』の部分を隠すためにはこのようになります

<p>Q『ブログで1日10000PV稼ぐ方法は？』</p>
<div class="show-button-block"><span class="show-button">表示する</span>
<div class="hide-area">A『わかりません』</div>
</div>

この赤文字部分を追加すれば

Q『ブログで1日10000PV稼ぐ方法は？』

表示する

A『わかりません』

この様になります！

これで完成です！

まとめ

いかがでしたでしょうか？わかりましたかね？

僕もまだマスターしてはいませんがとりあえずこれで問題なくできています。

他のサイトで書いてあったものをコピペしても僕はうまくいかず

『表示』のタブだけ出るんですがクリックしても無反応で表示されなかったんです。

原因は恐らくですが最初に検索エンジン最適化の項のheadに要素を追加したjQueryのバージョンが古かったのかな？と思います。

最後までお読みいただきありがとうございました。

オススメ記事

www.obake-blog.com

www.obake-blog.com

www.obake-blog.com

こんにちは
当ブログ筆者の田中です

1年の半分以上を出張している出張族で
出張してはダイエットで痩せて、帰っていっぱいご飯を食べて太る生活をしています。

 
どーでもいいこと(メイン)、ダイエットやオススメ情報を書いていくのでよろしくお願いします！

ブログURL：https://www.obake-blog.com/