今日、午後4時ごろ、ブログのデザインを変更しました。このデザインのことを「テーマ」というので、テーマを変更したと言うことです。ちなみに、無料ブログサービスでは、テンプレートと言っていることが多いです。

最初は、その新しいテーマをそのまま使おうかと思ったのですが、ちょっと変えてみることにしました。初期状態では、黒に近い灰色とか黒に近いチョコレート色の部分が多いのですが、全部真っ黒にしてみました。

最初にどういう名称のテーマかを断っておきますね。

Blackoot Lite Version 1.1.21
作者:Iceable Media 公式サイト

プロ版は39ドルだそうです。どう違うのでしょうね。

はっきりしているのは、こういう有料版は、カスタマイズのオプションが用意されていて、それに従ったカスタマイズであれば、すぐにできることですね。つまり時間の節約になると言うことです。

ここでは、ケチって無料版を使いますので、カスタマイズの大半は自力でやることになります。「オプションの設定でカスタマイズするのではなく、自分でコードを書いてカスタマイズする」と言えばわかりやすいかもしれません。それでは、手動カスタマイズを開始しましょう。

どこを触ると黒くなるのかすぐにはわかりませんでしたが、10分ぐらい格闘していたら、何となくわかりました。

body.custom-background {
background-color: #000000;
}

div#main-wrap, div#nav-wrap, div#header, div#main-content {
background-color: #000000;
}

div#postmetadata a {
background-color:#000000;
}

このうち、一番上の・・・

body.custom-background {
background-color: #000000;
}

・・・はどこが変わったのは不明です。いらないかもしれませんが、一応、付録のカスタマイザーで背景色を黒に設定すると上記のコードが作られる様なので、そちらで設定せずに、自分で書くことにしました。

眠いので、まんじゅうを食べて続きを書きます。

高校3年生の女の子に聞いてみたら、今時、学校ではこの#000000の様なコードを暗記させるるらしいです。学校って、本当に馬鹿げた教え方をしますよね(笑)。

白は#ffffffで、赤は#ff0000、青は#0000ff、緑は#009900なんですよ。

・・・と言う話をしたら、

緑は#00ff00じゃないですか?

・・・と言われました。

それはどちらかというと黄緑ですが・・・。

こんなのを暗記してどうするのでしょうね。こういうことは調べればすぐにわかります。こんなことを教えているから、子供の学力が下がるのでしょう。困ったものですね。

次に気になったのは、文字の大きさです。ちょっと文字が小さいです。恐らく、14pxか13pxぐらいですね。こんな小さな字を読むのは、苦痛です。最低でも16pxはほしいところです。

どこで文字サイズを指定しているのか不明でしたが、推定された文字サイズから逆に洗い出すことで発見しました。そこで、こういうコードを書きました。

div.theContentWrap-ccc {
font-size:16px;
line-height:1.8em;
}

div.post-content {
font-size:16px;
line-height:1.8em;
}

文字サイズを大きくしたところ、行間が著しく狭くなってしまって、読めたものではないので、1.8em分空けました。それが上のline-heightの指定です。

しかし、まだ記事のメタデータ部分(投稿日時、投稿者名、カテゴリーなどの情報)が小さな字のままです。ほとんど読めないぐらいに小さいので、読める大きさにしないといけません。これは必須ですね。

これも文字の大きさから逆に推測して、下記コードを書いてました。

.postmetadata span {
display: inline-block;
font-size: 12px;
font-weight: normal;
background: #000000;
box-sizing: border-box;
padding-right: 5px;
margin: 0 1px 1px 0;
line-height: 25px;
}

これで一応大丈夫なはずだったのですが、実際には、メタデータのうち、カテゴリーの部分が完全に黒くなっていませんでした。そこでさらに調べて、このコードを書きました。

.meta-category a,
.meta-category a:visited,
.meta-category span,
.meta-tags a,
.meta-tags a:visited {
display: inline-block;
font-size: 12px;
font-weight: normal;
padding: 0 5px;
background: #000000;
margin: 0 1px 1px 0;
line-height: 25px;
}

こんな面倒なことになるとは、予想外でした。

あと、ブログのタイトルで、文字と文字の字間が詰まりすぎています。これを離すために下記コードを書いてみました。

h1.site-title {
letter-spacing:0.1em;
}

ページ下の部分にクレジットの表記がありますが、2段になっていて、どうも格好もよくありません。そこで消すことにしました。

div.sub-footer-left {
display: none;
}

著作権の表記は、サイドバーの下端に移動しました。年が自動更新される様に下記のJapavaScriptを書きました。PHPのコードによる方法は動作しないようです。

<script type="text/javascript">
document.write(new Date().getFullYear());
</script>

こうしてご覧のテーマが仕上がりました。このカスタマイズに約1時間かかりました。

何か、前のテーマのGraphyを真っ黒にしても同じであるような気がしないでもありません。

何日か前、本山校のブログもテーマを変更しました。こちらの差は明瞭です。

関連ページ:
WordPressテーマBlackoot Liteのカスタマイズ(2)