超初心者のはてなブログカスタマイズ「目次」編②
こんにちは、ありんこです。
前回は、はてなブログ「目次」の超簡単な作り方を記事にしました。今回は、前回作った「目次」の欄に目次という文字を表示する方法、および目次リストに番号を付ける方法、をお伝えします。
↓こんな目次が作れます。
「目次」の文字の入る位置、番号ってなに?
「目次」は赤枠のように表示されます。左上のあたりに入ります。
番号は目次リストごとに自動的につくんです。
「大見出し」の中の「中見出し」はちゃんとずれて番号付けされます。
「目次」の文字を表示させる魔法のことば
以下の呪文のような言葉が「目次」の文字を表示させる魔法の言葉です。
content: "目次";
font-size: 120%;
font-weight: bold;
}
目次リストに番号付け(しかも自動的に)する魔法のことば
.table-of-contents ul{
list-style-type: decimal;
}
超具体的にご説明します!
上記の魔法の言葉を
デザイン設定ーデザインCSSにコピペで出来上がりです。
大丈夫!超簡単です!
ダッシュボードをクリック
すると画面左端に左のメニューが表示されます
そしたら赤枠で囲った「デザイン」をクリックです
すると、左(スマホでは上)の画像の画面に変わります
「工具の絵」をクリックすると左の下のメニューが変わります
「{}デザインCSS」をクリックです
「{}デザインCSS」のボックスの中をクリックすると魔法の文字列があるのが分かります。
上記に記した「目次」の文字を表示させる魔法の言葉をコピーして、左図の矢印の場所へペースト(貼り付け)してください。
ペーストする(貼り付ける)と上記のようになります。
これで一つ目の呪文は入りました。
次に、目次リストに番号付けする魔法のことばをコピーします。
そして、空いている行にペースト(貼り付け)します。
上記のようになります。
これで魔法は入りました。
忘れずに変更を保存しておきます。
プレビューしてみてください。
出来ました!
まとめ
超初心者の方でも出来るように画像でも説明にしました。
私自身が超初心者なので、間違えている点がありましたらごめんなさい。
ご意見ご指摘もいただけるように、問い合わせのフォームも今後作る予定です。
「目次」の文字の表示が不要だったり、番号付が不要だったりする場合もあると思います。ただ、超初心者の方は一度このようなカスタマイズをしてみることをお勧めします。カスタマイズすることに自信がつくからです。
私自身が超初心者なので、「目次」のカスタマイズに関しては多くのグーグル先生にお世話になりました。「デザイン設定ってどこ?」「CSSってなに?」「どこに貼り付けるの?」「場所は分かったけど、よく分からない数列がすでに入っているよー、これ消しちゃっていいの?」とかほんっとに超基本的なことの理解に苦しみました。
↓いつもの私の苦労するパターン
すると分かりやすく書いてあるサイトがすぐに見つかります。ですがちょっと簡潔すぎて頭の固い私は理解できなかったりするんです。そういう場合、たいがい「参考にした記事はこれです!」と参考ブログが貼り付けてあるので、じゃあそこで具体的に教えてもらおう!と飛んで行って見てみるのですが・・・またちょっと専門用語が並んで.撃沈・・・専門用語を調べてといった感じのカスタマイズサーフィンでそのうちおぼれてしまう、といったことの繰り返しでした。
(おそらく超初心者ではなくてただの初心者の方には理解できるんだと思います。私のように不器用な方は悩んでしまうのかも)
今回の「目次」のカスタマイズをすることで、こんな私でも魔法の呪文の使い方が理解出来たのです。ちょっと自信がつきました。
えらそうに記事にまでする始末です。
嬉しかったんです(*^_^*)
次回のカスタマイズ予告
問い合わせフォームを作る。
出来るかなー?
こうご期待なのです。