ブログの目次を表示・非表示＆目次デザインの変更方法『Minimalism』はてなブログ

f:id:mynameiseiji:20220109165521j:image

こんちには、ジブリッシュマンブログのエイジです。

今回はブログの目次を表示・非表示＆目次のデザイン変更方法を紹介したいと思います。

いろんな人のブログを読んでいると目次が隠れていて、スッキリして『いいな〜』と感じたことはありませんか？（笑）

そのように思った方に設定方法と変更方法をわかりやすく、サクッとコピペでできるようにしちゃいましょう。

今回の記事でわかること

・はてなブログで目次を表示・非表示の設定方法

・目次のデザイン（色・形・文字）を自分好みに変える変更方法

さらに私のブログで他の必要な絶対入れたほうがいいカスタマイズ１８選を下記の記事で紹介しています。

www.eijilife.com

ブログの目次を表示・非表示＆デザイン変更方法

ブログの目次を表示・非表示＆デザイン変更方法

ブログの目次を表示・非表示＆デザイン変更方法

まずは順番に目次の表示・非表示のCSSから、次に目次デザインのCSSと細かい点について変更していきます。

目次の表示・非表示の設定するためのCSSコード

はじめに『デザイン』→『カスタマイズ』→『フッタ』に下記のコードをコピペしてください。

注意＆お願い

コピペした時に、赤い四角の中に・が出てしまいますので、それを全部消してください。

やり方がわからなく後日変更いたします。

<!– 目次の表示・非表示–>
<script type=”text/javascript” src=”https://code.jquery.com/jquery-1.9.1.min.js“></script>
<script>
//クリックすると表示される目次
$(function(){
var $Contents = $(“.table-of-contents”)
$($Contents).before(‘<span style=”font-size: 150%; color: #333;”>目次</span><p class=”show-area”>[Open]</p>’);
$(“.show-area”).click(function(){
var $this = $(this);
if($Contents.css(‘display’) == ‘none’){
$Contents.slideDown(400),
$this.text(“[Close]”);
}else{
$Contents.slideUp(400),
$this.text(“[Open]”)
};
});
});
</script>
<!– 目次の隠し–>

次に『デザイン』→『カスタマイズ』→『デザインCSS』に下記のコードをコピペしてください！！！

/*隠れる目次設定*/
.table-of-contents{
display: none;
}
.show-area{
display: inline-block;
font-size:0.7em;
padding: 10px;
border-radius: 5px;
cursor: pointer;
margin-bottom: 0;
color: #4f96f6;
}

entry-content img {
max-width: 100%;
width: 540px;
padding-bottom: 10px;
padding-top: 5px;
display: block;
}
/*隠れる目次設定*/

上記のCSSコードを入れることによって目次の表示・非表示になっています。一度ブログで確認してみましょう。

目次の横に入る字を好きな言葉に変更

<p>次に目次を隠すことができていると、目次の横に［Open］と言う字が出てきます。

それに目次を開くと、［close］と言う字が出てきます。

両方とも文字を変更する事ができるので、自分の好きな言葉に変更して見ましょう。

よく見かけるのは、表示・開く・隠す・閉じる・Contentsなどなどです。

なので私は『Open .close』の英語にしてみましたよ（笑）

さらにその目次の部分も変更が可能なので、変えたい方は変えて見るのもいいかもしれません。

⬇⬇⬇⬇⬇　変更方法は下に　⬇⬇⬇⬇⬇

表示の変更方法

まず『デザイン』→『カスタマイズ』→『フッタ』に入れたコードの中に赤字の部分があります。

$($Contents).before(‘<span style=”font-size: 150%; color: #333;”>目次</span><p class=”show-area”>[Open]</p>’);
$(“.show-area”).click(function(){
var $this = $(this);
if($Contents.css(‘display’) == ‘none’){
$Contents.slideDown(400),
$this.text(“[Close]”);
}else{
$Contents.slideUp(400),
$this.text(“[Open]”)

その赤字の目次とClose、Open の所を変更すると変えることができます。

変えたら変わっているかチェックして見ましょう。

目次のデザイン変更

上記のコードを入れると、シンプルな目次になりますが、目次デザインにこだわりたい方には目次のデザインを変更して見ましょう。

こちらは、手軽に目次デザインて検索すると出てくるサイトからコピペしてデザインCSSに入れるだけで変更できます。

注意

たまにコピペしたのにデザインが変わらない時があります。そういう時の為に自分のCSSコードをあらかじめコピーしておきましょう

私の使っているデザインは、こちらの方の目次デザインからコピペさせていただいたデザインです。

はてなブログ【目次カスタマイズ】コピペで使えるデザイン集 – フジブロっ！

他にもいろいろと紹介している方がいるので、参考にしてみてください。

私が使用しているデザインコード

『デザイン』→『カスタマイズ』→『デザインCSS』に下記のコードをコピペして入れてください。

/*はてな目次のデザイン*/
.entry-content .table-of-contents {
position: relative;
margin: 0;
padding: .5em 1.2em 1em;
background: #fff;
font-size: 100%;
border-top: solid 40px #2f4f4f;
border-right: solid 2px #2f4f4f;
border-bottom: solid 2px #2f4f4f;
border-left: solid 2px #2f4f4f;
border-radius: 8px;
color: #2f4f4f;
}
.entry-content .table-of-contents::before {
content: “Table of contents”;
position: absolute;
top: -33px;
left: 38px;
margin: 0;
color: #fff;
border: 0;
font-size: 120%;
font-weight: bold;
}
.entry-content .table-of-contents::after {
content: “039”;
font-family: blogicon;
position: absolute;
top: -35px;
left: 13px;
color: #fff;
font-weight: bold;
font-size: 120%;
}
.entry-content .table-of-contents li {
margin: .2em 0 1em 1em;
list-style-type: decimal;
line-height: 1.6em;
font-weight: bold;
}
.entry-content .table-of-contents li ul {
margin: 0 0 1em .5em;
padding: 0;
}
.entry-content .table-of-contents li ul li {
margin: .2em 0 0 1em;
font-weight: normal;
font-size: 100%;
}
.entry-content .table-of-contents li ul li ul li {
font-size: 90%;
}
.entry-content .table-of-contents a {
color: #2f4f4f;
display: block;
text-decoration: none;
border-bottom: solid 2px #2f4f4f;
}
.entry-content .table-of-contents ul li a {
border-bottom: dashed 1px #2f4f4f;
}

目次デザインの色を好きな色への変更方法

もし私と一緒の目次デザインにしたけど色を変えたいという方には、上記のコードの中に『#2f4f4f』の場所が全８箇所あります。その全８箇所全てを変えれば同じデザインですが、違う色に変更することができます。自分のお好みの色に変えてみるのもいいかもしれませんね。

こちらはカラーチャートになります。こちらか色をコピペして貼り付ければ、とても簡単に変更ができます。

WEB色見本原色大辞典 – HTMLカラーコード

まとめ

今回は私が使っているはてなブログの『Minimalism』で目次の表示・非表示と目次デザインについて紹介しました！！！

どうだったでしょうか？

はじめにまとめてカスタマイズしてしまえば、記事を書くことに集中できますのでパッパとカスタマイズしちゃいましょう（笑）

では今回はここまでです。