「コピペで一発」はてなブログで使えるもくじデザイン20個を一気に紹介する。

目次デザインの素材集ということで、じゃんじゃん紹介していこうと思います。

実は「はてなブログ」で目次のデザインをカスタマイズする方法は既に記事にしているのですが、

そこまでしてカスタマイズする気はないから完成系をよこせ。

と言われているような気がして3週間くらい寝付けなかった(嘘)ので今回こんな記事です。

また、これを元に少し工夫を加えて自分好みにするのもいいかもしれません。

その場合はこの記事を参考にして下され。

「永久保存版!」はてなブログの目次デザインを自分好みにカスタマイズする方法

ちなみに私の目次はこんな感じなのですよ。

以下注意点です。

念のためにバックアップはとっておいてください。

またこの記事では、当サイトが公開しているカスタマイズ用のカード型テーマ「PLAIN(プレーン)」を元にカスタマイズを行います。

みなさんが現時点で使用しているテーマやカスタマイズ環境によってはうまくいかない場合もありますのでご理解ください。

PLAIN - テーマ ストア

目次のカスタマイズ方法

目次のカスタマイズは、デザイン設定の記事上部のところで行います。

デザインのページから、スパナのマーク→記事と進んで記事上の部分にコードを追加する形になります。

f:id:oyomiyo:20180928122837p:plain

シンプル系

まずはシンプルなものから。

シンプル系1

f:id:oyomiyo:20181013135146p:plain
<style type="text/css">

.entry-content .table-of-contents {
    margin: 2em 0; /*目次上下の余白*/
    padding: 0 0 16px 0; /*目次下内部余白*/
    border: 1px solid #ddd; /*枠線のスタイル*/
    background-color: #fff; /*目次内背景色*/
    font-size: 0.95em; /*文字サイズ*/
    font-weight: normal; /*文字太さ*/
}

.entry-content .table-of-contents a {
    text-decoration:; /*文字装飾*/
    color:; /*文字色*/
}

.table-of-contents:before {
    content: "目次"; /*ここでタイトルを書き換える*/
    display: inline-block;
    width: 100%;
    padding: 7px; /*タイトル内余白*/
    margin-bottom: 10px; /*タイトル下余白*/
    box-sizing: border-box;
    text-align: center; /*タイトル文字の位置*/
    font-size: 1.0em; /*タイトル文字大きさ*/
    font-weight: bold; /*タイトル文字太さ*/
    color: #666; /*タイトル文字色*/
    background-color: #ddd; /*タイトル背景色*/
}

.table-of-contents ul {
    margin: 0;
    padding: 0 !important;
    border: none;
}

.table-of-contents li {
    margin: 0 0 0 2.5em; /*左側余白*/
    padding: 0.6em 0 0 0 !important; /*行間余白*/
    list-style-type: decimal; /*リストタイプ*/
    color:; /*リスト色*/
    border: none;
}

</style>

どーすか。

シンプル系2

f:id:oyomiyo:20181013133013p:plain
<style type="text/css">

.entry-content .table-of-contents {
    margin: 2em 0; /*目次上下の余白*/
    padding: 0 0 16px 0; /*目次下内部余白*/
    border: 1px solid #000; /*枠線のスタイル*/
    background-color: #fff; /*目次内背景色*/
    font-size: 0.95em; /*文字サイズ*/
    font-weight: normal; /*文字太さ*/
}

.entry-content .table-of-contents a {
    text-decoration:; /*文字装飾*/
    color:; /*文字色*/
}

.table-of-contents:before {
    content: "目次"; /*ここでタイトルを書き換える*/
    display: inline-block;
    width: 100%;
    padding: 7px; /*タイトル内余白*/
    margin-bottom: 10px; /*タイトル下余白*/
    box-sizing: border-box;
    text-align: center; /*タイトル文字の位置*/
    font-size: 1.0em; /*タイトル文字大きさ*/
    font-weight: bold; /*タイトル文字太さ*/
    color: #333; /*タイトル文字色*/
    background-color: #ddd; /*タイトル背景色*/
    border-bottom: 1px solid #000;
}

.table-of-contents ul {
    margin: 0;
    padding: 0 !important;
    border: none;
}

