【はてなブログ】boilerplate.cssのなかみ
前々回の「オリジナルなブログにする」では、自分のはてなブログを1からデザインできることがわかりました。
その際に紹介した「boilerplate.css」に書かれていることについて、まとめておこうと思います。
私の備忘録用でもあります。
はてなブログでは、記事の内容やヘッダなど自分で設定できるところ以外は、
全てはてなブログが自動的にHTMLタグを記述し、レイアウトを行っています。
この自動的に記述された部分については、はてな側で勝手にclassやidなどを定義しています。
どのように定義したかの多くが「boilerplate.css」に書かれている
ということですね。
ただし、一部については書かれていないので自分で探す必要があります。以下の記事を参考にどうぞ。
関連記事
とはいえ、書かれていないから書かないだと私にとっても不便なので、
「boilerplate.css」に書かれていない内容は、次の逆引きまとめに私が知っている限りで記そうと思います。
執筆予定です。。。
boilerplate.cssの一覧
出現順に並んでいます。また前半のHTMLタグの定義(442行目まで)は省略します。
また、擬似要素や疑似クラス等についても省略しています(近辺に記述がある場合があります)。
執筆現時点で「みずー工房」が大きく変更したスタイルについては、class／idを太字にしています。
| class／id | 行 | 備考 | 関連 |
|---|---|---|---|
| html, body | 453 | ブログ全体で利用するフォントや文字色を定義 | |
| a | 461 | ||
| a.keyword | 469 | はてなキーワードが文中に登場した場合に適用するスタイルを定義 | |
| h~ | 475 | h1〜h6タグの文字色や高さを定義 | |
| #globalheader-container | 493 | ||
| #container, #footer | 499 | ||
| #content-inner | 523 | ||
| #wrapper | 577 | 1カラムレイアウトで利用 | |
| #box2 | 585 | 1カラムレイアウトで利用 | |
| #box2-inner | 595 | 1カラムレイアウトで利用。サイドバーのスタイルを定義 | |
| #hatena-module | 608 | 1カラムレイアウトで利用 | |
| #blog-title | 620 | ヘッダのスタイルを定義 | |
| #title | 620 | ヘッダの「ブログ名」のスタイルを定義 | |
| #blog-description | 647 | ヘッダの「ブログの説明」のスタイルを定義 | |
| .header-image-enable #blog-title | 654 | ヘッダ画像が有効の時に利用 | |
| .header-image-enable #blog-title-inner | 658 | ヘッダ画像が有効の時に利用 | |
| .header-image-enable #blog-title-content | 671 | ヘッダ画像が有効の時に利用 | |
| #top-editarea | 677 | ヘッダの下のエリアのスタイルを定義 グローバルメニューなどを配置 | |
| .breadcrumb | 682 | カテゴリや記事内で表示するパンくずリストのスタイルの設定 | |
| .entry | 687 | 記事全体についての設定 | |
| .entry-header | 692 | 記事個別のヘッダ(タイトルやカテゴリーなど)のスタイルを定義 | |
| .date | 699 | 記事個別の投稿日のスタイルを定義 | |
| .entry-title | 713 | 記事個別のタイトル(h1)のスタイルを定義 | |
| .categories | 724 | 記事個別のカテゴリのスタイルを定義 | |
| .entry-header-menu | 734 | 記事個別の「編集ボタン」のスタイルを定義 | |
| .entry-content img, .entry-content video | 741 | ||
| .entry-content h~ | 747 | 記事内のh1〜h6のスタイルを定義 | |
| .entry-content ul, .entry-content ol, .entry-content dd | 798 | 記事内のリスト系タグのスタイルを定義 | |
| .entry-content table | 813 | 記事内の表のスタイルを定義 | |
| .entry-content table th, .entry-content table td | 830 | 記事内の表の表題と表体のスタイルを定義 | |
| .entry-content blockquote | 840 | ||
| .entry-content pre, .entry-content code | 854 | ||
| .entry-content .table-of-contents | 895 | ||
| .entry-footer .social-buttons | 902 | 記事内のSNSボタンに関するスタイルを定義 | |
| .entry-footer-section | 906 | ||
| .comment-box | 916 | 記事内のコメント部のスタイルを定義 | |
| .comment-box .comment | 920 | 記事内のコメント表示のスタイルを定義(ul) | |
| .comment-box .entry-comment | 934 | 記事内の投稿されたコメントのスタイルを定義(li) | |
| .comment-box .read-more-comments | 944 | ||
| .comment-box .hatena-id-icon | 948 | コメント投稿者の画像のスタイルを定義 | |
| .comment-user-name | 957 | コメント投稿者の名前のスタイルを定義 | |
| .comment-content | 962 | コメント内容のスタイルを定義 | |
| .comment-metadata | 973 | ||
| .leave-comment-title | 983 | ||
| .pager | 990 | ||
| .hatena-module | 1001 | サイドバー個別の要素のスタイルを定義 | |
| .hatena-module-title | 1014 | サイドバーの名称のスタイルを定義 | |
| .hatena-module-profile .profile-icon | 1032 | サイドバーのプロフィールアイコンのスタイルを定義 | |
| .hatena-urllist | 1048 | サイドバーのURLリストのスタイルを定義 | |
| .hatena-urllist .urllist-category-link | 1070 | ||
| .hatena-urllist .urllist-date-link | 1075 | ||
| .hatena-urllist .urllist-entry-body | 1079 | ||
| .hatena-module-search-box .search-form | 1084 | サイドバーの検索のスタイルを定義 | |
| .hatena-module-search-box .search-module-input | 1098 | サイドバーの検索入力部分のスタイルを定義 | |
| .hatena-module-search-box .search-module-button | 1110 | サイドバーの検索ボタンのスタイルを定義 | |
| .page-about | 1129 | Aboutページに関するスタイルを定義 | |
| .archive-header-category | 1141 | アーカイブページのタイトルに関するスタイルを定義 | |
| .page-archive .archive-entry | 1145 | アーカイブページの投稿記事1つ分のスタイルを定義 | |
| .page-archive .entry-title | 1152 | アーカイブページの投稿記事のタイトルのスタイルを定義 | |
| .page-archive .entry-thumb | 1156 | アーカイブページの投稿記事のサムネイルのスタイルを定義 | |
| .page-archive .entry-description | 1169 | アーカイブページの投稿記事の概要のスタイルを定義 | |
| .page-archive .social-buttons | 1180 | アーカイブページのSNSボタンに関するスタイルを定義 | |
| #footer | 1186 |
おわりに
「boilerplate.css」の中身がある程度わかったので、少しデザインしやすくなったと思います。
今度は「要素→class／id」(逆引)のまとめを作ろうかなと思います。
おすすめ記事
