はてなブログ 書き方 目次 4

よろしくお願いします♪ はてなブログで使える目次のカスタマイズを紹介しています。コピペしてすぐ使えるものや、当ブログで使用している「大学ノート風」の目次も公開しています。ご自身でカスタマイズできるように個別に指定する方法も解説しているので、ご覧下さい。 目次アイコンをクリックしてプレビューをかけてみました。こんな感じに自動的に目次が作成されます。すでにリンクも貼られており便利ですね。 4.区切り線タグを入れます 目次にしたいところに大見出しをクリックします。 3.目次アイコンをクリック. はてなブログの広告収入で稼ぐ4つの手順を、初心者のかたに向けて丁寧に解説しています。徐々にステップアップして月に5万円以上稼ぐ方法をお伝えしています。楽天アフィリエイト、Amazonアソシエイト、Googleアドセンス、ASPの商品紹介のやり方。 | はてなブログの広告収入で稼ぐ4つの手順を、初心者のかたに向けて丁寧に解説しています。徐々にステップアップして月に5万円以上稼ぐ方法をお伝えしています。楽天アフィリエイト、Amazonアソシエイト、Googleアドセンス、ASPの商品紹介のやり方。 (adsbygoogle = window.adsbygoogle || []).push({}); QUATREさんは、はてなブログを使っています。あなたもはてなブログをはじめてみませんか？, Powered by Hatena Blog /* はてなブログの初心者向けに「記事の書き方」「編集画面の使い方」を44枚の画像を使ってわかりやすく解説していきます。装飾や見出し・目次、画像の挿入や予約投稿の方法など、記事を書くうえで知っておきたいことが丸わかり！読まないと損します。 猫ちゃんが大好き 「AdSense Invalid Click Protector」をCocoonで設定して使う方法！. } 今回の記事では、はてなブログで記事に目次を設置する方法をご紹介したいと思います。既に知っている方も多いと思いますが、先日、あるはてなブロガ－さんから、目次の設置法について質問をしていただいたので、意外と知らない人も多いのかもしれないと思い、記事にすることを決めました。, まず、目次を入れておくと、記事の見栄えが良いですよね。記事の全体にどういう内容が書かれているのかを大まかに把握できるので、読者の方にとっても、より読みやすい記事に仕上がるのではないかと思います。, また、検索エンジンにひっかかりそうなワードを目次にたくさん入れこむことで、キーワードが増えて、記事を見てもらいやすくなります。自分の記事をたくさんの人に見てもらいたい方やブログを使ってアフィリエイトをしたい方に、目次は必須と言っても過言ではないと思います✨, 記事を書いた後に、目次を設置するために、これからご紹介するような手順を踏まなけれいけないので、少し面倒くさいと思う方もいるかもしれません。, また、記事の滞在時間が短くなると、アフィリエイトをやっている方にとっては広告を見てもらえるチャンスが減る可能性があります。, １０００文字以下の短めの記事を書いている場合は、目次をつけると記事の短さが際立ってしまいますのであまりおすすめしません✖, ①記事の編集ページで、目次を設置したい場所にカーソルを合わせて、ここをクリックします↓（赤い丸中の目次ボタンです）, ③目次に入れ込みたい部分を見出し設定する。表示させたい部分を選択して、大・中・小の見出しから好きなものを選びます。, この、メリット・デメリットの様に1つの目次から派生された目次は、大見出し、中見出し、小見出しを組み合わせれば作ることができます。, 記事を書き終わった後にまとめて、今ご説明した手順を行っていただくと、ササっと目次を作ることができます✨, はてなブログの場合、目次はこんなにも簡単に作れてしまうのですね(*^^*)みなさんも、ぜひ目次を使ってより素敵な記事を作ってみてください♪, 都内の大学に通う理系女子大生。 趣味、最近気になったもの、楽天ROOMについての記事を書いています。 はてなブログ ... 「こんなふうに書きたい」と思えるようなブログを探してみましょう。 週刊はてなブログには、注目のブログ紹介やブロガーインタビューなど、はてなブログ編集部が手がけるさまざまなコンテンツがそろっています。ブログ探しのお供に、ぜひチェックしてみてください。 はてなブログ グループで、興味のある分野のグループを探してみましょう� 記事全体の流れを把握できますし、目当ての見出しにすぐにジャンプできるのでユーザーにとって. 当ブログで目次のデザインをカスタマイズしたので、今回はそのカスタマイズを紹介します。, この記事では目次の部分的なカスタマイズから、コピペするだけですぐに使えるコードまで用意したので、良ければお使いください。, border-topborder-rightborder-bottomborder-leftと個別に設定することも出来ます。, などと変えることで線の種類を変えることができます。他にも種類はあるので使いたい方はこちらのサイトを参考にすると分かりやすいです。, #dddの部分は色を表しています。同じ色が６桁の場合は省略できるので３桁となっています。ご自身のブログに合わせて色の調整をしたい方はこちらのサイトが参考になります。, border-radiusを追加することで外枠の角を丸くすることが出来ます。数字の部分を大きくすると、より丸みが大きくなります。, contentの "" ダブルクォーテーションの中の文字を変えることができます。「この記事の目次」「index」「contents」などと好きな言葉に変えられます。, border-bottomの部分は上述した【外枠のデザインを変える】の方法でスタイルを変えることが出来ます。, font-sizeの値を1remから120%などと変えると文字の大きさを変えることが出来ます。, list-style-typeは見出しの前のマーカーの種類を表しています。　decimelは数字、他に●disc○circle■squareなどもあります。不要の場合はnoneとすることで消すことが出来ます。, 上のCSSを記述することで下線を消すことが出来ます。反対にunderlineとすることで線をつけることが出来ます。, 記事が長くなりすぎるので、コードを非表示にしてあります。【コードを表示する】のボタンでCSSを表示しコピーしてお使いください。, ＃6桁（3桁）の数字の部分を変えると色が変わります。ブログデザインに合わせてお使いください。, PC等で表示時の右余白が気になる方はdisplay: inline-block;とすることで文字長さに応じた幅にすることが出来ます。, .entry-content .table-of-contents←このセレクタの｛｝の中にdisplay: inline-block;と追記する, 2020/5/3時点の人気テーマTOP3の【Minimalism】【Brooklyn】【UnderShirt】については、ほぼ確認しましたが、テーマによってはデザインが崩れることがあるかもしれません。その場合は調整をお願いします。, 枠線や背景色を変えればどんなテーマにも合うシンプルなデザイン。テーマにデフォルトで入っているデザインと被っているかもしれません（笑）, 目次に太いラインを入れ、見出しのマーカーを変えてあります。カラーを変えれば色々なテーマに合わせやすいと思います。, 見出し毎に文字サイズを変え、段落が分かりやすいようにアンダーラインで区切ってみました。, ガテンなおじさんが精一杯考えたガーリーデザインです。ブログテーマに合わせて色を変更してあなた好みに染めてください///, CSSの勉強中ということで、当ブログで使用している目次です。見出しが少なすぎるとTABLE OF CONTENTの文字がはみ出します。アクセントカラーの部分を#c12c58（ピンク）や#3468b1（青）にすることでよく見る大学ノートのカラーに変えられます。, 大学ノート風を作った惰性で作ってしまいました。表紙がない感じで少し寂しいかもしれませんね（笑）, 出来るだけ確認はしたつもりですが、間違い等があればご指摘ください。まだまだ初心者ゆえに書き方がおかしいところなどもあるかと思いますが、ご容赦ください。. adsFilter(); こんにちは、quatre（キャトル）です。 はてなブログのカスタマイズ初心者編のシリーズも4回目になりました。今日は、目次のカスタマイズをご紹介します。 過去のはてなブログのカスタマイズシリーズはこちら はてなブログをおしゃれにカスタマイズしたい初心者編｜ボックスデザイン はてブコメント見落とさず活用する｜はてなブログ… ブログを報告する, これは、見出しを２つ以上設定したら、自動的に記事の上に目次が表示されるのでとてもラクちんなのでオススメです。, 読書の秋は、Amazon Kindle Unlimited（キンドル アンリミテッド）がおすすめ！？, 『go to Eat 予約サイト』ポイント還元おトクはどこ？予約方法や実施店情報まとめ. スポンサーリンク * Date: 2014-12-10 今回は、はてなブログの目次と見出しの作り方をお伝えしていきます。作るのはとっても簡単なのですが、いかんせん初期段階の見た目がとっても残念なので、かっこよく（可愛く）カスタマイズしていきます。, 難しく感じるような箇所もあるかもしれませんが図解の通り順番にやっていけば必ず目次と見出しを付けられますのでご安心ください＾＾, また、はてなブログを作ることによりユーザビリティが上がりアクセスアップにつながりますが、どのブログサービスを使うにしても肝心なのは「キーワード選び」です。, また私の主催する無料ブログ講座では実際にアクセスの集まるお宝キーワードの作り方を公開しております。, このように目次が記事の冒頭にあることにより、記事全体の流れを把握できますし、目当ての見出しにすぐにジャンプできるのでユーザーにとってメリットだらけです。, 例えば上記の目次であれば、美味しいお店の「第一位」をクリックすれば一気にその項目まで飛ぶことができます。, 今や個人ブログでも目次は当り前のようについています。ぜひ今回の記事を参考にサクっと目次を作ってしまいましょう。, また大見出し、中見出し、小見出しと絶対に全部を使わないといけないわけではありません。私の場合は基本、使うのは大見出しと中見出しの二つです。, 闇雲に記事を書いていくと途中で意味が分からなくなり「もういいや！」と全部消してしまった経験はありませんか？, これを解消するために「見出し」を前もってつけておくと便利です。途中で意味が分からなくなったとしても見出しを目印に戻ることもできますし、次の項目へ進むこともできます。, また見出しがあることにより、ユーザーさんもストレスなく読むことができます。教科書や参考書でも、もし見出しが無ければと思うとぞっとしますよね＾＾, このように見出しをつけることは「読み手だけでなく書き手にとってもメリットだらけです。, はてなブログの登録がまだの方は、はてなブログの作り方の記事を参考にしてサクッと作ってしまいましょう。, まずはこのように大まかに項目を並べていきます。あとから修正できるので難しく考える必要はありません。, 見出しにしたい文字を選択した状態で「見出し」と書かれた横の「▼」をクリック。大・中・小それぞれ付けたい見出しをクリックします。, ちなみに私はブログアフィリエイトで人生が激変しました。もし現状が不安な方はぜひ私の稼いでいる秘密をご覧ください。, 使っているテンプレートによっても表示は異なりますが見出しをつけた部分はこのように目立ちます。ユーザーにとってもメリハリがあって読みやすいですね。, 見出しができたら後はやる事は超簡単です。10秒で出来てしまうので一緒にやってみましょう。, すると、このように[:contents]という文字が入力され、ここに目次が入ります。, でもデフォルトのままだとちょっと寂しい感じがしますね・・・。ですので目次をかっこよく（かわいく）カスタマイズしていきましょう。, はてなブログの目次を作る事ができたら、次はコチラをご覧ください⇒無料ブログで最大に売るためのレポート, 他にもCSSを勉強すれば色々とできるのですが、この３つだけで問題ありません。（凝り過ぎても意味がないので）, 実は私が稼げるようになった理由は美しいデザインや画像、文章力などの小手先のスキルを諦めて「最短で稼ぐためのノウハウに集中して取り組んだから」です。, 先ほど目次にタイトルを付けた時と同じ流れで「デザインCSS」を開いて下記をコピペします。, デフォルトの目次はお使いのテンプレートによっても異なりますが、基本的には地味な背景色が使われています。目次なので地味でも良いのですが、せっかくなら他のブログと差別化したいですね。, ※上記をそのまま使うと水色背景色になります。色を変えたい場合は＃の後ろの「f0ffff」をお好きな色に変更して下さい。, 冒頭でもお伝えしたように、綺麗な目次を作れたからと言って決して稼げるわけではありませんね。, もし今回の記事を読んで「分かりやすかった」と感じられたら是非私のメルマガを読んでみてください＾＾, ブログでは語れないような極秘ノウハウや、売るための直接的なキーワードなどを限定公開しております。, 今回ははてなブログに見出しと目次を作ってカスタマイズする方法をお伝えしました。本文中でも書きましたが最近は皆さん当たり前のように記事に目次をつけていますね。, ただし、いくら記事のユーザビリティが高くてもアクセスが集まらなければ意味がありませんね。, そこでブログで最短最速で売るためのポイントをまとめてみましたので、ぜひお時間の許す限りご覧ください。, 【追伸】 今さらですが、本当にブログをやってきて良かったと心から思っています。このままずっと書き続けて将来は愛娘にバトンタッチするのも面白いかも＾＾.