.table-of-contents li {
    margin: 0 0 0 2.5em; /*左側余白*/
    padding: 0.6em 0 0 0 !important; /*行間余白*/
    list-style-type: decimal; /*リストタイプ*/
    color:; /*リスト色*/
    border: none;
}

</style>

線を濃くして、その他いろいろしてます。私のブログの真面目な印象とよくマッチしそうですね。(5回頷く)

シンプル系3

f:id:oyomiyo:20181013135230p:plain
<style type="text/css">

.entry-content .table-of-contents {
    margin: 2em 0; /*目次上下の余白*/
    padding: 0 0 16px 0; /*目次下内部余白*/
    border: 3px solid #999; /*枠線のスタイル*/
    background-color: #fff; /*目次内背景色*/
    font-size: 0.95em; /*文字サイズ*/
    font-weight: normal; /*文字太さ*/
}

.entry-content .table-of-contents a {
    text-decoration:; /*文字装飾*/
    color:; /*文字色*/
}

.table-of-contents:before {
    content: "目次"; /*ここでタイトルを書き換える*/
    display: inline-block;
    width: 100%;
    padding: 7px; /*タイトル内余白*/
    margin-bottom: 10px; /*タイトル下余白*/
    box-sizing: border-box;
    text-align: center; /*タイトル文字の位置*/
    font-size: 1.0em; /*タイトル文字大きさ*/
    font-weight: bold; /*タイトル文字太さ*/
    color: #666; /*タイトル文字色*/
    background-color: #f5f5f5; /*タイトル背景色*/
    border-bottom: 3px solid #999;
}

.table-of-contents ul {
    margin: 0;
    padding: 0 !important;
    border: none;
}

.table-of-contents li {
    margin: 0 0 0 2.5em; /*左側余白*/
    padding: 0.6em 0 0 0 !important; /*行間余白*/
    list-style-type: decimal; /*リストタイプ*/
    color:; /*リスト色*/
    border: none;
}

</style>

ちょっとだけ枠を強調してみるバージョンですね。

シンプル系4

f:id:oyomiyo:20181013135547p:plain
<style type="text/css">

.entry-content .table-of-contents {
    margin: 2em 0; /*目次上下の余白*/
    padding: 0 0 16px 0; /*目次下内部余白*/
    border: none; /*枠線のスタイル*/
    background-color: #f5f5f5; /*目次内背景色*/
    font-size: 0.95em; /*文字サイズ*/
    font-weight: normal; /*文字太さ*/
}

.entry-content .table-of-contents a {
    text-decoration:; /*文字装飾*/
    color:; /*文字色*/
}

.table-of-contents:before {
    content: "目次"; /*ここでタイトルを書き換える*/
    display: inline-block;
    width: 100%;
    padding: 7px; /*タイトル内余白*/
    margin-bottom: 10px; /*タイトル下余白*/
    box-sizing: border-box;
    text-align: center; /*タイトル文字の位置*/
    font-size: 1.0em; /*タイトル文字大きさ*/
    font-weight: bold; /*タイトル文字太さ*/
    color: #666; /*タイトル文字色*/
    background-color: #ddd; /*タイトル背景色*/
}

.table-of-contents ul {
    margin: 0;
    padding: 0 !important;
    border: none;
}

.table-of-contents li {
    margin: 0 0 0 2.5em; /*左側余白*/
    padding: 0.6em 0 0 0 !important; /*行間余白*/
    list-style-type: decimal; /*リストタイプ*/
    color:; /*リスト色*/
    border: none;
}

</style>

ワクを見ても全然ワクワクしない人むけ。(黙れ)

シンプル系5

f:id:oyomiyo:20181013140459p:plain
<style type="text/css">

.entry-content .table-of-contents {
    margin: 2em 0; /*目次上下の余白*/
    padding: 0 0 16px 0; /*目次下内部余白*/
    border: 3px solid #365899; /*枠線のスタイル*/
    background-color: #f5f5f5; /*目次内背景色*/
    font-size: 0.95em; /*文字サイズ*/
    font-weight: normal; /*文字太さ*/
}

.entry-content .table-of-contents a {
    text-decoration:; /*文字装飾*/
    color:; /*文字色*/
}

