目次のh3を出したり隠したりするカスタマイズ

MOVIE

ユーザーさんがクリックするとh3の見出しが表示されるカスタマイズです。

このカスタマイズはね、ちょっと難易度が高いんよ

クリックして要素を出したり隠したりするには、inputやlabelがいるからな、そこはしゃーなしやで

このカスタマイズは注意点がいくつかあります。

一括で目次を変更することができません
ウィジェット（h2見出し前とか）で挿入するとうまく動作しません
記事に直接コードを書く必要があります

この3つの注意点があるため、ぼくは再利用ブロックをつかったり、有料のテンプレートエディタを使って簡単に挿入できるようにしています。

カスタマイズは自己責任でやろう

自己責任の意味がわからない方、初めてカスタマイズする方は、必ずこちらの記事を読んでくださいね。

カスタマイズは自己責任。ぼくはこんな風に思っています。

見たい場所へジャンプ

1 カスタマイズするための準備
- 1.1 投稿画面での準備
- 1.2 おすすめのCSSコード追加方法
2 カスタマイズに必要なCSSコード
- 2.1 コメントなし
3 うまくできたか確認
4 くまからのお礼
5 まとめ・感想・雑談・こだわり

カスタマイズするための
準備

目次へ戻る

投稿画面での準備

今回は<p>タグが入ったりするだけでもずれちゃいます。

ぼくは作成したHTMLをそのままこじかテンプレートエディタ（有料）にぶち込んで、ショートコードで吐き出しているため問題なく動いています。

ただし、一括でもくじの変更はできません。直書きになります。

挿入するコード

<div class="oph-box">
<input type="checkbox" id="oph" />
<label for="oph" class="oph-btn"><i class="fas fa-angle-down"></i></label>
[toc]
</div>

[toc]

</div>

上のコードをテキストエディタに貼り付けます。

自動段落追加をしているとデザインがくずれてしまう可能性があります。

こじテンを持ってない人はAddQuicktagで登録しておくと簡単に挿入できるよ

まぁ、正直ぜんぶの目次を変えるのはクソめんどいよね！誰かなんとかしてほしいw

※ウィジェットに入れて一括挿入しようとしたのですが、ウィジェットで挿入すると開閉ができなくなってしまったので、やめました。

追加方法	難しさ
追加CSS
テーマエディター
FTPソフト

カスタマイズに必要な
CSSコード

目次へ戻る

ãã®ç»åã«ã¯ alt å±æ§ãæå®ããã¦ãããããã¡ã¤ã«åã¯ kopinosikata.png ã§ã

コメントなし

/*--------------------------------------
  目次　変更
--------------------------------------*/
div#ez-toc-container {
    margin: 0 0 2em 0;
    padding: 0;
    border: solid 2px;
    border-top: none;
    border-radius: 3px;
    box-shadow: none;
}
.entry-content .ez-toc-title-container {
    display: block;
    margin: 0;
    padding: 0;
    font-size: 18px;
    line-height: 60px;
    font-weight: 500;
    text-align: center;
}
p.ez-toc-title {
    color: white;
}
.entry-content .ez-toc-title-container:before{
    display: none;
}
#ez-toc-container ul {
    list-style-type: decimal;
}
#ez-toc-container .ez-toc-list {
    margin: 0;
    padding: 2em 6% 1em 12%;
    counter-reset: num;
    position: relative;
}
#ez-toc-container .ez-toc-list li {
    position: relative;
}
#ez-toc-container .ez-toc-list > li:before {
    counter-increment: num;
    position: absolute;
    display: inline-block;
    left: -36px;
    width: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    content: counter(num)"";
    font-family: 'Quicksand',sans-serif;
    color: #fff;
}
#ez-toc-container ul {
    list-style-type: none;
}
#ez-toc-container ul li ul {
    list-style-type: decimal;
}
.ez-toc-list li a {
    display: inline-block;
    line-height: 2;
    width: 100%;
    padding: 0;
    vertical-align: top;
}
.ez-toc-list a:hover {
    text-decoration: none;
    opacity: .5;
}
.ez-toc-list:before {
    content: "クリックすると見出しにジャンプできます";
    opacity: .54;
    font-size: .8em;
    position: absolute;
    top: .8em;
    left: 0;
    display: inline-block;
    width: 100%;
    text-align: center;
}
@media only screen and (max-width: 480px){
#ez-toc-container .ez-toc-list {
    padding: 2em 6% 1em 18%;
}
.ez-toc-list:before {
    content: "タップすると見出しにジャンプできます";
}}
.oph-box{
    margin: 2em 0;
    position: relative;
}
.oph-btn {
    display: inline-block;
    width: 30px;
    line-height: 29px;
    padding-top: 1px;
    border-radius: 50%;
    text-align: center;
    position: absolute;
    z-index: 1;
    font-size: 1.1em;
    left: calc(100% - 45px);
    top: 45px;
}
.oph-btn i {
    transition: .3s ease-out;
}
.oph-box .ez-toc-list ul, #oph {
    height: 0;
    opacity: 0;
}
#oph:checked~#ez-toc-container .ez-toc-list li ul {
    height: auto;
    opacity: 1;
    transition: .3s ease-out;
}
#oph:checked~.oph-btn i {
    transform: rotate(180deg);
    transition: .3s ease-out;
}
/*****  カラー設定  *****/
#ez-toc-container {
    background: #f9f9f9;
    border-color: #5a5a5a;
}
.entry-content .ez-toc-title-container, #ez-toc-container .ez-toc-list > li:before {
    background: #5a5a5a;
}
.oph-btn {
    background: #f9f9f9;
}
/*****  右下の画像（いらない場合は下のコードは削除）  *****/
.ez-toc-list:after {
    content: url(画像URL);
    position: absolute;
    bottom: -33px;
    right: 2px;
    opacity: 0.6;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

/*--------------------------------------

目次　変更

--------------------------------------*/

div#ez-toc-container {

margin: 0 0 2em 0;

padding: 0;

border: solid 2px;

border-top: none;

border-radius: 3px;

box-shadow: none;

}

