はてなブログのヘッダー画像と目次CSSを修正する方法

こんにちは。ベトナムとタイへ旅行に行っていて、ブログを書いていなかったクボッチです。
前回の記事の続きで、はてなブログのヘッダー画像を変更する手順メモです。
前回の記事↓
フリー素材を加工して、はてなブログのアイコン画像を作成！ - kicks.jp blog

ヘッダー画像のアップロード

ヘッダー画像を変更するには、はてなブログ管理画面で
「デザイン」 > 「カスタマイズ」 > 「ヘッダー」
を選んで画像をアップロードします。

高さの調整

画像をアップロードしたら、ヘッダーの高さが延びて、思っていたのと違ってしまいました。。
そこで、サイズの調整をします。ブログのCSSを修正するには、
「デザイン」 > 「カスタマイズ」 > 「デザインCSS」
を選んでCSSの修正をします。
初期状態では、

/*  */
@import "/css/theme/reach/reach.css";
/*  */

のようになっていました。

これを↓のように修正しました。

/*  */
@import "/css/theme/reach/reach.css";
/*  */

.header-image-enable #blog-title #blog-title-inner {
   height: 120px;
}

.header-image-enable #title {
    padding-top: 40px;
}

これでヘッダーの高さが短くなりました。

CSSの修正は、
1. 管理画面からCSSファイルを特定して、全部コピー 2. 修正したい部分だけ記述して上書き の2つの方法があると思いますが、今回は2の方法です。

目次が正しく表示されない！

はてなブログの記事では、

[:contents]

のように書くと、記事の目次が自動で表示されますが、私は、この目次(index)をカスタマイズしていました。
はてなブログのデザインを管理画面から修正したら、カスタマイズしていた部分が消えてしまったみたいで、バックアップも探したのに見つかりませんでした。。

目次が変になった

仕方なくCSSを作り直しました。

.table-of-contents:before {
  content: "::::  I N D E X  ::::";
    display: block;
    text-align: center;
    margin: 0.8em 1em 0.8em;
    padding: 0 0 1em;
    font-weight: bold;
    font-size: 100% !important;
    border-bottom: 1px dashed lightgrey;
}

完成品

以下が現在のカスタムCSSです。

/*  */
@import "/css/theme/reach/reach.css";
/*  */

.header-image-enable #blog-title #blog-title-inner {
   height: 120px;
}

.header-image-enable #title {
    padding-top: 40px;
}

.header-image-enable #blog-title #title a {
    color: #E0FFFF
}

.header-image-enable #blog-title #blog-description {
    color: #E0FFFF
}

/* index (mokuji) */
.entry-content .table-of-contents {
  color: #668ad8;/*文字色*/
  border: dashed 2px #668ad8;/*破線 太さ 色*/
  background: #f1f8ff; /*背景色*/
  padding: 0.5em 0.5em 0.5em 2em;
}

.table-of-contents ul li, ol li {
  line-height: 0.5;
  padding: 0.5em 0;
}

.table-of-contents:before {
  content: "::::  I N D E X  ::::";
    display: block;
    text-align: center;
    margin: 0.8em 1em 0.8em;
    padding: 0 0 1em;
    font-weight: bold;
    font-size: 100% !important;
    border-bottom: 1px dashed lightgrey;
}

餅は餅屋？

とりあえず目的は達成しました！
テンプレートそのままよりは独自性が出たと思います。
でも数日後に見直すとなんかイマイチな感じがします。地味というかなんというか・・
ウェブデザイナーに依頼した方がキレイに作ってくれそうです。
直すのに飽きたのでとりあえずこれでよしとします。
一番納得いかないのは前のバックアップを絶対取ったはずなのにどこにも見当たらないことでした。。