【解説】はてなブログのHTML/CSSの構造を解析する（1）

はてなブログのテーマは、デフォルトで「Smooth」というテーマが使われています。

はてなブログでブログを始める前から、よく見かけたデザインであり、「Smooth」を使い続けてる方も多いのは、シンプルで洗練されたデザインだからでしょう。

しかし、見慣れてくると、いくつかデザインとして気になるところが出てくるものです。そこで、今回は、テーマを変更することにします。

まずは、はてなブログがどういうHTML/CSSの構成になっているかを調べていきます。

参考文献
参考サイト
はじめに
事前準備
- テストページの準備
はてなブログのHTML/CSSの構造を解析する
はてなブログのHTMLの構造を解析する
- 現在の自分のブログのHTMLを確認する
- Visual Source CodeでHTMLを整形する
はてなブログのCSSの構造を解析する
- 現在のテーマのCSSを確認する
- Visual Source CodeでCSSを整形する
おわりに

参考文献

はてなブログ Perfect GuideBook [改訂第2版]

作者:JOE AOTO
ソーテック社

Amazon

はてなブログカスタマイズガイド: HTML & CSSで「はてなブログ」を次のステップへ!

作者:相澤裕介
カットシステム

Amazon

参考サイト

help.hatenablog.com

はじめに

ブログカスタマイズの一覧です。良かったら参考にしてください。

ブログカスタマイズのまとめ

準備編：はてなブログのHTML/CSSの構造を解析する（1） ← 今回
準備編2：はてなブログのHTML/CSSの構造を解析する（2）
第1回：「Minimalism」テーマのコードブロックの行間を調整する
第2回：「Minimalism」テーマのスマホで太字にならない問題の原因と対策
第3回：「Minimalism」テーマの目次の外観とリンク文字をカスタマイズする
第4回：「Minimalism」テーマの見出しをカスタマイズする
第5回：「Minimalism」テーマのサイドバーの各モジュールをカスタマイズする
第6回：カテゴリを階層化する（補足と問題点を追記）
第7回：Minimalismのカスタマイズ2点と、2つの問題点（スマホで見たときの画像余白と画像と背景の境界）の解決
第8回：CSS対応のタイトル付きの囲み枠を使う方法（定型文に登録）
第9回：ページ全体の表示フォントを変更する
番外編：編集ボタンを表示させる（編集ボタンを復活させる）
番外編2：カテゴリー階層化のソースコードを解析する

事前準備

テストページの準備

参考サイトの「デザインテーマ制作の手引き」に用意されているサンプルであり、デザインを確認するための、はてなブログの記事に必要な要素をまとめた「サンプルエントリー」を使って、準備します。

テストページ自体を、トップページからアクセスされることは、想定していないため、投稿日時を過去の日付にして、あまり、見られないようにしておきます。

具体的には、はてなブログでは、以下のように、投稿日時を設定することができます。

※2024/4/1追記：後日、テスト用のブログを開設したので、そちらにサンプルエントリーのページを作り、公開用のブログからはテストページは削除した

はてなブログのHTML/CSSの構造を解析する

自分のブログがどういうHTML/CSSで作られているのかを調べます。

具体的には、Chromeのデベロッパーツールという機能を使うと、HTMLとCSSの構造が理解できます。

Chromeで、解析したい対象のページで、「右クリック→検証」とすると、解析画面が出てくる。または、Chromeのメニューのその他のツール→デベロッパーツールをクリックしても解析画面を出すことができます。

はてなブログのHTMLの構造を解析する

現在の自分のブログのHTMLを確認する

自分のブログがどういうHTMLの構造で作られているかを調べます。

具体的には、ChromeでHTMLのソースコードを出力して調べます。Chromeで、解析したい対象のページで、「右クリック→ページのソースを表示」とすると、HTMLのソースコードが表示されます。

Visual Source CodeでHTMLを整形する

HTMLのソースコードは表示できましたが、インデントなどが揃っておらず、このままでは、構造を理解しにくい状態です。

Visual Source Codeには、HTMLや、CSSを、適切にインデントを入れて、見やすい感じに整形してくれる機能があるので、それを利用します。

その方法は、整形したいHTMLや、CSSのソースコードを、Visual Source Codeで開き、右クリックして、ドキュメントのフォーマットをクリックするだけです。

はてなブログのCSSの構造を解析する

現在のテーマのCSSを確認する

まず、自分のブログがどういうCSSが適用されているかを調べます。

これは、はてなブログのブログの管理から、「デザイン→ カスタマイズをクリック→{} デザインCSS」とします。

以下のように、現在適用されているCSSのURLが表示されます。

/* <system section="theme" selected="smooth"> */
@import "/css/theme/smooth/smooth.css";
/* </system> */

/* <system section="background" selected="default"> */
/* default */
/* </system> */

@import以降が、このブログに適用されているテーマのCSSの場所を示していて、ここにアクセスすればCSSが表示されます。

この例では、/css/theme/smooth/smooth.cssと書かれているので、自分のブログのURL（例えば、https://daisuke20240310.hatenablog.com/）を合わせたURL（例：https://daisuke20240310.hatenablog.com/css/theme/smooth/smooth.css）にアクセスすればOKです。