.table-of-contents:before {
    content: "目次"; /*ここでタイトルを書き換える*/
    display: inline-block;
    width: 100%;
    padding: 7px; /*タイトル内余白*/
    margin-bottom: 10px; /*タイトル下余白*/
    box-sizing: border-box;
    text-align: center; /*タイトル文字の位置*/
    font-size: 1.0em; /*タイトル文字大きさ*/
    font-weight: bold; /*タイトル文字太さ*/
    color: #666; /*タイトル文字色*/
    background-color: #dde5e8; /*タイトル背景色*/
    border-bottom: 3px solid #365899;
}

.table-of-contents ul {
    margin: 0;
    padding: 0 !important;
    border: none;
}

.table-of-contents li {
    margin: 0 0 0 2.5em; /*左側余白*/
    padding: 0.6em 0 0 0 !important; /*行間余白*/
    list-style-type: decimal; /*リストタイプ*/
    color:; /*リスト色*/
    border: none;
}

</style>

そろそろ飽きてきたのでテイストを変えましょうね。

可愛い系

私はオスなんでいまいち可愛い系がどういうものなのか分からないが頑張ろう。

可愛い系1

f:id:oyomiyo:20181013141256p:plain
<style type="text/css">

.entry-content .table-of-contents {
    margin: 2em 0; /*目次上下の余白*/
    padding: 0 0 16px 0; /*目次下内部余白*/
    border: 3px solid #fac; /*枠線のスタイル*/
    border-top: none;
    background-color: #ffaacc1c; /*目次内背景色*/
    font-size: 0.95em; /*文字サイズ*/
    font-weight: normal; /*文字太さ*/
}

.entry-content .table-of-contents a {
    text-decoration:; /*文字装飾*/
    color:; /*文字色*/
}

.table-of-contents:before {
    content: "目次"; /*ここでタイトルを書き換える*/
    display: inline-block;
    width: 100%;
    padding: 7px; /*タイトル内余白*/
    margin-bottom: 10px; /*タイトル下余白*/
    box-sizing: border-box;
    text-align: center; /*タイトル文字の位置*/
    font-size: 1.0em; /*タイトル文字大きさ*/
    font-weight: bold; /*タイトル文字太さ*/
    color: #666; /*タイトル文字色*/
    background-color: #fac; /*タイトル背景色*/
}

.table-of-contents ul {
    margin: 0;
    padding: 0 !important;
    border: none;
}

.table-of-contents li {
    margin: 0 0 0 2.5em; /*左側余白*/
    padding: 0.6em 0 0 0 !important; /*行間余白*/
    list-style-type: decimal; /*リストタイプ*/
    color:; /*リスト色*/
    border: none;
}

</style>

ピンクを使えば可愛い系になると思いこんでる系

頑張れ俺。

可愛い系2

f:id:oyomiyo:20181013142746p:plain
<style type="text/css">

.entry-content .table-of-contents {
    margin: 2em 0; /*目次上下の余白*/
    padding: 0 0 16px 0; /*目次下内部余白*/
    5px solid #ffe0dd; /*枠線のスタイル*/
    background-color: #fff; /*目次内背景色*/
    font-size: 0.95em; /*文字サイズ*/
    font-weight: normal; /*文字太さ*/
    border-radius: 10px;
}

.entry-content .table-of-contents a {
    text-decoration:; /*文字装飾*/
    color:; /*文字色*/
}

.table-of-contents:before {
    content: "目次"; /*ここでタイトルを書き換える*/
    display: inline-block;
    width: 100%;
    padding: 7px; /*タイトル内余白*/
    margin-bottom: 10px; /*タイトル下余白*/
    box-sizing: border-box;
    text-align: center; /*タイトル文字の位置*/
    font-size: 1.0em; /*タイトル文字大きさ*/
    font-weight: bold; /*タイトル文字太さ*/
    color: #666; /*タイトル文字色*/
    background-color: #f5f5f5; /*タイトル背景色*/
    border-radius: 5px 5px 0 0;
    border-bottom: 5px solid #ffe0dd;
}

.table-of-contents ul {
    margin: 0;
    padding: 0 !important;
    border: none;
}

