音又空間’

趣味全開!DTM、シンセサイザー、エトセトラエトセトラ…

【今更聞けない】はてなブログの目次の出し方&その他の便利機能!

f:id:otomata:20191015184204j:plain

どうも音又です。

 

今回は

はてなブログの目次の作り方がわからない…

記事作成の時に便利な機能があったら教えて欲しい…

みたいな悩みを持った人に向けて書いていこうと思います。

 

一応僕の話を少しだけしておくと、はてなブログ歴は3年くらいで結構長々使ってます。ちなみにほぼずっと「はてなブログPro」でやっていますね。

 

それだけ使ってると流石に

この機能便利だなー!」とか「こんなのあったのか!」みたいな発見も沢山していますし、もちろん目次だってバンバン使ってるので、そういった実体験も元に話していきますね。

 

 

 

はてなブログの目次の出し方

では解説していこうと思うんですが、ぶっちゃけやり方はメチャクチャ簡単で、

目次を表示させたい場所で

”[:contents]”

と入力するだけです。※ダブルクォーテーション( " )は含みません。

 

え?それだけ!?」って思った人もいるかと思いますが。

はいこれだけです。

 

一応わかりやすく画像で説明すると

f:id:otomata:20191015164805j:plain

これが記事編集画面での表示ですね。(今回は見たまま編集でやっています。)

 

 

文中の「↓これが目次になります。」の下に目次表示用のコマンドも入力されているかと思います。

 

ではこちらをプレビュー画面で見てみると…

f:id:otomata:20191015165007j:plain

ちゃんと目次が表示されましたね。

 

 

ちなみに余談ですが目次のデザインに関してはテーマによって違ったりしていて、

CSS(ウェブサイトのお化粧みたいなモノ)などを弄れば自分の好きなデザインにすることも可能です。

 

 

もっと簡単な方法もあります

さて、ここまでで目次を出すには"[:contents]"を入力するだけというのが分かったかと思います。

 

ただ実はこの目次コマンド。

わざわざ手入力でしなくても、クリックするだけで一発で挿入してくれるボタンも編集画面に用意されているんです。

 

ではそちらも見ていくと

f:id:otomata:20191015170019j:plain

記事編集画面の上辺りにあるツールバー内に『目次』の項目がありますね。

 

 

まずは目次を設置したい場所にカーソルを置いて、

f:id:otomata:20191015170213j:plain

 

 

あとは先ほどの『目次』ボタンをクリックすると…

f:id:otomata:20191015170305j:plain

しっかり目的の場所に"[:contents]"が挿入されましたね!

 

 

このボタンからやっても直接入力しても目次の表示のされ方は変わったりしないので、時間短縮の為にも何か理由がない限りはこのボタンを使っちゃえば良いかと思います。

 

 

注意点:見出しを設定しないと表示されません

あとこの目次なんですが、もちろんページ内に見出しを設定していないと、

目次にしようが無いんで、表示されません。

 

 

試しに見出しを1つも設定していない記事内に"[:contents]"を記入してみます。

f:id:otomata:20191015171037j:plain

 元々見出しだった場所は大括弧で囲っています。

 

 

ではプレビューにして見てみると

f:id:otomata:20191015171236j:plain

この通り「↓これが目次になります。」の下に何も表示されませんね。

 

 

目次は読み手がページ内の読みたい場所に飛ぶことが出来るので、是非とも設置しておきたいですが、

それ以前に『見出し』がしっかり設定されていないと、目次を作ることはできませんし、

見出しのない(区切りがない)記事はなかなか読みにくかったりもするので、この辺りは読み手の気持ちも考えてちゃんと作っておきたい部分ですね。

 

 

はてなブログで記事作成をする時に便利な機能

目次についてはこんな感じで、メインは以上になります。

 

ただこれだけだと寂しいので次に

『はてなブログで記事作成をする時に知っておくと便利な機能』

もいくつか紹介したいと思います。

 

 

記事作成画面上部のツールバー

f:id:otomata:20191015172546j:plain

先ほど目次を作る際にも出てきたやつです。

このツールバーは便利で目次を作る他にも様々な要素を作ったり、文字を編集したりができます。

 

もし全部表示されていない場合は右端のボタンを押すと展開できます。

f:id:otomata:20191015172822j:plain

カーソルを合わせると『ツールバーを開閉する』と表示されると思います。

 

 

それぞれの機能ですが、

f:id:otomata:20191015173032j:plain

上段が左から

  • 番号なしのリスト
  • 番号付きのリスト
  • リンク貼り付け
  • 『続きを読む』の挿入
  • 引用表示
  • 目次
  • 脚注

 

下段が左から

  • 文字を太字にする(例:太字と普通の字)
  • 文字を斜体にする(例:Nanamemoji)
  • 打ち消し文字にする(例:なかったことにしてください)
  • 文字に下線を引く(例:下線ありと下線なし)
  • 文字の大きさを変える(例:普通の文字と小さい文字)
  • 文字の色を変える(例:今回ここまで)

みたいな感じになってます。

 

 

上段についてはちょっとわかりにくいかもしれませんが

番号なしのリスト

 

番号付きのリスト
  1. 砂糖
  2. スパイス
  3. すてきなものをいっぱい

 

リンクの貼り付け

こういうのとか(このブログのトップページに飛びます)

 

こういうのが挿入できます↓

www.otomata01.com

 

 

『続きを読む』の挿入

f:id:otomata:20191015175112j:plain

こんな感じで、

記事一覧で記事を全部表示せずに、これを挿入した部分で『続きを読む』ボタンを設置することができます。

 

記事一覧ページがゴチャゴチャしないので長めの記事を書いた時には設置するのをオススメします。

 

 

引用表示

こんな感じで、他サイトや書籍から引用する時に使えます。

 

 

目次

先ほど説明したので省略。

 

 

脚注

f:id:otomata:20191015180021j:plain

文字通り脚注をつけることが出来ます。

文中では数字が表示されて、ページの最後の方で内容が表示されます。

 

 

サイドバー

f:id:otomata:20191015180636j:plain

ここもよく使いますね。

先ほどのツールバーと同じように、全て表示されていない場合には一番上の『サイドバーを開閉する』から展開することができます。

 

ここに関してはだいぶ沢山機能があるのでよく使うようなやつだけ挙げとくと

  • 写真を投稿
  • カテゴリー
  • 編集オプション
  • 過去記事貼り付け
  • Youtube貼り付け

みたいな感じのことが出来ます。

 

 

今回は全ての説明はしませんが、例えば

カテゴリー』は記事のカテゴリーを設定出来ますし、

編集オプション』では投稿日時の指定や、カスタムURLの設定、アイキャッチ画像の選択などが出来ますね。

 

この辺りを使えばよりコンテンツが充実すると思うのでぜひ使ってみてください。

 

 

『記事の管理』

f:id:otomata:20191015181801j:plain

今までのは記事編集画面から使える機能だったので少し違いますが、

この『記事の管理』画面もよく使います。

 

見た目通りなのですが、過去の記事や下書き中の記事を確認・編集ができるようになっています。

 

また各記事の『編集』を押すと

f:id:otomata:20191015182103j:plain

こんな感じでメニューが出てきて、それぞれ編集ができますね。

 

特にこの中の『コピーして新しい記事を書く』なんかは、

記事をリライト(内容は同じだが改めて書き直す)する際にかなり便利なので僕もたまに使いますね。

 

 

おわり

ということでこんな感じになります。

はてなブログでの目次の出し方だけでなく、他にもよく使う機能を紹介してきました。

 

ここで紹介した機能は話を盛ったりとか無しで本当によく使う機能なので、

みなさんもぜひ使いこなしてさらにブログ記事をパワーアップしましょう!

何か質問などあれば気軽にコメントなどからどうぞ。

 

では今回はこの辺で。さいなら。