ただただダラダラ佇むダダイズム

知らざあ言って聞かせやしょう。

トップ > カスタマイズ > はてなブログの目次機能にスライド式の開閉ボタンを付けてみよう！目次だけじゃなくてアレもコレも？

はてなブログの目次機能にスライド式の開閉ボタンを付けてみよう！目次だけじゃなくてアレもコレも？

カスタマイズ

f:id:onriedo:20170315171356j:plain

今日は先日のセクシーなお姉さんの出し方（トップへ戻るボタン）を予定していたのだけれども急遽予定を変更！　

kabuku.hateblo.jp

 このはてなブログでも目次が使えるということで昨日試してみたのだけれどもこれがなかなかもって楽ちんベイベーなもんでこのブログにも取り入れてみようかなっと。

まあ俺が今更書くことではないと思うがはてなブログで目次を表示したい時には下のようなコードを表記をすると自動的に目次になる。これはHTML編集等に書かなくても普通に見たままモードの所に書けばいいようだ。やはり楽ちんベイベーだ。

[:contents]

目次に設定されるブブン。

このはてなブログの目次機能なのだけども、目次を作らなければいけないの？と思うかもしれないがその必要はない。見出しに設定されたブブンが自動的に目次として扱われる。編集画面だとタイトルの下に見出し設定の機能が用意されている（PC画面 ※写真１）　HTMLタグだと<h3><h4>で囲まれる。

f:id:onriedo:20170314031352j:plain（※写真１見出し機能の場所）

 

見出しの使い方

大見出し、中見出し、小見出しとあるが基本的には入れ子状に使うようにする。まあ早い話しは本を見てもらえれば分かると思う。各章がありその中に節があり項がある。余計に難しいか。下に例を出してみよう。

大見出し（第一章）

　中見出し（第一小節）

　中見出し（第二小節）

　　小見出し（第一項）

大見出し（第二章）

こんな感じになる。慣れない内は大見出しを設定しておけばまず間違えはない。まあもともと間違えというのはないのだけれども、この見出しの部分をぐちゃぐちゃにしてしまうと記事を読んでる人が混乱してしまう恐れがある。読者を惑わせるのはユーザビリティにやユーザー体験を損ねてしまう。なのでまあ一応正しい使い方というのは覚えておいて損はないはずだ。

見出しは人のために

さらにいうとGoogleロボットが自分のブログに来た時に見出しがあるとコンテンツを判別しやすいのもある。見出しの最上位である<h1>タグなんていのもあるのだけれども、このタグが絶対正義のような時代もあったほどだ。みんなその威力に夢中になっていたなあ。

まあ今となっては見出しなんて使わなくても検索エンジンに読み込まれる。SEOなんていうものを考えるよりも、やはり優先するべきは見てくれている人だ。その人達を惑わさないように使うように心がけてほしいものであ〜る。

見出しのデザイン

はてなブログの見出しのデザインは各テーマによって違う。俺の使っているCONTENTSというテーマだと今見ているこの記事のようなデザインになる。はてなブログの公式テーマなんかだと文字のサイズが大きくなり太字に設定されていたりする。
これは、見たらすぐに見出しですよー。これが大見出しでこれが中見出しというのが分かるように各見出しによってデザインを変更してあるのだ。

人の目を惹く

もう1つデザインされている理由というのがあるのだけれども、それは人の目を惹くというものだ。以前コンテンツ化されたブログを読む時に、人はどんな風に読むかをアンケートで聞いたことがあるのだけれども、全て読む人も多かったのだが、それについで比較的多かったのは、さっとスクロールして見出しに気になる言葉があれば読むというものだった。

この時に見出しが分かりやすいようにデザインされていれば目に止まりやすくもなる。どこが見出しだか分からなければそのまま画面下までスルーされてしまうこともある。

そう言った面でも見出しはある程度目立つようにデザインする方が好ましい。しかし目立ちすぎると今度は逆にタイトルかと思ってしまい離脱するというケースもあるのでほどほどにだ。

ブログを書いていると読んでいる人の感覚が分からなくなってきてしまうものだ。えっ？そんなの普通に分かるでしょ？が分からないというふうに捉えておいた方が良いだろうねえ。

もちろん書き手としては全て読んでほしいものだ。しかしそれは書き手の考えであって読むのは相手だ。

ちょこっと余談

どのように見られるのか実際どんなふうに読んでいるのかを知り整える。それがデザインだ。つまりは内部や外的要因を含めた設計なのだ。見た目だけをよくするのがデザインではない。相手を考えないでするのであればそれはデザイン風だ。プロヴァンス風料理と同じ響き。歴史や背景。地産地消。なぜその地方ではその料理が食べられるのかなど関係なくなんとなくオシャレな感じだから作るような。

まあこれはあくまでデザイナーや料理人が仕事としてその感覚では困るという話しだ。デザインもプロヴァンスも気軽に楽しむならそれでもいい。

早い話しは個人のブログならば楽しめば一番良いということだ。つまりは簡単な見出しの説明をしたかっただけなのであ〜る！見出しを入れる入れないは書く人自身が決めれば良いことなのだなあ。