.table-of-contents li {
    margin: 0 0 0 2.5em; /*左側余白*/
    padding: 0.6em 0 0 0 !important; /*行間余白*/
    list-style-type: decimal; /*リストタイプ*/
    color:; /*リスト色*/
    border: none;
}

</style>

「可愛い」と調べたら「正義」と出てきた。

もう訳が分からない。

可愛い系3

f:id:oyomiyo:20181013143651p:plain
<style type="text/css">

.entry-content .table-of-contents {
    margin: 2em 0; /*目次上下の余白*/
    padding: 0 0 16px 0; /*目次下内部余白*/
    border: 5px solid #b1cdf8; /*枠線のスタイル*/
    background-color: #fff; /*目次内背景色*/
    font-size: 0.95em; /*文字サイズ*/
    font-weight: normal; /*文字太さ*/
    border-radius: 10px;
}

.entry-content .table-of-contents a {
    text-decoration:; /*文字装飾*/
    color:; /*文字色*/
}

.table-of-contents:before {
    content: "目次"; /*ここでタイトルを書き換える*/
    display: inline-block;
    width: 100%;
    padding: 7px; /*タイトル内余白*/
    margin-bottom: 10px; /*タイトル下余白*/
    box-sizing: border-box;
    text-align: center; /*タイトル文字の位置*/
    font-size: 1.0em; /*タイトル文字大きさ*/
    font-weight: bold; /*タイトル文字太さ*/
    color: #fff; /*タイトル文字色*/
    background-color: #577fbc; /*タイトル背景色*/
    border-radius: 5px 5px 0 0;
    border-bottom: 5px solid #b1cdf8;
}

.table-of-contents ul {
    margin: 0;
    padding: 0 !important;
    border: none;
}

.table-of-contents li {
    margin: 0 0 0 2.5em; /*左側余白*/
    padding: 0.6em 0 0 0 !important; /*行間余白*/
    list-style-type: decimal; /*リストタイプ*/
    color:; /*リスト色*/
    border: none;
}

</style>

可愛いを探してる。

目次のタイトル文字を白抜きにするパターン。

可愛い系4

f:id:oyomiyo:20181013144630p:plain
<style type="text/css">

.entry-content .table-of-contents {
    margin: 2em 0; /*目次上下の余白*/
    padding: 0 0 16px 0; /*目次下内部余白*/
    border: 5px dashed #ff9191; /*枠線のスタイル*/
    background-color: #fff; /*目次内背景色*/
    font-size: 0.95em; /*文字サイズ*/
    font-weight: normal; /*文字太さ*/
    border-radius: 20px;
}

.entry-content .table-of-contents a {
    text-decoration:; /*文字装飾*/
    color:; /*文字色*/
}

.table-of-contents:before {
    content: "目次"; /*ここでタイトルを書き換える*/
    display: inline-block;
    width: 100%;
    padding: 7px; /*タイトル内余白*/
    margin-bottom: 10px; /*タイトル下余白*/
    box-sizing: border-box;
    text-align: center; /*タイトル文字の位置*/
    font-size: 1.0em; /*タイトル文字大きさ*/
    font-weight: bold; /*タイトル文字太さ*/
    color: #fff; /*タイトル文字色*/
    background-color: #ff9191; /*タイトル背景色*/
    border-radius: 15px 15px 0 0;
}

.table-of-contents ul {
    margin: 0;
    padding: 0 !important;
    border: none;
}

.table-of-contents li {
    margin: 0 0 0 2.5em; /*左側余白*/
    padding: 0.6em 0 0 0 !important; /*行間余白*/
    list-style-type: decimal; /*リストタイプ*/
    color:; /*リスト色*/
    border: none;
}

</style>

破線とか。

可愛い系5

f:id:oyomiyo:20181013145348p:plain
<style type="text/css">

.entry-content .table-of-contents {
    margin: 2em 0; /*目次上下の余白*/
    padding: 0 0 16px 0; /*目次下内部余白*/
    border: 3px solid #7bdcff; /*枠線のスタイル*/
    background-color: #effbff; /*目次内背景色*/
    font-size: 0.95em; /*文字サイズ*/
    font-weight: normal; /*文字太さ*/
}

.entry-content .table-of-contents a {
    text-decoration:; /*文字装飾*/
    color:; /*文字色*/
}

