働けない主婦のトライ日記

体が弱く働きたくても働けない主婦が、日々思った事や経験した事を綴っています。

スポンサーリンク

目次のカスタマイズ

今年の夏休みは、無事寝込むことなく家族と時間を満喫でき、とってもご機嫌なけっちゃんです。

 

さて、今日は、目次のカスタマイズについて挑戦してみました。

 

「はてな」ではじめるブログ生活―はてな公式ハンドブック

「はてな」ではじめるブログ生活―はてな公式ハンドブック

 

 目次

初心者さんの目次の設定

はてなブログさんでは、簡単に目次が設定できるようになっています。

でも、初心者さんはそれさえどうやってやるの?ですよね。

現に私がそうです。ではトライしてみましょう!

f:id:ketukochan:20170822131900j:plain

まずは、記事を書くページの目次をクリック

f:id:ketukochan:20170821121039j:plain

 

すると画面に [contents] と言うコードがでます。

そしたら、その下に目次の項目を大見出し・中見出し・小見出しのどれかでタイトルをつけて入力します。そして、タイトルの下に記事を書きます。

f:id:ketukochan:20170821124645j:plain

 

 この時点でプレビュー画面を見るとこうなっています。

f:id:ketukochan:20170821124818j:plain

 ちゃんと見出しで入力されたところが、しっかり目次になっています。

また見出しも各自カスタマイズされたものになっています。

 

私はカスタマイズしたあとにこの記事を書いたので、目次の背景色が設定されてしまっていますが、本来なら目次の背景色は白です。

 

目次に背景色をつけてみる

でも、やっぱり先輩ブロガーさん達のブログを見ているといいなと思うので、欲張って

知識のないけっちゃんですが背景色をつけてみたいと思います。

ただ、CSSをコピペするだけなんですが、それでも、うまくいかず四苦八苦して1時間以上、あーでもない、こーでもないと練習用ブログで試してみて出来た!という感じです。

参考にさせていただいたブログです。

携帯画面での設定

PC画面ではできたのですが、どうしても携帯画面だと目次の・の部分が背景色からはみでてしまって、うまく設定できません。

それで解決したのがこちらです。

padding: 20px 10px 20px 40px !important;

 

 padding: 20px 10px 20px 40px のあとに!important; こちらを追加しました。

そしたら、問題解決でした。

と言う事で、もし同じ問題で悩んでいる方の参考になれば嬉しいです。

初心者のみなさん、頑張りましょうね!

にほんブログ村 ブログブログ ブログ初心者へ
にほんブログ村

 

スポンサーリンク