はてなブログのテーマを自作してみた結果

最近、HTMLとCSSの勉強を初めたので、手を動かして覚えていくために、このブログのテーマを自作していました。

やり始めると夢中になってしまって、ブログの記事を書く時間すらなくなってしまいます。

みなさん、こんにちわ。ダイエッターでプチミニマリストのmonoです。ブログ更新が滞っていた間にご訪問された方ありがとうございます。あとでブログを見に行きますね ♪

ということで、ブログのテーマを自作したので、どういう手順でやったのかを記録として残しておこうと思います。もう、いい歳なのでやったことをまとめておかないと、すぐに忘れてしまうものですから。

お暇な方はお付き合いください。

はてなのブログのテーマをするためにまず読んだもの

はてなのブログテーマを自作するためには、はてなブログがどういうふうになっているのかをまずは確認しないといけません。

デザインテーマ制作の手引き - はてなブログヘルプ

はてなブログでは、テーマを自作したい人のために「デザインテーマ制作の手引き」というページがあるのでそれをまず読みました。

１からテーマを作るのは、素人の私には無理なのですが、はてなブログには「Boilerplateテーマ」というのが用意されてあって、これをベースにテーマを作成することができます。

このBoilerplateテーマをベースにしてテーマを作っても、複製や再配布OKとなっています。

Boilerplateテーマのダウンロード先を見てみると、CSSを効率的に記述できるメタ言語「LESS」も利用可能らしいのですが、もちろんわたしは数日前にCSSの本を購入したばかりの初心者。

CSSオンリーで作っていきますよ。

ということで、BoilerplateテーマのCSSをサイトからダウンロードしました。

準備を整える

必要なもの

テキストエディタ
テスト用のブログを非公開で作る
デベロッパーツールが利用できるブラウザ

デザインテーマを編集するために使うソフトは色々とあるようなのですが、マイクロソフトから出ているVisual Studio Codeというのが高性能でよさげなのですが、高機能すぎてまだ使い方がわかりません。とりあえずダウンロードしてみたものの...

ということで、わたしはいつも利用しているシンプルなテキストエディタのTeraPadでちまちまと作りました。

ブラウザのデベロッパーツールがとても便利で、はてなブログに1つテーマのテスト用のブログを非公開で作って、そこで編集したスタイルシートを適用させて確認しながら作業を行いました。

デベロッパーツールを使えば、スタイルがリアルタイムで適応されているかどうかわかるし、どのIDやクラスが割り当てられているのかが簡単にわかるのがいいです。

サンプルテーマを眺めてみる

box-sizing: border-boxを全要素に設定

とりあえず、サンプルテーマを見てみると、一通りの設定がなされていて、あとは装飾したらいいだけの状態になっています。

まず一番初めに書いた方がいいなと思ったのが

*, *:before, *:after {
  box-sizing: border-box
}

テーマのカスタマイズを途中までやっていたら、どうしても要素がはみ出てしまう箇所がでてきて、いちいち1つずつ治すのが面倒になったので、全部の要素にbox-sizing: border-boxを設定しました。

まず、横幅・縦幅はborderとpaddingを除いた幅になるのですが、このbox-sizing: border-boxを設定してあげるとborderまで横幅・縦幅として認識してくれるので要素がはみ出してしまう可能性が少なくなるというおまじない。

これをやっておけば、あとからちまちまとbox-sizing: border-boxを入れずに済みます。

壁にぶつかるflexbox

どんなブログの構成にしたいかを考えてみると、やっぱりレスポンシブに対応したブログがいいですよね。

やりたいことは

スマホ→1カラム
タブレット→メインは1カラムでサイドバー部分をメインの下に2列にしたい
PC→2カラム
フッターとヘッダーは横幅100%

こんな構成にしたいんです。

実際に記述したのはこちら

