19年1月以降にはてなブログを始めた場合、デフォルトのデザインはSmoothというテーマになっている。右にサイドバーが表示される(横幅768px以上の時)中で、本文の枠の横幅が大きめなのは良い感じだったのだが、細かな点が良くない感じだったので、これを基にCSSを記述してデザインをカスタマイズした。少なくとも記事執筆当時はそうであった。無料プランでもCSSが記述できるのは良い感じ。

あまりCSSに触れる機会が無く、書き方をよく忘れるので編集したことを備忘録として書き留めておく。デザインをカスタマイズしたい人の参考になれば幸いだ。概念や書式を全ては紹介しないので、分からない人は他サイトも参考にして欲しい。

CSSではてなブログのデザインをカスタマイズする基本

骨子となるCSSは、blog.hatena.ne.jp/css/theme/テーマ名/テーマ名.cssにある。今回の場合だとテーマ名の部分はsmooth。デザイン→カスタマイズ→デザインCSSの項に記述したものはこれより後に適用されるので上書きが可能。

CSSは、下記のように、セレクタで適用範囲を、プロパティで何を設定するのかを、値でどのように設定するのかを記述する。

セレクタ{
 プロパティ1:値;
 プロパティ2:値;
}

セレクタは、「.」で始めればクラス名、「#」で始めればID名、先頭に何もつけなければタグを指定することになる。更に、セレクタを複数並べて半角スペースで区切って要素の中を要素を指定、セレクタを「,」で区切って複数指定、「セレクタ:状態」である状態の時だけ適用などができる。例えば

.entry-content a:hover,.comment a:hover{
  color:red;
}

と書くと、entry-contentというクラスを持つタグの中のaタグに囲まれた部分と、 commentというクラスを持つタグの中のaタグに囲まれた部分に対し、カーソルが乗せられている時だけプロパティcolorに値redを代入することができる。つまりクリックしようとすると字が赤くなる。

ちなみに、複数の条件に当てはまる部分は、タグ＜クラス＜IDの優先順で適用される。

作りたいデザインを実現する方法を探す

Google Chromeを使用する。自分のブログを開き、F12で開発者ツールを表示。 Elementsの項を開くと、HTMLのソースが表示される。ここでタグにカーソルを合わせると、そのタグに囲まれる部分が青みがかるので、これでデザインを変えたい部分のタグやクラス名が何なのかを探す。

以下はsmoothのデザインを使った時の話になる。どこのデザインを変えたいにしても、<html>→<body class="page-index">→<div id="container">→<div id="container-inner">まではほぼ共通。

その後は、例えば、記事本文だと <div id="content"> →<div id="content-inner"> →<div id="wrapper"> →<div id="main"> →<div id="main-inner"> →<article id="entry hentry……複数あって長いので省略">、

サイドバーのモジュール(プロフィール、カテゴリー、月別アーカイブなど)だと <div id="content"> →<div id="content-inner"> →<aside id="box2"> →<div id="box2-inner"> →<div class="hatena-module">など。

あとは前項で示したデフォルトのCSSから当該セレクタを検索。それらしいプロパティがあれば真似して記述して書き換え、無ければ自分でデザインの実現に必要なプロパティを考えるか調べる等して記述する。 Smooth以外のテーマのCSSが参考になるかも。

実際のカスタマイズ

見出しの文字の大きさなどを調整

.entry-content h1{
  padding-left:10px;
  border-left:10px solid #cfd8d8;
  padding-bottom:0px;
  border-bottom:1px solid #cfd8d8;
}

.entry-content h2{
  padding-left:10px;
  border-left:5px solid #cfd8d8;
  border-bottom:1px solid #cfd8d8;
}

.entry-content h3{
  padding-bottom:0px;
  border-bottom:1px solid #cfd8d8;
}

見出しの左に長方形を付け、見出し下の余白を小さくし、見出しの下に直線を引くようにした。デフォルトだとh1,h3では下に直線を引くのに対し、h2では下に直線を引かないようになっているのが個人的に不満だった。

リンクの色を緑じゃなくて青にする

.entry-content a,.comment-box .comment a,.hatena-module-profile .id a,.archive-module-calendar .calendar-day a{
  color:#1040A0;
}

.entry-content a:hover,.comment-box .comment a:hover,.hatena-module-profile .id a:hover,.archive-module-calendar .calendar-day a:hover{
  color:#1010A0;
}

リンクの色を試行錯誤したかったから全て纏めたけど保守性悪いかも。ちなみにsmoothでのリンクの色は通常#119e4d、hover時で#0c7037。

サイドバーを透過せず、モジュールごとに枠を分ける

f:id:ceika:20200119101508p:plain f:id:ceika:20200119101517p:plain

枠？ボックス？正しくは何て表現すれば良いのかよく分かってない。 smoothのデフォルトでは上図の１のようになっているので、２のデザインを実現したい。

#box2{
  background:rgba(255,255,255,0);
  padding:0;
}

.hatena-module{
  background:#fff;
}

.entry,.hatena-module{
  border:1px solid #CCC;
}

ウィンドウの横幅が1020px以上の時はこれだけで問題無いのだが、 768px～1020pxの時は記事本文の枠とサイドバーのモジュールの枠の、左右の隙間が無くなってくっついてしまう。 1020px以上の時に問題が生じないのは、

@media (min-width:1020px){
  #main{
    padding:0 3% 0 0;
  }
}

という記述によるので、

@media (min-width:768px){
  #main{
    padding:0 2% 0 0;
  }
}

このように記述することで改善した。

また、モジュールを囲む枠が離れている割に枠が小さいので、下記のようにして調整した。

.hatena-module{
  margin-bottom:1.5em;
  padding:.5em 20px 1em 20px;
}

paddingには背景色が適用されるが、marginには適用されない。

余談

デザイン→カスタマイズ→デザインCSSの項に記述したものをコピーして、windows標準のメモ帳にペーストすると改行がなくなってしまう。更にこのままメモ帳で改行すると無を消したりできるようになってしまう。これははてなブログの設定に保存されるテキストの改行コードがLFなのに対し、windowsの改行コードはCR+LFだから起きるのだと思う。一旦どこかのテキストエリア等にペーストしてからもう一度コピーするとメモ帳でも正常に扱える。

夢想メモリ

ゲームの攻略、データ、感想、縛りプレイのこと等を中心に、ゲームとは無関係の雑記も書きます。

はてなブログのデザインをデフォルトのSmoothを基にCSSでカスタマイズする