はてなブログにはデザイン用CSSを自作できる機能があります。しかし、はてなブログのCSSを初めて扱う人は、各クラス、IDがブログデザインのどこに影響を与えるかがよく分からないと思います。

この記事では、ブログの「レイアウト」に焦点を当てて、どのクラス、IDを編集すべきか、私なりの回答を提示します。

はてなブログのデザイン自作方法

はてなブログには、ブログデザインのためのCSSを自由に記述できる場所が用意されています。記述方法は一般的なCSSと全く同じで、編集したいタグ名やID名などをセレクターとして入力し、それらのプロパティ値を設定します。

はてなブログ最上段のメニューバー（グローバルヘッダといいます）の「自分のアカウント名」をクリックし、デザインを編集したいブログを選択したあと、「デザイン」をクリックすれば、デザイン変更画面に移動することができます。

既存のデザインが表示されていますが、自作CSSを定義する場合は、真ん中の「カスタマイズ」をクリックし、一番下の「{} デザインCSS」を開きます。

このテキストボックスの中に、自由にCSSを記述することができます。

ただし、現時点では編集すべきクラス名やID名がよく分かっていないので、何とかして調べる必要があります。

CSSを自作する前に...

まずは、はてなブログが提供している boilerplate.css を入手します。バージョンがいくつかありますが、今回はv2.1.0のboilerplate.cssをダウンロードしました。

boilerplate.cssには、はてなブログのデザインに最低限必要なCSSが記述されています。これは、はてなブログ公式のCSSファイルです。したがって、このファイルの中身を確認すれば、編集すべきID名、クラス名が分かります。

いろいろと試行錯誤した結果、ブログレイアウトの編集方法を何となく理解したので、私なりのCSS記述方法を伝授したいと思います。

2カラムレイアウトの組み方

まずは、CSSに何も記述していない状態のブログデザインを表示します。

注目すべきは、プロフィールなどのカラムが表示されていない点です。CSSを何も記述していない場合、プロフィール等は記事の下に表示されます。

もし、記事の右隣りにプロフィール等を置きたい場合は、自力でCSSを記述しなければなりません。それでは、どのようにCSSを記述すれば、2つのカラムを隣り同士に配置することができるでしょうか。

#content-inner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

今回の場合は、"content-inner"というIDを編集するのがよさそうです。上記のCSS文を入力してみてください。下図のように2カラムレイアウトに変化するはずです。

注：今回は「-webkit-」などのベンダープレフィックスは無視しています。この記述が必要かどうかは本記事の守備範囲ではないため、今回は割愛させてください。

boilerplate.cssでは、Flexboxを使ってレイアウトデザインが設定されています。content-innerに「display: flex;」を記述することで、content-innerの構成要素の並び順を指定することができます。

私が確認した限りでは、content-innerは「wrapper」と「box2」の2つの要素で成り立っています。これらを視覚的に分かりやすくするため、背景色を変更してみましょう。

#wrapper {
    background-color: #FDD;
}
#box2 {
    background-color: #DDF;
}

上記のCSS文を追記してみましょう。すると、赤と青のボックスが横並びになっているのが確認できるはずです。赤のボックスが「wrapper」、青のボックスが「box2」の適用範囲です。

試しに、「flex-direction」を「row-reverse」にしてみると、プロフィールが左に移動するはずです。これは、「flex-direction」が「row」だと並び順が「左→右」の順番になり、「row-reverse」だと並び順が「右→左」となるからです。

FlexboxはWebページのレイアウトを決める際にかなりお世話になる機能です。もし記述方法がよく分からないなら、Flexboxを学習するゲームがありますので、こちらで練習してみるとよいかもしれません。

適切な余白を設計する

さて、2カラムレイアウトを実現することはできましたが、現時点ではボックス間の余白が皆無であり、とても見づらい構成になっています。

そこで、ボックスの周りに余白を設定します。こちらもboilerplate.cssに準拠してCSS文を記述していきます。

#container, #footer {
    width: 720px;
    margin: auto;
    padding-left: 0;
    padding-right: 0;
}
#wrapper {
    width: 480px;
}
#box2 {
    width: 200px;
}
#blog-title-inner {
    background-size: contain;
}

上記のCSS文を記述してみてください。なお、blog-title-innerについては、私のブログのタイトル画像が見切れてしまわないようにしているだけなので、こちらは記述しなくても大丈夫です。

ここでは、ブログ全体の横幅を720ピクセルに設定し、wrapperを480ピクセル、box2を200ピクセルに設定しているため、40ピクセル分の余白が間に残されています。

boilerplate.cssでは、ウィンドウサイズが768ピクセル以上のときに、この設定を適用するようにメディアクエリを記述しているため、周りの余白も最低24ピクセル分は確保するようになっているようです。

まとめ

以上が、はてなブログのレイアウトを自作CSSで変更する方法です。この記事では、以下の通りにCSS文の記述を行いました。

1. boilerplate.cssを入手し、編集すべきID名、クラス名を探す。
2. content-innerを編集し、ブログを2カラムレイアウトにする。
3. container、wrapper、box2のwidthを編集し、適切な余白を設定する。

もし、不足している所や誤解している部分がありましたら、コメント欄などでお知らせいただけますと大変助かります。本記事をご覧いただきありがとうございました。

追記（2020年10月23日）

今回、HTMLのID名を調べるためにboilerplate.cssを使いましたが、Chromeの開発者ツールを使えばもっと簡単にID名を調べることができます。

やり方は、ctrl + shift + cをクリックするだけです。マウスカーソルを合わせることで、content-innerがどの部分を対象としているかが確認できました。