【複数の財布】FIRE・セミリタイアして人生を楽しみましょう!

2019年セミリタイア。FIRE・早期退職を目指す人たちを応援しています。問い合わせ先:ytake0412y@gmail.com

はてなブログ 初心者のための目次のつくり方 コピペで背景色も設定できました

 

2019年8月3日更新

 

はじめに

はてなブログで記事を書いてみて「目次」があったらいいなって思ってました。

下で赤で囲った「目次」の事です。

見たい項目をポチッと押すと”必要な記事”に飛べるやつです。

記事のつくり手は順番に見てもらいですが、私のようなせっかちは必要な情報だけを先に見たいですもんね。

f:id:fukusunosaifu:20180505063843p:plain

今回は、初心者でも簡単に「目次」が作れる方法を、画像にてご説明します。

 

【もくじ】

 

目次のつくり方

 いろいろやり方はあるようですが、誰でも簡単にできる方法を紹介します。

記事を作成してから、目次を起こす方法です。

まずは記事を完成させます。記事完成後の目次のつくり方について順序だてて説明します。

下の黄色部分を目次に設定してみます。

①目次にしたい部分を選択します。

 

②ブログ作成画面の左上の「見出し」から”大見出し”を選択します(赤で囲った部分)

f:id:fukusunosaifu:20180505073353p:plain

文字が濃くなっていると思います。

これで1個目の”目次”は出来上がりです。

ほかの目次にしたい見出し部分も同じステップで作成してください。

見出しですが、”中見出し”でも同様な感じで目次は作成できました。

 

自転車館【Airbike】
大人気!折りたたみ自転車やおしゃれな電動自転車や3輪電動自転車が びっくり価格で販売中♪
購入後も安心♪5年間の安心修理保証

 

③目次を置く場所

目次を置きたい部分を決めます(カーソルで示すだけ)。

”目次”のアイコンをクリックします(上の図で黒で囲った部分です)。

すると、画面上で”:contents”と表示されます。

 

プレビューをクリック

プレビューボタン(画面の左上)を押してみてください。

すると、

こんな感じで表示されています。完成です。

f:id:fukusunosaifu:20180505074253p:plain

 

目次の背景色のつくり方

 これはコピペで作成します。つくり方を紹介します。

①”デザイン”の選択

ダッシュボードの赤枠の部分です。

(私はダッシュボードの出し方もまだしっくりきませんが、いじっていると現れます)

f:id:fukusunosaifu:20180505075445p:plain

②”スパナマーク”をクリック

f:id:fukusunosaifu:20180505080335p:plain

③”デザインCSS”をクリック

④背景色の記述を挿入(下記をコピペでよいです)

.table-of-contents{
padding: 20px 10px 20px 40px;
border-radius: 5px;
background: #f0ffff;
}

下のように挿入します。

2行あけて挿入してください(1行ではうまく反映できませんでした)

f:id:fukusunosaifu:20180505092919p:plain

背景の色(例示)は上記は水色のようです。”f0ffff”を変更すれば色を変えられます。

私はグリーンで設定しています。

黄色:ffff99

グリーン:ccffcc

ピンク:ffeff9

⑤”変更を保存する”をクリック

この記事の最初の画面のように水色で囲まれた目次の背景色となります。

変更を保存する”を押さずにいたので、何回やっても反映しない事にイライラしました。 

以上で背景色を設定完了です。ご苦労様でした。

 

★☆★☆★☆ ナウでヤングなレンタルサーバー!ロリポップ! ☆★☆★☆★
☆月額100円(税抜)~容量最大400GB!大人気のWordpressも簡単インストール!☆

 

《関連記事》

fukusunosaifu.hatenablog.com

 

 

 

 励みになります。よければボタンをお願いいたします。


アフィリエイトランキング