.table-of-contents:before {
    content: "目次"; /*ここでタイトルを書き換える*/
    display: inline-block;
    width: 100%;
    padding: 7px; /*タイトル内余白*/
    margin-bottom: 10px; /*タイトル下余白*/
    box-sizing: border-box;
    text-align: center; /*タイトル文字の位置*/
    font-size: 1.0em; /*タイトル文字大きさ*/
    font-weight: bold; /*タイトル文字太さ*/
    color: #666; /*タイトル文字色*/
    background-color: #b1eaff; /*タイトル背景色*/
    border-bottom: 3px solid #7bdcff;
}

.table-of-contents ul {
    margin: 0;
    padding: 0 !important;
    border: none;
}

.table-of-contents li {
    margin: 0 0 0 2.5em; /*左側余白*/
    padding: 0.6em 0 0 0 !important; /*行間余白*/
    list-style-type: decimal; /*リストタイプ*/
    color:; /*リスト色*/
    border: none;
}

</style>

解放された。

カッコイイ系

カッコイイ系1

f:id:oyomiyo:20181014190302p:plain
<style type="text/css">

.entry-content .table-of-contents {
    margin: 2em 0; /*目次上下の余白*/
    padding: 0 0 16px 0; /*目次下内部余白*/
    border: 3px solid #666; /*枠線のスタイル*/
    background-color: #fff; /*目次内背景色*/
    font-size: 0.95em; /*文字サイズ*/
    font-weight: normal; /*文字太さ*/
    border-top: none;
}

.entry-content .table-of-contents a {
    text-decoration:; /*文字装飾*/
    color:; /*文字色*/
}

.table-of-contents:before {
    content: "目次"; /*ここでタイトルを書き換える*/
    display: inline-block;
    width: 100%;
    padding: 7px; /*タイトル内余白*/
    margin-bottom: 10px; /*タイトル下余白*/
    box-sizing: border-box;
    text-align: center; /*タイトル文字の位置*/
    font-size: 1.0em; /*タイトル文字大きさ*/
    font-weight: bold; /*タイトル文字太さ*/
    color: #f5f5f5; /*タイトル文字色*/
    background-color: #666; /*タイトル背景色*/
}

.table-of-contents ul {
    margin: 0;
    padding: 0 !important;
    border: none;
}

.table-of-contents li {
    margin: 0 0 0 2.5em; /*左側余白*/
    padding: 0.6em 0 0 0 !important; /*行間余白*/
    list-style-type: decimal; /*リストタイプ*/
    color: #666; /*リスト色*/
    border: none;
}

</style>

シンプルで男性的な目次デザインだと思う。

次!

カッコイイ系2

f:id:oyomiyo:20181014215127p:plain
<style type="text/css">

.entry-content .table-of-contents {
    margin: 2em 0; /*目次上下の余白*/
    padding: 0 0 16px 0; /*目次下内部余白*/
    border: 2px solid #1d2129; /*枠線のスタイル*/
    background-color: #fff; /*目次内背景色*/
    font-size: 0.95em; /*文字サイズ*/
    font-weight: normal; /*文字太さ*/
}

.entry-content .table-of-contents a {
    text-decoration:; /*文字装飾*/
    color:; /*文字色*/
}

.table-of-contents:before {
    content: "目次"; /*ここでタイトルを書き換える*/
    display: inline-block;
    width: 100%;
    padding: 7px; /*タイトル内余白*/
    margin-bottom: 10px; /*タイトル下余白*/
    box-sizing: border-box;
    text-align: center; /*タイトル文字の位置*/
    font-size: 1.0em; /*タイトル文字大きさ*/
    font-weight: bold; /*タイトル文字太さ*/
    color: #1d2129; /*タイトル文字色*/
    background-color: #b9c9e0; /*タイトル背景色*/
    border-bottom: 2px solid #1d2129;
}

.table-of-contents ul {
    margin: 0;
    padding: 0 !important;
    border: none;
}

.table-of-contents li {
    margin: 0 0 0 2.5em; /*左側余白*/
    padding: 0.6em 0 0 0 !important; /*行間余白*/
    list-style-type: decimal; /*リストタイプ*/
    color: #1d2129; /*リスト色*/
    border: none;
}

