複数の財布

様々な事業(一棟アパート・太陽光発電・株式投資等)を展開し、セミリタイアを目指しています。経験をシェアできるブログになる事を期待しています

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

 

2019年3月18日更新

はじめに

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

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

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

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

f:id:fukusunosaifu:20180505063843p:plain

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

目次のつくり方

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

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

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

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

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

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

f:id:fukusunosaifu:20180505073353p:plain

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

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

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

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

③目次を置く場所

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

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

すると、画面上で”: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

fukusunosaifu.hatenablog.com