ホワイト心理学って何?

ホワイト心理学とは、日常生活をより良いものにしてくれる心理学知識のことです。当ブログでは、よりわかりやすいに心理学を噛み砕いて説明しています。時間が5分とあれば立ち寄って損はしませんので、上記をクリック!

【目次装飾】はてなブログでの目次装飾はたった5分で終わる 驚くほど簡単だった

 

 

シバくん!目次は作れるようになったんだけどなんだか質素

もっとオシャレになる方法ないの?

ペンさん!実はとっておきの方法があるんです

それってやっぱり時間かかる?

この記事は、目次が作成できることを前提で話を進めます。まだ目次を作れないと言う方は、こちらの記事をご覧ください

 

www.ruiblog.work

【追記】目次の文字消えてしまう現象が起こるとのコメントを受け、コードを修正致しました

 

 

 

目次を装飾する

f:id:ruichaosmyth:20190623221828p:image

目次の装飾は3つの手順で終わります。

  1. こちらが用意したコードをコピーする
  2. そのコードを自分好みに少し編集
  3. 指定した場所に貼り付ける

 

たったこれだけの手順をこなすだけで下記のような目次に変化を遂げさせることができます

 

順番を追って説明しましょう

 

①こちらが用意したコードをコピー

 まずはこちらをコピーして下さい

 

<style type="text/css">
 <style type="text/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; /* 「この記事の目次」周りの色 */
    border-left:2px solid #90caf3; /* 線の太さ */
    border-right:2px solid #90caf3;
    border-bottom:2px solid #90caf3;
    line-height: 200%; /* 行間 */
    border-radius: 3px; /* 角丸にしない場合は不要 */
    color:#444; /* 数字(マーク色変更) */
}
/*「この記事の目次」の周囲変更*/
.entry-content .table-of-contents::before {
    font-family: 'blogicon';
    content: "039  目次";
    display: block;
    font-size: 130%;
    font-weight: bold;
    position: absolute;
    top: -40px;/*上からの位置調整*/
    left: 0px; /*左からの位置調整*/
    color: #fff !important;
}
/*リンクの色変更と下線を消す*/
.entry-content .table-of-contents li a{
    color:#444; /* 目次リスト部分のテキスト色 */
    text-decoration:none; /* リンクの下線をつけたくない場合 */
}
</style>

 

こちらの記事を参考にしています

https://www.oyomiyo.com/entry/2018/09/13/170534_1

 

こちらをコピーしたら、一度メモ帳か何かにコピーします。

 

②コードを編集しよう

次に、コピーしたコードを編集していきます。

るいさんと同じ目次で大丈夫!と言う方は、こちらを飛ばして手順③に移動してください!

 

まずは目次の名前を変えよう

 

content: "039  目次";

こちらのコードです。

目次 と書いてあるところを消して、自分好みの「もくじ」や「Contents」にすると良いでしょう。

 

次に色の変更です

まずは、下記のサイトから、自分好みの色を見つけて、コードをメモっておきましょう。

#90caf3 ←このコードが色を表わすものです

色見本と配色サイト - color-sample.com

 

コードをメモった方は、記事の目次周辺の色を修正していきましょう。

border-top:40px solid #90caf3; /* 目次周りの色変更 */

 

このコードです。

#90caf3 の部分を先程メモったお好みの色のコードに修正して下さい。 

 

さいごに

border-left:2px solid #90caf3; /* 線の太さ */
border-right:2px solid #90caf3;
border-bottom:2px solid #90caf3;

こちらのコードの色の部分(#90caf3)も上記で選んだ色と合わせた方が、整って見えると思います。

 

cssコードの編集方法がわかってきたでしょうか?他にも変えたい場所がある方は、各コードの隣に、何のコードか書いてあるので、

元のコードを一度保存して、自分好みに修正を加えていくと良いでしょう。

 

 

③コードを貼り付けよう

ここまで来れば一瞬で終わります。

デザイン→カスタマイズ→記事→記事上

のところにコードを貼り付けます。

 

 

まずはデザインを選択します

f:id:ruichaosmyth:20190623212758p:image

 

 

次にカスタマイズ→記事の順でクリックします

f:id:ruichaosmyth:20190623213243p:image

 

 

最後に、記事上のところの枠に、上記でコピーしたコードを貼り付けます

f:id:ruichaosmyth:20190623213335p:image

 

これで変更を保存すれば、目次そのものが変わっているはずです。自分の目次をプレビューでみてみましょう。 

スマホ版もコード修正までは同じです

上記で作ったコードをコピーして

デザイン→スマートフォン→記事→記事上にコードを貼り付けます

 

デザイン→スマートフォンまでは分かると思いますので、まずは、記事をクリックします

f:id:ruichaosmyth:20190624211853p:image

 

 

次に下記の手順で終了です

スマートフォン用にHTMLを設定するをクリック

②記事上にコードを貼り付け

f:id:ruichaosmyth:20190623213505p:image

 

これで完全に終了となります。

不具合や疑問点等ございましたら、お問い合わせフォーム、またはるいブログツイッターアカウントまでご連絡ください

 

【追記】それでもスマホ版だけ表示されない方へ

デザイン→スマートフォン→詳細設定→レスポンシブデザインにチェックをして下さい

f:id:ruichaosmyth:20190624212103p:image

 

以上で目次設定は終了になります。

おつかれ様でした。