</style>

爽やかな青を使ってみました。

目次のリンク色が青なので全体的に落ち着いて見えるはずです。

カッコイイ系3

f:id:oyomiyo:20181014221404p:plain
<style type="text/css">

.entry-content .table-of-contents {
    margin: 2em 0; /*目次上下の余白*/
    padding: 0 0 16px 0; /*目次下内部余白*/
    border: none; /*枠線のスタイル*/
    background-color: #d8e8ff; /*目次内背景色*/
    font-size: 0.95em; /*文字サイズ*/
    font-weight: normal; /*文字太さ*/
    box-shadow: 5px 5px 9px #a4a2a2;
}

.entry-content .table-of-contents a {
    text-decoration:; /*文字装飾*/
    color: #4267b2; /*文字色*/
}

.table-of-contents:before {
    content: "目次"; /*ここでタイトルを書き換える*/
    display: inline-block;
    width: 100%;
    padding: 7px; /*タイトル内余白*/
    margin-bottom: 10px; /*タイトル下余白*/
    box-sizing: border-box;
    text-align: center; /*タイトル文字の位置*/
    font-size: 1.0em; /*タイトル文字大きさ*/
    font-weight: bold; /*タイトル文字太さ*/
    color: #fff; /*タイトル文字色*/
    background-color: #365899; /*タイトル背景色*/
}

.table-of-contents ul {
    margin: 0;
    padding: 0 !important;
    border: none;
}

.table-of-contents li {
    margin: 0 0 0 2.5em; /*左側余白*/
    padding: 0.6em 0 0 0 !important; /*行間余白*/
    list-style-type: decimal; /*リストタイプ*/
    color: #1d2129; /*リスト色*/
    border: none;
}

</style>

みんな大好き影の登場。

私は目次はひっそりと使いたいので使いませんが。

カッコイイ系4

f:id:oyomiyo:20181014222353p:plain
<style type="text/css">

.entry-content .table-of-contents {
    margin: 2em 0; /*目次上下の余白*/
    padding: 0 0 16px 0; /*目次下内部余白*/
    border: 6px solid #666; /*枠線のスタイル*/
    background-color: #fcfcfc; /*目次内背景色*/
    font-size: 0.95em; /*文字サイズ*/
    font-weight: bold; /*文字太さ*/
}

.entry-content .table-of-contents a {
    text-decoration: none; /*文字装飾*/
    color:; /*文字色*/
}

.table-of-contents:before {
    content: "目次"; /*ここでタイトルを書き換える*/
    display: inline-block;
    width: 100%;
    padding: 7px; /*タイトル内余白*/
    margin-bottom: 10px; /*タイトル下余白*/
    box-sizing: border-box;
    text-align: center; /*タイトル文字の位置*/
    font-size: 1.0em; /*タイトル文字大きさ*/
    font-weight: bold; /*タイトル文字太さ*/
    color: #666; /*タイトル文字色*/
    background-color: #fcfcfc; /*タイトル背景色*/
    border-bottom: 6px solid #666;
}

.table-of-contents ul {
    margin: 0;
    padding: 0 !important;
    border: none;
}

.table-of-contents li {
    margin: 0 0 0 2.5em; /*左側余白*/
    padding: 0.6em 0 0 0 !important; /*行間余白*/
    list-style-type: decimal; /*リストタイプ*/
    color:; /*リスト色*/
    border: none;
}

</style>

シンプルでカッコイイ目次スタイル。

枠線が細いほうがスッキリとしたイメージになりカッコイイが、敢えて太くして男性らしさを出してみました。

リストも部分のアンダーラインを消しているところがポイントです。

カッコイイ系5

f:id:oyomiyo:20181015131927p:plain
<style type="text/css">

.entry-content .table-of-contents {
    margin: 2em 0; /*目次上下の余白*/
    padding: 0 0 16px 0; /*目次下内部余白*/
    border: 3px solid #454545; /*枠線のスタイル*/
    background-color: #fff; /*目次内背景色*/
    font-size: 0.95em; /*文字サイズ*/
    font-weight: normal; /*文字太さ*/
}

