2016/7/22WEB制作6シェアする361426LINE!2111765先日、本を読んでいたら目次部分の見出しは以下のような連番になっていました。このような連番を、CSSのみでHTMLのH見出しにも適用できないかなと試してみたら、案外あっさりとできたので紹介です。HTML見出しのh2には、「1、2、3...」と連番を振っていき、h3見出しには「1.1、1.2、1.3...」もしくは「2.1、2.2、2.3...(h2の連番が2だった場合)」といったように番号を振るにはCSSで以下のように書きます。0.6em;}上記コードをCSSファイルにコピペすれば利用できるかと思います。注意点このCSSを利用するには、コンテンツ部分のCSSセレクターを環境に合わせて書き換える必要があります。上記のコードであれば、「.entry-content」クラスのCSSセレクターを、コンテンツ部分のCSSセレクターに置換したりする必要があります。今回のスタイルシートを適用した状態で、見出しのあるコンテンツなどを見ると、以下のように表示されます。h5とかh6まで行くとややこしくなるかも今回は、h2-h6まで番号振るように設定してあります。h2、h3、h4とかまでならまだ良いのですが、h5やh6まで行くと、番号がありすぎで逆にややこしくなってしまうかもしれません。ここまでくると、番号が目立ちすぎてしまって、読んでもらうのには逆効果かもしれません。利用するのであれば、3階層ぐらいにとどめておくのがちょうど良いかと思います(今回の場合は、h2-h4)。まとめ今回のスタイルシートは、ブログの記事を章立てて書きたいときには良いかもしれません。毎回見出しに手入力で番号を振っている場合は、毎回入力する必要がなくなるので、効率的かと思います。このCSSを適用してしまうと、それまで手入力で入力していた番号の手前にも番号が表示されてしまうので、入力した番号を削除するという手間はかかります。Amazonプライムの損益分岐点。メリットがあるラインを探る。ブログで広く意見を聞きたい時、アンケートをするというのも一つの良い手段かと思います。以前、必要あってテープカッターを購入しました。先日、僕が使っているWindowsの無料ソフト(フリーウェア)をまとめました。先日、自作のWordpressテーマをGitで管理するようにしました。僕は去年まで白色申告でしたが今年から青色申告になります。そのために先日、「青色申告の届出書」と「開業届」を所轄の税務署に提出...記事を読む無料で使えるスクレイピングツール「Octoparse」の使い方。コードを書くことなく自由度の高いデータ収集が可能。以前、サイトスクレイピングツールのimport.ioを紹介しました。サイト作成時、「せっかくサイトを作ったのでロゴも作成したい」という方もおられるかと思います。ページに目次があると内容がある程度わかって分かりやすいこともあります。最近、自ブログのFacebookのシェア数を取得できていないことに気づきました。はげはげと表示されるのでしょうか?htmlの記述の仕方がわからないです。それともと記載するのかとか記載すればいいのでしょうか?いろいろ試してみましたが適用されませんのでよろしくお願いします。タグを記載しましたが消えていましたので追記ですhtmlの方にはほげほげはげはげと書きました。あぁダメですねスペースあけてタグ書いても消えますね。スラッシュh3ということです。ありがとうございます。返信が遅くなりました。解決できたようでよかったです。Wordpressのコメント欄は、h2・h3の見出しもそのまま出力されてしまうようですね。コメントをキャンセルメールアドレスが公開されることはありません。ブランド色も取得可能。Simplicityシンプルな無料Wordpressテーマを自作してみました。簡素好きな人におすすめ。Simplicityにて配布しています。Amazonブログパーツブログの記事に自然と溶け込むAmazonアソシエイトリンクを作成できるツールBabyLinkを作ってみました。ブログの文中に入れても邪魔にならない、シンプルなリンクが簡単に作れます。