アラフォーからのプログラミングとデザイン

大人から始めたプログラミングとデザインについてのあれこれ

はてなブログで目次を表示をやってみた。

f:id:simpledancer:20170130013241j:plain

 

 

今日ブログを見てもらって色々アドバイスをいただいたのですが、その中で

「目次を作ったほうがいいです」と言っていただいたのでつけてみました!

 

staff.hatenablog.com

目次を自動生成する

f:id:simpledancer:20170130011426p:plain

この「見たまま」記法の状態で 目次のアイコンをポチッとすると

[:contents]と記述されます。

そのあとに目次にしたい内容が自動生成されますが

内容のタイトルを必ず大見出し・中見出し・小見出しで作らないと表示してくれません。

でも、思っていた以上に簡単にできちゃいました。

 

 目次と言う文字を表示する

 ただ「目次」という文字を表示するにはコードをつけたさなくてはいけないようです。

kotublog.hatenablog.com

こちらのブログを参考にさせていただきました!

.table-of-contents:before {
content: "目次";
font-size: 20px;
font-weight: bold;
}

というcssを書きます。

管理画面から

PCだとデザイン>カスタマイズ>デザインCSSの所に埋め込めば表示されます。

スマホ版だとスマホマークの方を選んで>記事>記事上

です。

f:id:simpledancer:20170130013623j:plain

表記してみると、やはり目次があるのと無いのと印象が違いました。ちょっとわかりやすいかも。確かに本にも必ず目次がありますし。

今後の課題

  • マークダウン記法でコードを書く
  • プロフィールをちゃんと書く(多少のストーリー性)
  • FBの連絡先追加→これに関してはちょっと保留です。Twitterでとりあえずフィードを埋め込んでるのでFBはたさないかもです。

カスタマイズもなかなかうまく思うようにいかなかったりで前途多難ですがゆるゆる進めていこうと思います。

 

今日はプログラミングのオンラインの勉強会で色々参考になりました!

時々こうやってダイレクトに意見を聞くのも大事ですね〜。カスタマイズに精を出しすぎてプログラミングが疎かになってるのでちょいちょい頑張ります♪

ちなみに背景色を変えてみましたが、見やすいのか見にくいのか自分でやっているとよくわからなくなってきました。。

久しぶりに数ヶ月前のブログを読んでみた。↓

私がプログラミングを始めた理由☆ - アスリート系ですがプログラミング始めました。