ブログのカスタマイズでいつかやってみたいと考えていたことがありました。
それは、
ワンクリックで文章の一部を隠したり表示させたりする
ことです。
いまいち想像が付かない方もいらっしゃるかと思いますので、今回の完成系とその方法をお伝えします。
尚、今回紹介する方法はレスポンシブル対応となっています。
下記の設定をすることでPC・スマホともに同様の見え方となります。
はてなブログで文章の一部を隠したり表示させたりする
それでは今回の完成系です↓↓
「表示する」というボタンが表示されているかと思います。
ここをクリックしてみて下さい。
想定される使いどころ
今のところ考えている使い方はこんな感じ。
●なぞなぞの問題を書いて、その下に答えを準備し、クリックすると問題の答えが表示される
Q：パンはパンでも食べられないパンは何だ？？
●薬の紹介をする際に全部を全員に読んでもらう必要はない(必要な人だけ読めばよい)箇所を隠しておいて、必要な人だけクリックして読んでもらう
○○という薬の添付文書一部抜粋したものを記載しておきます。
必要な方は下記ボタンをクリックしてご覧ください。
すぐに思いつくのはこの程度です。
が、
もっと言えば、下のリンク先で「はてなの非公式グループ」を紹介しているのですが、リンク先が羅列されており少し整理したいと考えていました。この機能をうまく使えばもう少し読みやすくなるかも？？と企んだりしています。
www.yakuzari.work
www.yakuzari.work
実際にはてなブログで文章の一部を隠したり表示させたりする方法
完成系は上で紹介したので、順番にやり方を紹介します。
ちなみに、参考にさせてもらった記事はこちらです↓
①headにコードを挿入する
設定→詳細設定→headに要素を追加
と進んだところに下記のコードを挿入します
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/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にCSSを挿入する
デザイン→カスタマイズ(スパナマーク)→デザインCSS
と進んだところに下記CSSを追記します。
<style>
/*隠すボタン*/
.show-button-block{
text-align:center; /*ボタンを中央揃えに*/
}
.show-button{
display: inline-block;
border: 2px solid black; /*ボタンの枠の太さ・色*/
border-radius: 5px; /*ボタンに丸み*/
padding: 10px 15px; /*サイズ*/
background: black; /*背景色*/
color: white; /*文字色*/
cursor: pointer; /*カーソルポインターに*/
}
.show-button:hover{
background: white; /*背景色*/
color: black; /*文字色*/
transition: .3s; /*ぼんやりと変化*/
}
.hide-area{
display: none; /*隠しエリアの表示*/
}
</style>これで下準備完了となります。
④文章の隠したいところに下のコードを挿入する
<div class="show-button-block"><span class="show-button">表示する</span><div class="hide-area">お試し</div></div>このように記事編集画面で指定してあげることで、
と指定することが出来るようになったはずです！！
はてなブログで文章の一部を隠す方法・まとめ
各コードをコピペすれば完成すると思うので、カスタマイズとしては簡単な部類かと思います。
でも、中には
「表示するボタン」をカスタマイズしてみたい！
という方のために、少し書き足しておきます。
さきほど「デザインCSS」にCSSを書き加えましたが、実はこのCSSを少しいじるとボタンの印象を変えることが出来ます。
例えば背景色がblackとなっており、文字色がwhiteとなっていますが、この記載を反対にするだけで白黒反転したボックスに簡単に変わります。
色の組み合わせは何万通りもあるかと思いますので、自分のブログの雰囲気に合ったボタンを作成してみて下さい。
先ほど参考にさせていただいたサイトを紹介しましたが、こちらで紹介されているHTMLをそのまま文章に入れても「はてな記法」だとうまく反映されません。
HTML編集やMarkdown編集の方は問題ないのですが、「はてな記法」の方は当記事で紹介しているコードを使用して下さいね。
