【ブログ技】目次を作ってみよう

google blogger ブログ技 やってみた

ごきげんよう。あまえです。
また徒然なるままに書いていこうと思います。

ブログって目次があるとそれっぽくなりますよね！

ということで、本日は目次の作成方法を3つ、難易度別にお伝えします。

まずはパクろう！初級編

当ブログでは、2種類の目次を使っていました。
どちらも「どシンプル」なので、まずはこちらから使ってみてはいかがでしょうか？
①の枠なしを作りたい方は、↓をコピペしてね。
<h3>　目次　</h3>

<a href="#1">1.〇〇</a>
<a href="#2">2.△△</a>
<a href="#3">3.◇◇</a>
<a href="#4">4.□□</a>
②の枠ありを作りたい方は、↓をコピペしてね。
<div style="background: #ffffｆｆ; border-color: rgb(204, 204, 204); border-style: solid; border-width: 2px; padding: 10px; text-align: left; width: 90%;"><b>目次</b><br>

<a href="#1">1.〇〇</a><br>
<a href="#2">2.△△</a><br>
<a href="#3">3.◇◇</a><br>
<a href="#4">4.□□</a><br>
</div>
①②どちらを使用する場合も、目次からページに飛べるように各章のタイトルにはこのコードを使ってくださいね。
<div id="1"><h2>1.〇〇</h2></div>
<div id="2"><h2>2.△△</h2></div>
<div id="3"><h2>3.◇◇</h2></div>
<div id="4"><h2>4.□□</h2></div>
ちなみにこの方法の場合、目次と章のコードを毎回打ち込む必要があります。

毎回一から作るのは面倒なので、テンプレを作っておくとその手間が省けて楽ちんですよ。

自動におまかせ！中級編

続いては、私もようやく取り入れることが出来た自動作成についてです！

初心者の私には敷居が高くて無理…と諦めていたのですが、なんとか形にすることが出来たので、皆さんにもおすそ分け。

ちょっとの手間とコピペで出来るので、是非チャレンジしてみてくださいね。

ちなみに、完成系はこんな感じです。
自動設定をするために、blogger全体のコードを編集していきます。

「コードの編集。無理。怖い…」という方でも大丈夫。

こちらの記事を参考にしてみてください。

簡潔に分かりやすく書いてあるので、超初心者の私でも出来ましたよ！
[Blogger] 目次を簡単に自動生成（忙しい人向けのコピペ素材）

※オプション等楽しいことがたくさん記事に書かれていますが、「2.プラグインの導入」さえ読めば作成可能です。
ただ、HTMLの編集ってなに？どこ？という過去の私のような方に向けて、ちょっとサポートしておきますね。

リンク先の説明で分かる方は、次の章まで飛んでください。

①【レイアウト】から【HTMLの編集】へGO。
※失敗したときのために、必ずバックアップを取ってくださいね。
（バックアップボタンを押すだけです）

②コード内のどこでもいいので、カーソルを置いて【ctrlキー＋F】を押す。

③でてきた【Search:】に【＜/head＞】を入れて検索。

④【＜/head＞】の直前に、リンク先にあるコードを追加。

⑤【保存ボタン】を押して終了！
どうですか？無事に出来ましたでしょうか？

私は出来たとき、嬉しくて小躍りしました。

※注意※
こちらの自動作成の場合も、目次と連動させるために、各章のタイトルにはこのコードを使ってくださいね。
<h2 id="1">1.〇〇</h2>
<h2 id="2">2.△△</h2>
<h2 id="3">3.◇◇</h2>
<h2 id="4">4.□□</h2>

自分で作ろう！上級編

いやいや、私こんなシンプルな目次なんていや！つまらない！

そんな方はご自分でカスタマイズして作っちゃいましょう！

「html　目次タグ　おしゃれ」など、検索したらたくさんでてきます。

その中でもおすすめサイトをひとつご紹介しておきますね。
CSS Stock　Web制作に使えるCCコピペサイト
https://pote-chil.com/html-maker/toc

目次であれば、大元が３種類ありまして、そこから色や数字の有無など、好きなように選ぶことが出来ます。


目次以外にも、吹き出しや引用ブロックなど、たくさんの使えるデザインがおいてありますので、是非一度のぞいてみてください。

楽しくて時間が溶けるので要注意！

おすすめ本

今日は目次でおなかがいっぱい。

そんな疲れた日はエッセイなんてどうでしょうか？

『森沢カフェ』 森沢 明夫
「このタンパク質の塊、何やら失礼なことを言っているぞ！すごい。いますぐ『おもしろタンパク質図鑑』に加えよう」

---「おもしろ人間図鑑」より引用
こちらの本の目次には、気になるタイトルがずら～っと並んでいます。

短くて、ゆるい、エッセイ集。

コーヒー片手に、気になるタイトルから読んでみてはいかがでしょうか？

まとめ

・目次があると見栄えがする

・このブログから自動作成にした結果、今までの記事を修正をする必要あり（めんどくさい）

・これからブログを始める人は、最初から自動作成を設定することを全力でおすすめします！！まじで！！！

0 件のコメント :

コメントを投稿