「THE THOR」の「目次」をカスタマイズ!※コピペだけで完了

3 min 69 views

THE THORには始めから目次機能がついているので、カスタマイズから簡単に目次を作成することができます。しかしこの目次機能は、文字の色や外枠などを編集することができません。

そこで、CSSを使って自分好みの目次にしてみましょう。

CSSをコピペするだけで、魅力的な目次にすることができます。

本記事で分かること

THORの目次を魅力的にする方法
「カスタマイズ」からCSSを編集する方法

本記事の目次のCSS

では、さっそく本記事で採用している目次のCSSです。


「+」を押すとコードを表示できます

.content .outline {
border: 3px solid #17184b;
padding: 10px 0 10px;
background:#fffef6;
}.content li ul li .outline__number{
font-weight:bold;
background:transparent;
color:#cfcfcf;
width:auto;
}.content .outline__number{
width:1.8em;
height:1.8em;
padding:0;
line-height:1.8em;
text-align:center;
background:#17184b;
color:#fff;
border-radius:50%;
}.content .outline__link {
display: block;
color:#777;
}.content .outline__link:hover {
color:#cfcfcf;
}.outline__title {
color: #17184b;
font-weight: 700;
width:100%;
padding: 0px 0px 0px 20px;
}
.content .outline__switch{
right:1.5rem;
top:10px;
}.content .outline__toggle:checked + .outline__switch::before {
content: “[ ▲ CLOSE]”;
}.content .outline__toggle:checked + .outline__switch + .outline__list {
margin-top: 1rem;
}.content .outline__switch::before {
content: “[ ▼ OPEN ]”;
border: 0;
color:#999;
}.content .outline__switch + .outline__list {
background: transparent;
}.content .outline__switch + ul.outline__list {
margin-left:0;
margin-right:0;
border-top:2px dotted #cfcfcf;
}.content .outline__switch + .outline__list-2 li:first-child{
margin-top:1.0em;
}.content .outline__switch + .outline__list-2 li ul li:first-child{
margin-top:0.5em;
}

.outline__list-2 > li > a{
font-weight:700;
}

.outline__title:before{
font-family: “icomoon”;
content: “\e92f”;
margin-right:5px;
}

@media only screen and (min-width: 992px){
.outline__list-2 > li > a{
font-weight:700;
}

.content .outline {
width:90%;
margin:3rem 5%;
}
}

@media only screen and (max-width: 991px){
.content .outline {
width:100%;
margin:3rem 0;
}
}

こちらのコードをカスタマイズ画面のCSSに追記することによって、本記事のような目次にすることができます。

実際にカスタマイズの手順を順番に見ていきたいと思います。

CSSのカスタマイズ方法

まず大まかな手順を説明します。
といっても、3ステップで完了です。

  1. 「カスタマイズ」を選択する
  2. 「追加CSS」を開く
  3. CSSのコードをコピー&ペースト

以上で完了です。

「カスタマイズ」を選択する

WordPressの管理画面にある「外観」から「カスタマイズ」を選択する。

「追加CSS」を開く

「カスタマイズ」の下から2番目にある「追加CSS」を選択する。

CSSのコードをコピー&ペースト

最後に、先ほど紹介したCSSコードをコピぺします。

手順は以上です。

色などはカラーコードを変更することにより変えられます
あなたのサイトのデザインにあった色にしましょう。

まとめ

こんなに簡単にあなたの記事が、よりオリジナルになるので絶対にやるべきですよ。

hiro

hiro

映画と海外ドラマが大好きな、自営業30代。
7歳年下の彼女とかれこれ10年ほどお付き合いしている。
田舎に住んでいるがネットの力を借りながら、彼女に笑顔になってもらうために、検索の日々。
もしかしたら、あなたの彼女が喜ぶ情報もあるかもしれませんよ。

FOLLOW

カテゴリー:
関連記事

コメントを残す

メールアドレスが公開されることはありません。