 |
| WAO！設定できたよ！ |
QooQにない目次生成機能を導入しようとしたが
ブログへの投稿を始めて、約１か月超が経過したころ。だんだん記事のボリュームが増えて、ちょっと長くなってきました。
なるべく見出しをつけたり、画像を加えたりしています。
でも当ブログを訪問された方は、字が集まりすぎて読みにくいかな？と思うようになりました。
見出しの項目ごとに何が書かれているか分かれば、読みやすくなるかも。そう思い、目次の設定に挑戦しました。
当ブログはGoogleのサービス「Blogger」を使用。テーマは人気の「QooQ」を利用させていただいています。
でも、Bloggerには目次の自動生成の設定はないということで、Googleで検索。
「QooQ」ユーザーの方たちが参考にされていた「スケ郎のお話」さんの投稿記事を見て設定に挑戦しました。
この記事を参考にされて、目次の自動生成に成功された方は、おそらくたくさんいらっしゃるでしょう。
でも私の場合、何度も設定を繰り返しても表示されない…。どうすりゃいいんだ⁉
困惑しつつ、何度も検索を繰り返した末、「Daphne ORGANIC AND MUMMY`S LIFE」さんの記事を発見。何とか軟着陸を果たしました。
丁寧に説明されていて、多くの人が試して成功しているプラグインでも、初心者がいじる場合は設定できるとは限らない。
そんな事態が起こりうる可能性があるんです。
それではキビシイ事態を突破するためには、どうすればいいのか。
この記事では、Blogger初心者が「QooQ」での記事内の目次設定で悪戦苦闘した経過と、何とか成功に至った設定方法を解説します。
おかげで↓のような目次を作ることができました。Bloggerで目次の自動生成のプラグインに苦戦されている方には、参考になりますよ。
Google検索で「スケ郎のお話」さんを発見
目次の作成にあたっては、まずGoogleの窓に「Blogger QooQ 目次」とキーワードを打ち込んで検索。
QooQユーザーの方たちが最も参考にされていたのが「スケ郎のお話」さんの投稿記事。
私のような初心者でも実に分かりやすい文章。
設定すれば、目次の項目をクリックするとリンク付けされている見出しの項目に飛ぶ、非常にありがたい機能もある。
HTMLコードのコピペもOK。これならイケる！とトライしました。
以下、設定方法を引用させていただきます。
１．設定にトライしたけど
設定方法
まずは、テーマをバックアップ。ブログのHTMLをいじることになるので、念のためにデータを保存しましょう。
❶「管理画面」から「テーマ」を開き「▼」から「バックアップ」を選択。「ダウンロード」をクリック。PC内に保存フォルダを作って終了です。
❷「テーマ」画面で「HTMLを編集」を選択。HTML画面を表示します。
❸</head>の直前に、目次自動作成コードを追加。
※コードは「スケ郎さんのお話」さんの「【Blogger】目次を簡単に自動生成（忙しい人向けのコピペ素材）」からご入手ください。
❹--></style>と</head>の間の空白部分にコードを貼り付けます（上の写真）
❺貼り付けが終わったら「テーマ画面」右上の「保存アイコン」をクリックして終了です。
目次が表示されない…
「編集」画面で記事を書いて、プレビュー画面に切り替えると目次が表示されるーはずなんですが、画面に出てこない。
コードを貼る場所を間違えたかな？ そう思って何度もやり直したけど、ダメ。
原因はいまだ分からない。見よう見まねでカスタマイズしていたので、テーマのＨＴＭＬに不具合を作ったのだろう、と。
でも、私にはＨＴＭＬの知識はほとんどありません。正直、頭を抱えました。
再びググって「Blogger QooQ 目次 表示できない」とワードを打ち込み検索。でも出てくるのは表示に成功した記事ばかり。
それなら普通に目次欄を設けて、手動で目次の項目と見出しをリンクさせるか。そう思いましたが、記事を書く度にこれじゃ、しんどい…。
気を取り直して「Blogger 目次」でググり、出てきた記事を一本ずつ確認。その末に、救いの神を見つけました。
２．救いの神を発見
前述した「Daphne ORGANIC AND MUMMY'S LIFE」さんの「Blogger目次を見出しと連動させて自動生成する方法」という記事。
こちらのブログは、Bloggerが無料で提供しているテーマ「Contempo」を使用されていて、このテーマのための目次作成の解説記事。
でも、説明をよく読むと、設定の仕方は目次コードを「--></style>と</head>の間の空白部分に貼り付ける」だけ。
「スケ郎のお話」さんの方法と全く同じ。「QooQ」でも果たしてできるのか。不安でしたが、ここまできたら実行あるのみ、です。
投稿記事のHTML編集にもコードを貼りつける
HTML画面でコードを貼りつけます。方法は「スケ郎のお話」さんと全く同じ。
コードは「Daphne ORGANIC AND MUMMY'S LIFE」さんの「Blogger目次を見出しと連動させて自動生成する方法」を参考にしてください。
この設定方法では、コードを貼り付けた後に、もう一つやることがあります。記事のHTML編集画面で、違うコードを貼り付けます。
❶「投稿」画面での記事編集ページで、左上の「ペンアイコン」をクリックして「HTMLビュー」を選択。
❷「HTMLビュー」で、記事内で目次を表示させたい場所にコード<div id="toc"></div>
を貼り付けます。
そのため、上の写真の一番下の段にあるように、「１．Google検索でー」の前にコードを貼り付けました。
また、記事の冒頭、書き出しの前には必ず「主見出し」か「見出し」を立ててください。
記事のHTML編集では「主見出し」（h１）、「見出し」（ｈ2）、「小見出し」（ｈ3）、「準見出し」（ｈ4）などと順序づけられています。
最初に「主見出し」か「見出し」を立てないと目次は自動生成されません。
この順序を守って記事を書き、目次コードを貼り付けました。
すると、上の写真のように目次が表示されました。
正直ホッとして、ホントにうれしかったです。
まとめ・目次があると見やすく、記事作成もしやすい
トライ＆エラーを重ねつつ、何とか目次の自動生成に成功しました。
やはり目次があった方が、この記事ではどんな内容が、どんな順番で書かれているのか一目瞭然です。
記事を書く立場としても「この項目はこの位置にあった方がいいな」なんて構成の見直しに役立ちます。
ただ、課題は残りました。
目次の字のサイズは大きい方が見やすくていいのか、小さい方がコンパクトで画面をスクロールする手間が少ないんじゃないか。
また、私が救ってもらった設定方法には「スケ郎のお話」さんのような非表示ができません。
しばらくはこの方法で記事作成を続けてみて、必要を感じればカスタマイズに挑戦しようと思います。
目次の自動生成を考えている方が「目次が表示できない」ケースに遭遇した際、この記事が問題の解決へお役に立てば、うれしい限りです。
当ブログでは、ブログのカスタマイズについて、ほかにも解説しています。よろしければ、のぞいてみてくださいね。
リンク
リンク
0 件のコメント:
コメントを投稿