2019年8月3日更新
はじめに
はてなブログで記事を書いてみて「目次」があったらいいなって思ってました。
下で赤で囲った「目次」の事です。
見たい項目をポチッと押すと”必要な記事”に飛べるやつです。
記事のつくり手は順番に見てもらいですが、私のようなせっかちは必要な情報だけを先に見たいですもんね。
今回は、初心者でも簡単に「目次」が作れる方法を、画像にてご説明します。
【もくじ】
目次のつくり方
いろいろやり方はあるようですが、誰でも簡単にできる方法を紹介します。
記事を作成してから、目次を起こす方法です。
まずは記事を完成させます。記事完成後の目次のつくり方について順序だてて説明します。
下の黄色部分を目次に設定してみます。
①目次にしたい部分を選択します。
②ブログ作成画面の左上の「見出し」から”大見出し”を選択します(赤で囲った部分)
文字が濃くなっていると思います。
これで1個目の”目次”は出来上がりです。
ほかの目次にしたい見出し部分も同じステップで作成してください。
見出しですが、”中見出し”でも同様な感じで目次は作成できました。
自転車館【Airbike】
大人気!折りたたみ自転車やおしゃれな電動自転車や3輪電動自転車が びっくり価格で販売中♪
購入後も安心♪5年間の安心修理保証
③目次を置く場所
目次を置きたい部分を決めます(カーソルで示すだけ)。
”目次”のアイコンをクリックします(上の図で黒で囲った部分です)。
すると、画面上で”:contents”と表示されます。
④プレビューをクリック
プレビューボタン(画面の左上)を押してみてください。
すると、
こんな感じで表示されています。完成です。
目次の背景色のつくり方
これはコピペで作成します。つくり方を紹介します。
①”デザイン”の選択
ダッシュボードの赤枠の部分です。
(私はダッシュボードの出し方もまだしっくりきませんが、いじっていると現れます)
②”スパナマーク”をクリック
③”デザインCSS”をクリック
④背景色の記述を挿入(下記をコピペでよいです)
.table-of-contents{
padding: 20px 10px 20px 40px;
border-radius: 5px;
background: #f0ffff;
}
下のように挿入します。
2行あけて挿入してください(1行ではうまく反映できませんでした)
背景の色(例示)は上記は水色のようです。”f0ffff”を変更すれば色を変えられます。
私はグリーンで設定しています。
黄色:ffff99
グリーン:ccffcc
ピンク:ffeff9
⑤”変更を保存する”をクリック
この記事の最初の画面のように水色で囲まれた目次の背景色となります。
”変更を保存する”を押さずにいたので、何回やっても反映しない事にイライラしました。
以上で背景色を設定完了です。ご苦労様でした。
★☆★☆★☆ ナウでヤングなレンタルサーバー!ロリポップ! ☆★☆★☆★
☆月額100円(税抜)~容量最大400GB!大人気のWordpressも簡単インストール!☆
《関連記事》
励みになります。よければボタンをお願いいたします。