zero-point-five

とある目標を達成すべく、その活動とオリジナルのキャラクター作成して発信していきます。

【はてなブログアレンジ】『目次』のアレンジ | 記事中の『目次』表示の変更方法

f:id:zero_point_5:20200729190610p:plain

当ブログではブログテーマを「Minimalism」を使用しています。

シンプルなデザインで非常に見やすい構成となっています。

 

記事のTOPに出てきて、その記事にどのようなことが書いてあるのかを読者に伝えるための『目次』。

標準使用から文言やデザインを変更したいと思っていても、 

『目次』の文言やデザインを変更したいけど、どうやって設定すればいいのかわからない
設定が難しそう・・・

このような方は多いのではないでしょうか?

でも今回紹介するやり方だと、

めっちゃめちゃ簡単!こんなのチョチョイのチョイ!!

 

と言うことで備忘録もかねて、

今回は、『目次』をアレンジする方法について紹介します。

 

この記事でわかること!

・『目次』の文言を変更方法
・『目次』のデザインの変更方法
 →文言変更・デザイン変更はコピペだけで簡単にアレンジできちゃう! 

 

Before→After

今回ご紹介するアレンジでBefore→Afterどうなるのかイメージになります。

 

Before

標準使用のBeforeです。(当ブログより)

f:id:zero_point_5:20200728182236p:plain

『目次』の文言は漢字で表示され、その下に大見出し・中見出し・小見出しとなります。

非常にシンプルなのですが、この漢字表示を変更したいと思う方は多いのではないでしょうか?

私はそうだったので、今回変更しました。

 

After

今回紹介する方法でアレンジするとこのようになります。

f:id:zero_point_5:20200728182619p:plain

 『目次』の部分が『Contents』になって、別枠(白文字)となります。

さらに、大見出しにはナンバリングがされるので、項目数がいくつあるのかパッと見でわかるようになります。

 

この『Contents』の文字は好きな文字に変更は可能です。

枠の部分も水色ですが、この色も自由に変更可能です。

 

アレンジ方法(設定方法)

ではアレンジ方法(設定方法)について説明します。

以下の手順で設定しましょう。

 

変更方(デザイン→カスタマイズ→デザインCSSにコピペ)

表示させるための設定です。

 

以下のコードをコピーします。

/*目次のデザイン変更*/
.entry-content .table-of-contents {
    position:relative;
    margin-left: 0;
    padding: 15px 10px 15px 35px; /* 枠内の余白(上右下左) */
    font-size: 100%; /* 文字の大きさ */
    font-weight:bold;
    list-style-type:decimal; /*数字以外が良ければ変更 */
    background:#fff;
    border-top:40px solid #90caf3; /* 「Contents」周りの色 */
    border-left:2px solid #90caf3; /* 線の太さ */
    border-right:2px solid #90caf3;
    border-bottom:2px solid #90caf3;
    line-height: 200%; /* 行間 */
    border-radius: 3px; /* 角丸にしない場合は不要 */
    color:#444; /* 数字(マーク色変更) */
}
/*「Contents」の周囲変更*/
.entry-content .table-of-contents::before {
    font-family: 'blogicon';
    content: "\f039  Contents";
    display: block;
    font-size: 130%;
    font-weight: bold;
    position: absolute;
    top: -35px;/*上からの位置調整*/
    left: 35px; /*左からの位置調整*/
    color: #fff !important;
}
/*リンクの色変更と下線を消す*/
.entry-content .table-of-contents li a{
    color:#444; /* 目次リスト部分のテキスト色 */
    text-decoration:none; /* リンクの下線をつけたくない場合 */
}

青字の部分の文言を変更することで『目次』を好きな文言に変更できます。

カラーコードを変更することで好きな色に変更できます 

 

続いて、はてなブログの管理画面から、

管理画面→デザイン→カスタマイズ→デザインCSSにペーストしてください。

 

まとめ

以下まとめになります。

・『目次』の文言変更はできるの?
 →簡単に変更できます
・『目次』のデザイン変更はできるの?
 →本記事を参考にすれば変更できます
・設定は難しいの?
 →コピペだけなので、1分もあれば設定完了!

 

文言や色を変更できるので、ひらがなにしてみたり、色をピンクにしてみたりと、色々とアレンジが可能です。

 

自身のブログの雰囲気に合わせて変更すると、ブログにオリジナリティがでてきます! 

簡単に設定できるので、使ってみてください。 

 

(参考)はてなブログアレンジ関連記事 

www.zero-point-five.com

www.zero-point-five.com

www.zero-point-five.com

www.zero-point-five.com

www.zero-point-five.com

www.zero-point-five.com

www.zero-point-five.com