ちなみこのブログではそう言ったものを無視して遊び心であえて逆をやっているのであまり参考にしないように。

いつもの調子で

なんだか今日はおかしいと感じている人もいるのではないだろうか。けっこう真面目に書いてしまった。ここからはいつもの調子でいかせてもらおうじゃないか！

そんでもって目次機能の話しなのだけれどもなぜだか見出しの話しになってしまった。真面目にと言ってはみたがいつも通り話しが脱線しているのは変わらないようだ。

まあ見出しが目次になるのは分かってもらえたと思う。そこで早速今回の記事の目次を表示させてみよう。今回紹介する目次のスライド式ボタンが下に表示されているはずだ。

実際のボタンはこちらよん。

まずは表示されていたら下のボタンをクリックしてみてほしい。上手く動作しているだろうか？

f:id:onriedo:20170311050632p:plain

 

ごめん。間違えてしまった。お腹が空いてきたので頭の中は白飯と梅干しでいっぱいなんだ。大目にみておくれよ。

こちらが本物の目次だ。

表示されている目次のデザインは使用しているテーマによって変わるようだ。目次のデザインは変わるが他のテーマであっても開閉ボタンはこのまま使用できる。

俺ははてなブログPROではないのでスマホでの設定ができない。なので現在はスマホでは表示されていない状態なのでGIF動画を用意しておいたのでみてほしい。

f:id:onriedo:20170315170551g:plain

スライド式ボタンの仕様。

今回はてなブログで自動で吐き出される目次のコードを元にCSSとjQueryでスライドするボタン仕様にしてみた。目次は便利といえば便利なのだけれども長過ぎると邪魔になる時がある。また目次を必要としない人もいる。なので必要な人はクリックをして目次を見れるようにしてみた。

最初は【目次を開く】と表記されている。目次が表示されると今度は【目次を閉じる】という表記に変わるような使用になっている。

背景の色は通常時がグレー系。マウスオーバー時はブルー系。目次が開かれている時はグリーン系の色で表示される仕組みだ。

自分がいうのもなんだがなかなかマーベラスだと思わないかい？きみも使ってみたいと思わないかい？さあっマーベラスというんだよっ！早くいいなさいよっ！！！

お願いだから言ってください。

なになに？マーベラスだって？ありがとう。嬉しいよ。
それじゃせっかくだからみんなが使えるようにコードを残しておこうじゃないかい。

ちなみに今回のスライド式ボタンは使いようによっては他にも使用できそうだなあ。これからjQueryとCSSコードを紹介するのだけれども、実際のコードは目次と同じようにスライド式の開閉ボタン仕様にしてある。まあコードではなくてもさっきの梅干しとご飯のようにお遊びに使ってもいいんじゃないかなあ。このやり方なんかはまた今度紹介しまうす！

 jQueryコードはこちらですよん！

PCの人はボタンをクリックするとコードが見れますぞい！

<script>
(function($) {
$(document).ready(function(){
        $('.table-of-contents').before('<span class="btn btn-3 btn-3a icon-cart">【目次を開く】</span>');

        $('.table-of-contents').hide();
        var flg = 'close';
        $('.btn').click(function(){
            $('.table-of-contents').slideToggle('slow');
            
            if(flg == 'close'){
                flg = 'open';
                $(this).text('【目次を閉じる】');
            }else{
                flg = 'close';
                $(this).text('【目次を開く】');
            }
        });
    });
})(jQuery);
</script>

jQueryをはてなブログ内ではじめて使うという人は下のコードを上記のjQueryの上に貼り付けてほしい。これがないとjQueryは動作しないのであ〜る！

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

貼り付け場所

jQueryコードをダッシュボード→カスタマイズ→フッタのHTMLを「記述できます」の部分に貼り付けますぞい！貼り付けたら変更を保存するのを忘れずに！

CSSコードはこちらですよん！

PCの人はボタンをクリックするとコードが見れますぞい！

.toc-btn {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px 0;
    transition: all .5s;
    font-size: inherit;
    font-weight: normal;
}

.toc-btn-in {
    background: #58656e;
    color: #fff;
    padding: 5px 15px 5px 30px;
}

.toc-btn-in:hover {
    background: #487ca3;
}

.toc-open{
    background: #499475;
}

.toc-btn-in:before {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: #fff solid 2px;
    height: 100%;
    width: 80px;
    background: rgba(0,0,0,0.4);
    font-size:150%;
    font-weight: normal;
}

.toc-btn-in:before {
    font-family: "blogicon";
    content: "\f039";
}

CSSコードをダッシュボード→カスタマイズ→デザインCSSの部分に貼り付けますぞい！こちらも貼り付けたら変更を保存するのを忘れずに！

締め

こんな感じではてなブログの目次ボタンを作ってみたのだけどももし使えたら使ってみてくださいな！
まあ目次を使うのも見出しを使うのも自由さ。使わなければいけないということもない。それは自分の心と向き合って決めればいいさ！というか興味本位でやってはみたもののやっぱり俺はこのブログでは使うか分からないなあ。まあ他に使いみちがあるので良しとしようじゃないか。

 まず今日はこれぎり！

© 2016 知らざあ言って聞かせやしょう.