むてんか

オトナの女磨きブログ

【目次】を無料はてなブログで作る方法!超初心者向き、こんなに簡単だったなんて【画像付き】

(※記事内に商品プロモーションを含む場合があります)

【目次】を無料はてなブログで作る方法!超初心者向き、こんなに簡単だったなんて【画像付き】

キーボード, タイプ, コンピュータ, コンピューティング, インターネット, ラップトップ, 仕事

こんにちは、むてんかです。

ブログをはじめた方、もっと自分のブログを見やすくしませんか?

「見やすくするにはどうしたらいいの?」「目次って作るの大変なの?」

「目次の文字をクリックしたら文章に飛ぶ方法を知りたい」

という初心者はてなブロガーさん、かんたん画像付きでご紹介します!

早速、順番にやってみてくださいね。

こんな感じになりますよ↓

1.無料はてなブログで【目次】を設定する方法

目次になる文章を「記事を書く」から書いていきます。

目次にする文章を選択します。(文章の頭にカーソル合わせます。)

次に左上の「見出し」を押します。
f:id:MUTENKAYUMI:20200602135635j:image

目次の見出しには「大見出し」「中見出し」「小見出し」と大きさを3つ選べます。

見出しの大、中、小を選びます。

選んだら、字が太文字に変わりますよね。
f:id:MUTENKAYUMI:20200602135657j:image

すべての見出しに大中小選択します。
f:id:MUTENKAYUMI:20200602135706j:image

(もし違う文章に見出しを選択しちゃったら、見出しの「標準」を押せば戻ります。)

それが終われば、目次を置きたい場所(一番上あたり)に「目次」ボタンをぽちっと押します。
f:id:MUTENKAYUMI:20200602135717j:image

すると、[:contens]とでますね。
f:id:MUTENKAYUMI:20200602135725j:image

そのまま、プレビュー見てみましょう!
f:id:MUTENKAYUMI:20200602135753j:image

勝手に作成できてるでしょう?

はてなブログすごいですね~!パチパチ

2.【目次】の頭に自動で「【もくじ】」と入れる設定にする

お気付きになりましたか?

あなたの目次には一番頭に【もくじ】という文字がないですよね。

これは自動的には入らないのです。

一度設定しておけば、次回から自動で入るので、ぜひ設定しておきましょう!

 設定する方法

設定→デザイン→カスタマイズ(スパナマーク)→デザインCSS の欄に行きましょう。
f:id:MUTENKAYUMI:20200602141702j:image
f:id:MUTENKAYUMI:20200602141713j:image
f:id:MUTENKAYUMI:20200602141725j:image

下記をコピーしてここに貼り付けるだけ!

 /* 目次に「目次」を追加 */
.table-of-contents:before{
content: "目次";
font-size: 120%;
font-weight: bold; /* 文字の太さ */

↑「目次」のところを「もくじ」ひらがなにしたり変更可能です。

貼り付けたら、忘れずに「変更を保存する」を押してください。

f:id:MUTENKAYUMI:20200602141744j:image

どうですか?簡単ですよね!

もしわからなければ、コメントくださいね。

この本さえ持っていれば何とかなる「おすすめ本」

・ブログだけでも、今後アフェリエイト狙いにするにも、どちらにも対応可能

はてなブログの推薦本なので、はてなブログの設定方法が詳しく記載あり

・女性ブロガーさんが書いたものなので、女性向けのブログ開設が可能

 

無料でたくさんの開設方法やアフェリエイト方法がネットで見れるが、無数なので迷ったり余計にわからなくなることがあります。

ひとつ参考書のようなこの本を持っていれば、基本を勉強できます。

その後、ネットで知りたい分野を調べていく方法をおすすめします!


まとめ 

オフィス, 仕事, ビジネス, コンピュータ, ラップトップ, 書き込み, 作業, デスク, ノートブック

ブログをはじめて3カ月、やっと【もくじ】設定を学んだのです!オソッ…

こんなに簡単だったのか!とびっくりしたので、まとめました。

ちょっとのことで、ブログも楽しくなりますね!