.entry-content .table-of-contents a {
    text-decoration: none; /*文字装飾*/
    color:; /*文字色*/
}

.table-of-contents:before {
    content: "目次"; /*ここでタイトルを書き換える*/
    display: inline-block;
    width: 100%;
    padding: 7px; /*タイトル内余白*/
    margin-bottom: 10px; /*タイトル下余白*/
    box-sizing: border-box;
    text-align: center; /*タイトル文字の位置*/
    font-size: 1.0em; /*タイトル文字大きさ*/
    font-weight: bold; /*タイトル文字太さ*/
    color: #454545; /*タイトル文字色*/
    background-color: #fffa88; /*タイトル背景色*/
    border-bottom: 3px solid #454545;
}

.table-of-contents ul {
    margin: 0;
    padding: 0 !important;
    border: none;
}

.table-of-contents li {
    margin: 0 0 0 2.5em; /*左側余白*/
    padding: 0.6em 0 0 0 !important; /*行間余白*/
    list-style-type: decimal; /*リストタイプ*/
    color:; /*リスト色*/
    border: none;
}

</style>

目次タイトルの黄色が目を引きますね。アリだと思います。

次は個性はデザインの目次たちをご紹介します。

個性派デザイン系

言い換えると他の人と被りにくいが、被った場合100%バレる系。

個性派デザイン系1

f:id:oyomiyo:20181015133522p:plain
<style type="text/css">

.entry-content .table-of-contents {
    margin: 2em 0; /*目次上下の余白*/
    padding: 0 0 16px 0; /*目次下内部余白*/
    border: 2px solid #000; /*枠線のスタイル*/
    background-color: #fff; /*目次内背景色*/
    font-size: 0.95em; /*文字サイズ*/
    font-weight: bold; /*文字太さ*/
    box-shadow: 9px 9px black;
}

.entry-content .table-of-contents a {
    text-decoration: none; /*文字装飾*/
    color: #000; /*文字色*/
}

.table-of-contents:before {
    content: "M O K U J I"; /*ここでタイトルを書き換える*/
    display: inline-block;
    width: 100%;
    padding: 7px; /*タイトル内余白*/
    margin-bottom: 10px; /*タイトル下余白*/
    box-sizing: border-box;
    text-align: center; /*タイトル文字の位置*/
    font-size: 1.0em; /*タイトル文字大きさ*/
    font-weight: bold; /*タイトル文字太さ*/
    color: #000; /*タイトル文字色*/
    background-color: #ff4545; /*タイトル背景色*/
    border-bottom: 2px solid #000;
}

.table-of-contents ul {
    margin: 0;
    padding: 0 !important;
    border: none;
}

.table-of-contents li {
    margin: 0 0 0 2.5em; /*左側余白*/
    padding: 0.6em 0 0 0 !important; /*行間余白*/
    list-style-type: decimal; /*リストタイプ*/
    color: #f00; /*リスト色*/
    border: none;
}

</style>

芸術は爆発だ。

モチーフはいうまでもなく「太陽の塔」。

個性派デザイン系2

f:id:oyomiyo:20181017153131p:plain
<style type="text/css">

.entry-content .table-of-contents {
    margin: 2em 0;
    padding: 0 0 16px 0;
    background-color: #fff;
    font-size: 0.95em;
    font-weight: normal;
    border: 6px double #666;
}

.entry-content .table-of-contents a {
    text-decoration: none;
    color: #233f75;
    border-bottom: 4px double #000;
}

.table-of-contents:before {
    content: "M O K U J I";
    display: inline-block;
    width: 100%;
    padding: 7px;
    margin-bottom: 10px;
    box-sizing: border-box;
    text-align: center;
    font-size: 1.0em;
    font-weight: bold;
    color: #233f75;
    background-color: #fff;
    border-bottom: 6px double #666;
}

.table-of-contents ul {
    margin: 0;
    padding: 0 !important;
    border: none;
}

.table-of-contents li {
    margin: 0 0 0 2.5em;
    padding: 0.6em 0 0 0 !important;
    list-style-type: decimal;
    border: none;
}

</style>

芸術は爆発、、、なのか?

芸術は二重線なのかもしれない。

個性派デザイン系3

f:id:oyomiyo:20181017150100p:plain
<style type="text/css">

