WordPressテーマBlackoot

最近、横長の画面のパソコンを使うようになって気がついたのですが、このブログの背景を完全に黒にしたと思っていたら、実際には、左右と上下のマージン(但し、CSSで言うmarginではない)が黒よりも少し灰色がかっていました。調べたところ、「#111111」と言う色でした。

スタイルシートでは、「#111」で指定されている模様ですが、書き方がいやらしいです。CSSの記述から改行が削除されていて、読みにくいです。

article,aside,details,figcaption,figure,footer,header,hgroup,label,legend,menu,nav,section{display:block}.clear,.container::after{visibility:hidden;height:0}#logo,#navbar,#tagline{text-align:center}#footer .widget-title,#logo .site-title,#navbar,#sidebar .widget-title,.entry-title,.navbutton,th{text-transform:uppercase}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:top}(以下略)

嫌がらせですね。よほどカスタマイズさせたくないのでしょう。こんなのを解析して、時間を潰すのも馬鹿馬鹿しいので、下の一行で終わらせました。

body {
	background:#000000 !important;
}

このままのコードでお使い下さい。「!important」は必須です。また、「background-color」では動作しません。

この際、背景を黒にするために、これまでにやったカスタマイズをまとめて下記に書いておきます。下記コードを子テーマに書くか、カスタマイズ画面の追加CSSに書けばいいです。文字サイズの変更も含まれています。

/* 背景色を全て真っ黒にする設定 */
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;
}

/* 全体を真っ黒にする設定の続き。記事タイトルの下に残った線を消す設定 */
#page-title {
	position: relative;
	margin: 0;
	background: #000000;
	border-bottom: 1px solid #000000;
}

/* 記事のメタデータの背景を黒くし、文字サイズを12pxに拡大する設定 */
/* この設定だけではカテゴリーの方は変化がないので、この下の設定が必要 */
.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;
}

/* 記事のメタデータのうち、カテゴリーのところの背景を黒くし、
文字サイズを12pxに拡大する設定 */
.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;
}

/* 画面の左右及び上下の余白部分の背景を黒にする */
body {
	background:#000000 !important;
}

他にもいろいろやっていますが、背景色が関わっている部分は以上で全てです。他のカスタマイズ関連情報は下記リンク先を読んで下さい。

WordPressテーマBlackoot Liteのカスタマイズ方法(1)
WordPressテーマBlackoot Liteのカスタマイズ方法(2)
WordPressテーマBlackoot Liteからクレジット表記を削除する方法
blockquoteやcite要素のfont-styleはnormalで
Blackoot Liteのcite要素に設定された引用符を削除する方法
Blackoot Liteでpreタグ内の行が長いとはみ出すのを防ぐ
Blackoot Liteでciteタグにつく引用符やダッシュを消す

たぶん、このWordPressのテーマを使っている人は、日本人では他にはほとんどいないと思いますので、ぜひ上記の情報を活用してほしいです。

以下はBlackoot Liteの話ではなく、黒いテーマにまつわる話です。よって、Blackoot Liteを完全に黒にする方法にしか興味のない方は、ここから下は読む必要がありません。

黒い背景のテーマというのはあまりありません。全部は調べていませんが、幸いにも、WordPressの公式テーマには背景を黒または黒っぽい色にするオプションがあったりします。たとえば、Twenty Seventeenも黒っぽくできます。このテーマは非常にお勧めです。他にはTwenty Elevenもなかなかいいです。Twenty Tenもできたと思いますが、このテーマはレスポンシブ・デザインではないので、今時は選択肢に含まれないと思います。

なお、黒い背景色のテーマは、アフィリエイト・サイトにはお勧めできません。なぜなら、黒い背景だと、リンクをクリックしない人が非常に多いからです。逆に言えば、黒い背景のサイトであれば、絶対にアフィリエイト・サイトではありません。

生徒には、「黒いサイトを見たら、アフィリエイト・サイトではないので、安心していいです。」などと教えたりしています。その他、赤もいいですね。絶対にアフィリエイト・サイトではありません。