.entry-content .ez-toc-title-container {

display: block;

margin: 0;

padding: 0;

font-size: 18px;

line-height: 60px;

font-weight: 500;

text-align: center;

}

p.ez-toc-title {

color: white;

}

.entry-content .ez-toc-title-container:before{

display: none;

}

#ez-toc-container ul {

list-style-type: decimal;

}

#ez-toc-container .ez-toc-list {

margin: 0;

padding: 2em 6% 1em 12%;

counter-reset: num;

position: relative;

}

#ez-toc-container .ez-toc-list li {

position: relative;

}

#ez-toc-container .ez-toc-list > li:before {

counter-increment: num;

position: absolute;

display: inline-block;

left: -36px;

width: 30px;

line-height: 30px;

text-align: center;

border-radius: 50%;

content: counter(num)"";

font-family: 'Quicksand',sans-serif;

color: #fff;

}

#ez-toc-container ul {

list-style-type: none;

}

#ez-toc-container ul li ul {

list-style-type: decimal;

}

.ez-toc-list li a {

display: inline-block;

line-height: 2;

width: 100%;

padding: 0;

vertical-align: top;

}

.ez-toc-list a:hover {

text-decoration: none;

opacity: .5;

}

.ez-toc-list:before {

content: "クリックすると見出しにジャンプできます";

opacity: .54;

font-size: .8em;

position: absolute;

top: .8em;

left: 0;

display: inline-block;

width: 100%;

text-align: center;

}

@media only screen and (max-width: 480px){

#ez-toc-container .ez-toc-list {

padding: 2em 6% 1em 18%;

}

.ez-toc-list:before {

content: "タップすると見出しにジャンプできます";

}}

.oph-box{

margin: 2em 0;

position: relative;

}

.oph-btn {

display: inline-block;

width: 30px;

line-height: 29px;

padding-top: 1px;

border-radius: 50%;

text-align: center;

position: absolute;

z-index: 1;

font-size: 1.1em;

left: calc(100% - 45px);

top: 45px;

}

.oph-btn i {

transition: .3s ease-out;

}

.oph-box .ez-toc-list ul, #oph {

height: 0;

opacity: 0;

}

#oph:checked~#ez-toc-container .ez-toc-list li ul {

height: auto;

opacity: 1;

transition: .3s ease-out;

}

#oph:checked~.oph-btn i {

transform: rotate(180deg);

transition: .3s ease-out;

}

/***** カラー設定 *****/

#ez-toc-container {

background: #f9f9f9;

border-color: #5a5a5a;

}

.entry-content .ez-toc-title-container, #ez-toc-container .ez-toc-list > li:before {

background: #5a5a5a;

}

.oph-btn {

background: #f9f9f9;

}

/***** 右下の画像（いらない場合は下のコードは削除） *****/

.ez-toc-list:after {

content: url(画像URL);

position: absolute;

bottom: -33px;

right: 2px;

opacity: 0.6;

}

かなり長くなりました（笑）

コードの下らへんにカラーと画像設定を持ってきたので、必要であれば変更してください。

うまくできたか
確認

目次へ戻る

確認する際は必ずキャッシュを削除してから見てください。

確認方法
「Ctrl」+「F5」（キャッシュ削除）

カスタマイズコードを追加CSS（またはテーマエディタ）に追加して保存したら、カスタマイズがうまく反映されているか、確認しましょう。

Mac bookやスマホではキャッシュ削除の仕方が違うので、詳しくはこちらの記事で確認してください。

カスタマイズはキャッシュ削除をマスターしてからです

くまからのお礼

目次へ戻る

本ブログ（for men）では、ひとりでも多くの方にブログを楽しんで欲しくてカスタマイズ記事を書いています。（決して自己満足ではありません）

もっとカスタマイズしたい人はこちらの記事を見てください。

【圧倒的SANGOカスタマイズまとめ】～ようこそ、沼への入口へ～

まとめ・感想・雑談・こだわり

今回のカスタマイズはGoogleがアップデートするっつってたので、ぼくも目次をアップデートしました。

[direct]<blockquote class=”twitter-tweet” data-lang=”ja”><p lang=”ja” dir=”ltr”>目次のアップデート完了٩( ᐛ )و<a href=”https://twitter.com/hashtag/%E7%8F%BE%E5%AE%9F%E9%80%83%E9%81%BF?src=hash&ref_src=twsrc%5Etfw”>#現実逃避</a> <a href=”https://t.co/EOO5xdDA1J”>pic.twitter.com/EOO5xdDA1J</a></p>— くまさん( ˶ˆ꒳ˆ˵ )カスタマイズァー (@Bearface18) <a href=”https://twitter.com/Bearface18/status/1135859803656339456?ref_src=twsrc%5Etfw”>2019年6月4日</a></blockquote>
<script async src=”https://platform.twitter.com/widgets.js” charset=”utf-8″></script>[/direct]

ブロガー辞めたら？

カスタマイズするための準備

投稿画面での準備

挿入するコード

おすすめのCSSコード追加方法

カスタマイズに必要なCSSコード

コメントなし

うまくできたか確認

くまからのお礼

まとめ・感想・雑談・こだわり

コメントを残す コメントをキャンセル

カスタマイズするための
準備

カスタマイズに必要な
CSSコード

うまくできたか
確認

コメントを残すコメントをキャンセル