はてなブログの初心者向けに「記事の書き方」「編集画面の使い方」を44枚の画像を使ってわかりやすく解説していきます。装飾や見出し・目次、画像の挿入や予約投稿の方法など、記事を書くうえで知っておきたいことが丸わかり!読まないと損します。 当ブログで目次のデザインをカスタマイズしたので、今回はそのカスタマイズを紹介します。, この記事では目次の部分的なカスタマイズから、コピペするだけですぐに使えるコードまで用意したので、良ければお使いください。, border-topborder-rightborder-bottomborder-leftと個別に設定することも出来ます。, などと変えることで線の種類を変えることができます。他にも種類はあるので使いたい方はこちらのサイトを参考にすると分かりやすいです。, #dddの部分は色を表しています。同じ色が6桁の場合は省略できるので3桁となっています。ご自身のブログに合わせて色の調整をしたい方はこちらのサイトが参考になります。, 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(青)にすることでよく見る大学ノートのカラーに変えられます。, 大学ノート風を作った惰性で作ってしまいました。表紙がない感じで少し寂しいかもしれませんね(笑), 出来るだけ確認はしたつもりですが、間違い等があればご指摘ください。まだまだ初心者ゆえに書き方がおかしいところなどもあるかと思いますが、ご容赦ください。. ブログやウェブページのタイトルは僅かな情報しかありません。 グーグルなどの検索結果として表示される場合や、SNSでシェアされる場合は、一定の文字数までしかタイトルが表示されないことがあります。 記事中の内容を全てタイトルに盛り込むことも無理があります。 見に来てくれた人にページの内容を的確に伝えるために、目次は非常に有用なツールです。 また、ブログの目次は見たいところをクリックすると、その項目 … Copyright (C) 2020 自分の力でお金を稼ぐ方法|ネットで簡単に儲ける副業時代が来た All Rights Reserved. } ブログを報告する, 【無料版はてなブログ】はじめて1か月でGoogleアドセンスに受かる方法を考えてみた!. よろしくお願いします♪ */ * Copyright (c) 2014 http://hapilaki.hateblo.jp/ var pageTags=document.getElementsByTagName("meta"); * Released under the MIT license: はてなブログで目次と見出しを作る方法を図解でご説明いたします。また、デフォルトのままだと目次がしょぼいので、タイトルをつけたり番号をつけたり背景色をつけたりなどの最低限やっておきたいカスタマイズ方法もあわせてお伝えしたします。 | ・小売業 adsFilter(); 猫ちゃんが大好き ・大学 for(var i=0;i.

Ãームベーカリー Áし ɣパン 4, Dell Tb16 Ãビュー 7, Ņ認心理師 ȩ験会場 Ɲ京 12, Vscode Markdown Html 4, ɠ ƒたれる Áうなる 34, Ãリーシルク Amazon Ł物 14, Âシアン Ŋ力値 Ãトルタワー 6, Ãャン Ãン ǵ婚 11, Oracle Ãスト名 Ǣ認 6, Âトリエシュウ Áくるみ ź舗 11, Áこうき雲 ƭ詞 Âード 6, High&low The Worst ŋ画 Pandora 13, Ŧ娠 žち受け ż力 26, Up Gti Âンチダウン 5, Áく Fm ƨ浜 4, Ãラジリアンワックス Ãード Âルフ 4, Ãラティブ Ʌ信 ņ部音声のみ 11, Ƙ日 Ɩ舟 Âラボ 6, Ãウス Ãタン割り当て Ãッファロー 4, U11 Âッカー Ų阜 12, Âウリムシ ş養 ǔ茶 14, After Effects Ƙの瞬き 20, After Effects ž元 6, Âクセル ǩ白 şめる ɖ数 8, Ɲ京都 Âュニア Ľ重 ň Ɂ手権 Ť会 9, Airscreen Android Tv 20, Pso2 ȧ式pa ĸ覧 10, Ō川景子 Daigo ǵ婚 8, Ɨ Ő坂 Ãンバー 4, Ãジャー ś転数 Ãンキング 31,