アフィリエイト・サイトは絶対に背景色を白にしますので、白いサイトを見たら、アフィリエイト・サイトである可能性が高いと思って間違いありません。白は要注意です。

私も白いブログや白いサイトを運営していますが、黒が嫌いな人のために白いのも運営しているとか、色をつけるのが面倒くさくて、色を指定していないため、今時の普通のブラウザーでは白いサイトに見えるだけだったりします。昔のブラウザーでは灰色になります。また、ブラウザーによっては、自分で背景色を設定できたりします。

ソフィア外語学院のサイトも、面倒なので、背景色を指定していません。

body {
font-family:MS Pゴシック,MS UI Gothic,sans-serif;
font-size:6vw;
line-height:1.8;
}

「お好きな色で見て下さい」ということです。上のところに、「background:#ffffff」といいうコードを書き加えれば、背景色を白に指定できるわけですが、こんなことのためにキーボードを打つのを拒否しているわけです。でも、今打ってしまいましたね。(^ ^;

この辺は、コードを書く私の思想とも言えるかもしれません。

黒は黒です。真っ黒にしましょう。

これまでのこのブログの歴史をふと振り返ってみたくなりました。某無料ブログサービスから移転してきて、最初に使ったのはWordPress公式テーマのTwenty Fifteenでした。背景色は白でした。

ソフィア外語学院学院長ブログ、sophiamt.infoの2016年4月20日のスクリーンショット。WordPress公式テーマTwenty Fifteenの白色のテーマを使用。
ソフィア外語学院学院長ブログ、sophiamt.infoの2016年4月20日のスクリーンショット。WordPress公式テーマTwenty Fifteenの白色のテーマを使用しています。

その後、Graphyと言うサード・パーティーのテーマに変えました。最初、背景色は白のままでしたが、後に背景色は青色に変わりました。

ソフィア外語学院学院長ブログ、sophiamt.infoの2017年8月2日のスクリーンショット。Graphyと言うテーマで背景色を白にして使用。
ソフィア外語学院学院長ブログ、sophiamt.infoの2017年8月2日のスクリーンショット。Graphyと言うテーマで、最初は背景色を白にして使用していました。

ソフィア外語学院学院長ブログ、sophiamt.infoの2017年12月24日のスクリーンショット。Graphyの背景色を青にして使用。
ソフィア外語学院学院長ブログ、sophiamt.infoの2017年12月24日のスクリーンショット。この頃には、Graphyの背景色を青にして使用していました。考えてみると、この日は、クリスマスイブですね。

しばらく青色の背景色を使っていましたが、あまりこの青色が好きになれなかったので、黒いテーマを探しまくりました。そして、現在のBlackoot Liteに変更し、もっと徹底して黒にしました。

ソフィア外語学院学院長ブログ、sophiamt.infoの2018年8月18日のスクリーンショット。Blackoot Liteと言うテーマで背景色をさらに徹底して黒にして使用。
ソフィア外語学院学院長ブログ、sophiamt.infoの2018年8月18日のスクリーンショット。Blackoot Liteと言うテーマを見つけ、背景色をさらに徹底して黒にして使用していました。

ソフィア外語学院学院長ブログ、sophiamt.infoの2020年10月28日のスクリーンショット。Blackoot Liteをさらにいろいろカスタマイズして使用。
ソフィア外語学院学院長ブログ、sophiamt.infoの2020年10月28日のスクリーンショット。この頃までにBlackoot Liteをさらにいろいろとカスタマイズしました。

こうしてずいぶん徹底して黒くしたのですが、それだけでは飽き足らず、今回、余白部分も真っ黒にしたわけです。それにしても、真っ黒にするのには、ちょっと苦労しました。

こうしてスクリーンショットを見ながら、このブログの歴史をたどってみると、ずいぶんいろいろな変遷を経て現在に至ったのだと言うことが再確認できたように思います。