.entry-content .table-of-contents {
    margin: 2em 0;
    padding: 0 0 16px 0;
    border: 3px solid #ffc13a;
    background-color: #fff;
    font-size: 0.95em;
    font-weight: normal;
    border-radius: 30px;
    box-shadow: 5px 5px 0px red;
}

.entry-content .table-of-contents a {
    text-decoration: none;
    color: #f06100;
}

.table-of-contents:before {
    content: "目 次";
    display: inline-block;
    width: 100%;
    padding: 7px;
    margin-bottom: 10px;
    box-sizing: border-box;
    text-align: center;
    font-size: 1.0em;
    font-weight: bold;
    color: #feff25;
    background-color: #f00;
    border-radius: 27px 27px 0 0;
    border-bottom: 3px solid #ffc13a;
}

.table-of-contents ul {
    margin: 0;
    padding: 0 !important;
    border: none;
}

.table-of-contents li {
    margin: 0 0 0 2.5em;
    padding: 0.6em 0 0 0 !important;
    list-style-type: decimal;
    color: #000;
    border: none;
    font-weight: bold;
}

</style>

中華料理店のホームページにどうぞ。(笑)

個性派デザイン系4

f:id:oyomiyo:20181017155533p:plain
<style type="text/css">

.entry-content .table-of-contents {
    margin: 2em 0;
    padding: 0 0 16px 0;
    background-color: #ffffff;
    font-size: 0.95em;
    font-weight: normal;
    border: 10px groove #25ab5d;
}

.entry-content .table-of-contents a {
    text-decoration: none;
    color: #454545;
    border-bottom: 3px solid #10502a;
}

.table-of-contents:before {
    content: "M O K U J I";
    display: inline-block;
    width: 100%;
    padding: 7px;
    margin-bottom: 10px;
    box-sizing: border-box;
    text-align: center;
    font-size: 1.0em;
    font-weight: bold;
    color: #ffffff;
    background-color: #187941;
    border-bottom: 10px groove #25ab5d;
}

.table-of-contents ul {
    margin: 0;
    padding: 0 !important;
    border: none;
}

.table-of-contents li {
    margin: 0 0 0 2.5em;
    padding: 0.6em 0 0 0 !important;
    list-style-type: decimal;
    border: none;
    font-weight: bold;
}

</style>

抹茶チョコレートを選んでしまいがちなあなたに。

「MOKUJI」を「MEIJI」に変えてもおそらくバレません。

※「MORINAGA」は危険。

個性派デザイン系5

f:id:oyomiyo:20181015135642p:plain
<style type="text/css">

.entry-content .table-of-contents {
  margin: 2em 0;
    padding: 0 0 16px 0;
    border: 5px inset #e2e2e2;
    font-size: 0.95em;
    font-weight: normal;
    text-shadow: 4px 4px red;
    background-color: #e9aaff;
    background: linear-gradient(-135deg, #ff7b00, #9500ff);
}

.entry-content .table-of-contents a {
    text-decoration:; /*文字装飾*/
    color: #feff2d; /*文字色*/
}

.table-of-contents:before {
    content: "目次";
    display: inline-block;
    width: 100%;
    padding: 7px;
    margin-bottom: 10px;
    box-sizing: border-box;
    text-align: center;
    font-size: 1.0em;
    font-weight: bold;
    color: #feff2d;
    background-color: #5a3434;
}

.table-of-contents ul {
    margin: 0;
    padding: 0 !important;
    border: none;
}

.table-of-contents li {
    margin: 0 0 0 2.5em;
    padding: 0.6em 0 0 0 !important;
    list-style-type: decimal;
    color: aqua;
    border: none;
}

</style>

使いどころが分かれば教えてください。

今日はここらへんで失礼します。

最後に

気に入ったのありましたかー?

ありましたよねー?

絶対にありましたよねー?

 

...。

 

もっとこういうデザインのものが作ってほしいなどの要望があれば、(その時のキブンに応じて)お答えする可能性もありますのでお気軽にメールください。

ご自分でできる人はご自分でどうぞ。

もっかい貼っときます。

「永久保存版!」はてなブログの目次デザインを自分好みにカスタマイズする方法

ではまた。