はてなブログに目次と画像を入れてみる

こんにちは、マリンです。

自分のブログが絵もなく完全な紙媒体の個人日記同様になっているので、

カスタマイズまではまだ手が伸びないものの、

画像や目次くらいは入れようと思います。

環境

• iPhone6(iOS 10.2.1)

• MacBook Pro 13inch Mid2012 (OS X El Capitan)

概要

• 記事冒頭に目次をいれる

• 記事内に画像をいれる

目次

記事本文に見出しをつけておくことが前提です。

手順

• iPhone

　1. 手動で目次を入れる場所に[:contents]と表記する

　（サイドメニューを見てみたしたがそれらしいアイコンがなかったので、試しに手動で入れてみたら入りました。）

• PC

　1. 本文記入欄の上にある目次アイコンを選択すると自動的に[:contents]が記述されます。

「目次」を入れる

デフォルトでは「目次」という表記がないので、CSSを追加して入れます。

だいぶ端折っちゃいましたがこちらを参考にさせていただきました。

www.inodev.jp

（目次の前のアイコンと、ボリュームが少ないのでTopレベルのみの表示をなくしました。）

手順

1. 「ダッシュボード→デザイン→カスタマイズ→デザインCSS」に以下を記述

.table-of-contents:before {
  content: "目次";
  font-size: 150%;
}


/********** Contents list **********/
.table-of-contents {
  padding: 20px 10px 20px 40px;
  border-radius: 5px;
  background: #fff;
}
.table-of-contents li,
.table-of-contents ul {
  list-style-type: decimal;
  margin-left: 0;
}

(目次の表示だけなら上の.table-of-contents:beforeの部分だけで大丈夫です。)

画像

今回はこちらの素材を使わせて頂きました。

写真素材ぱくたそ

手順

• iPhone

　1. キーボード左上のカメラマークを選択

　2. フォトライブラリーもしくは写真を撮るを選択

　3. 画像を選択

• PC

　1. サイドバーの写真マークを選択

　2. 写真を投稿を選択してファイルをアップロードもしくはアップロード済みの画像を選択

まとめ

どちらも大したことはやってませんが、

これだけでもだいぶブログっぽくなったかな？

追記

確認したところ、スマホでは「目次」が出てなかったです。

調べてみます。失礼しました。