/* カスタマイズ　2カラムレイアウト */
#container,
#footer {
    width: 100%;
}
#content,
#top-box {
    width: 90%;
    max-width: 1140px;
    margin: 0 auto;
}
#footer {
    width: 100%;
    margin: 0px auto 0px auto;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #c0c0c0;
}
#footer-sub {
    width: 100%;
    margin: 0;
    text-align: center;
    background-color: #999;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
}
@media (min-width: 1024px) {
    #top-editarea {
        max-width: 1140px;
        margin-left: auto;
        margin-right: auto;
    }
    #content {
        max-width: 1140px;
        border: solid 1px #dfdfdf;
        padding: 40px;
        margin-bottom: 20px;
        box-shadow: 0 2px 3px 0 rgb(0 0 0 / 50%);
    }
}
/* サイドバー*/
#content-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
} 
@media (min-width: 768px) {
    #box2-inner {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        flex-direction: row;
    }
    #box2-inner {
        margin-left: 10px;
    }
    .hatena-module {
        width: 45%;
    }
}
@media (min-width: 1024px) {
    #content-inner {
    margin-right: auto;
    margin-left: auto;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
    }
    #wrapper {
        width: calc(100% - 380px);
    }
    #box2 {
        width: 336px;
    }
    .hatena-module {
        width: 100%;
    }
}
/* カスタマイズレイアウトここまで */

まず、スマホとタブレットとパソコンの横幅をどれくらいで切り替えるのかというのがブレイクポイントといいます。

元々入っていたテーマの設定は768pxと996pxだったのですが、768pxと1024pxに変更して、max-widthを1140pxにしてみました。

これが正解かどうかはわかりませんが、自分の持っているiPadでスマホ表示、iPad11Proの縦でスマホ表示、iPad11Proの横でPC表示になるのがわたしにはちょうどいいので、そんなことを考えながらこのサイズを選んでみました。

パソコンの横幅はもっと広いものもありますが、広すぎると本文が逆に読みにくくなりそうなので、max-widthも一応設定しました。

flexboxは1次元の配置をするときに使うのですが、IEには対応していなかったみたいなんです。IEでflexboxを使えるようにするためには、ベンダープレフィックスが必要になりますが、もうつけなくてもいいかな、面倒だし。

はてなが用意してくれているデフォルトのBoilerplateテーマにはflexboxにはベンダープレフィックスがついていたので、一応残しています。

今日覚えたcss

width: calc(100% - 380px);

パソコンの2カラムの構成を書いているときに困ったのが、レスポンシブデザイン。

レスポンシブデザインだと固定幅ではないので、サイドバーは固定幅にしてメインを可変にしたんです。でも、もうちょっとサイドバーとメインの間を開けたいとなった時に使ったのが、このcalc。

cssって計算もしてくれるんですね。

100％から380pxを引くというのができたんです。

これでディスプレイの幅が可変だったとしても、flexboxのspace-betweenにしても、間を好みで開けられます。

flexboxで覚えたこと

flexboxを使うときにはdisplay: flex;と書く。
flex-direction: row; 左から右に並ぶ→
flex-direction: column; 上から下に並ぶ↓
justify-content: space-between; 各アイテムは均等配置で、最初のアイテムは先頭、最後は末尾。アイテムが2つだと両端に寄る

雑感

テーマを自作するなんて自分にできるかな？と思ったけど、1つずつじっくりと考えながら、戻ったり進んだりしながらでもやれば1つのものが出来上がるんだなと、40歳を過ぎて思いました。

年齢を重ねると、蕎麦を打ち出すおじさんや急に家庭菜園を始めるおばさんなんかを見るけど、それと似たようなものなのかもしれません。

もし、表示がおかしかったりしたらコメント欄でもメールでも、はてなコメントでも教えていただけると助かります。

追記：はてなブログのテーマを自作していて、すごく楽しかったのでもう1つサイトを立ち上げて、ブログ制作について書こうと思います。もしよろしかったら遊びに来てくださいね。

ブログ制作についてのブログ→monoのメモ帳

自作したテーマのDEMO→Natural

LIFELOG

40代のダイエッターでプチミニマリストの雑記ブログです。ご訪問いただきありがとうございます。