WordPressのテーマTwenty Seventeenのカスタマイズ

WordPressのテーマ、Twenty Seventeenいいですね。シンプルで今風のフラットなデザイン。
でも私は古い人間なので、5～10年ぐらい前に流行ったデザインにカスタマイズすることにしました。
うすーい灰色のバックに、白い紙を置いたイメージで。あとは空白を詰めます。

全体の横幅をデフォルトより広く設定する

まず、PC画面で横幅を1200ピクセルに設定します。

media screen and (min-width: 48em) {
	.wrap {
		max-width: 1200px;
	}
	.has-sidebar:not(.error404) #primary {
		float: left;
		width: 67%;
	}
	.has-sidebar #secondary {
		float: right;
		padding-top: 0;
		width: 29%;
	}
	.navigation-top .wrap {
		max-width: 1100px;
	}
}

media screen and (min-width: 48em)

は、PC画面などで幅が十分広い機種は、の意味です。
.wrapのmax-widthで横幅を設定(1200px)します。
記事部分の横幅は全体の67%、ウィジェット部分の横幅を29%としています。

@media screen and (max-width: 48em) 
{
  .wrap{
	padding: 0px;
	margin: 0px;
  }
}

逆にスマホでは画面全体にブログを表示させるため、padding・marginともに0px(余白なし)に設定します。

画面全体の設定

次に画面全体の設定をします。

div.site-content{
	background-color: #f1f1ed;
	color: #2b0a03;
	font-size: 16px;
	line-height: 1.8em;
	font-family: Verdana, "メイリオ", sans-serif;
}

背景色にごく薄いグレーを、文字色にほとんど黒のグレーを、あとは文字サイズ・フォント・行間隔を設定しています。

header#masthead{
	padding: 0px;
	margin: 0px;
}
div.content-area{
	padding: 0px;
	margin: 0px;
}
div#content{
	padding: 12px;
}

記事を囲っているarticleタグまでに色々とdivで囲っているので、ひたすらmargin・paddingを詰めます。

一覧ページの特等席に「投稿」ボタンがあるのですが、不要なので表示しないようにします。

header.page-header{
	display: none;
}

記事部分の設定

いよいよ本丸の記事部分です。

article{
	background-color: #ffffff;
	padding: 12px 16px;
	margin: 16px 0px 16px 0px;
	border: 1px solid #dddddd;
	  box-shadow: 4px 4px 10px 2px #dddddd;
}
article ul{
	margin-left: 16px;
}

背景色を白に、余白を設定するためにpaddingとmarginを、そして記事部分が影があるように見せるため、box-shadowを設定しています。borderは記事をきりっと見せるために、box-shadowよりわずかに濃いグレーを設定しています。これがあるかないかで印象が違います。

ウィジェット(右サイドバー)の設定

ウィジェット(右サイドバー)の設定です。色味を全く変えた(白から濃色に)ので、修正に苦労しました。

aside#secondary{
	color: #ffffff;
	background-color: #621900;
	margin-top: 16px;
	box-shadow: 4px 4px 10px 2px #afafaf;
}
section.widget{
	margin: 12px 12px 0px 12px;
	padding: 0px;
}

背景をこげ茶色、文字色を白にしました。
あとは間隔の設定(padding・margin)です。

form.search-form{
	padding: 0px 0px 0px 0px;
}

検索ウィジェットも間隔を詰めました。

h2.widget-title{color: #ffffff;
	margin: 0px 0px 8px 0px;
	font-size: 16px;
}

ウィジェットのタイトル(最近の投稿とかカテゴリーとか)は文字色を白に再設定、フォントサイズの設定はいらないかも。

aside#secondary a{
	color: #ffffff;
	box-shadow: none;
}
aside#secondary a:hover{
	color: #f65300;
}

ウィジェットのリンク(記事一覧とか)の色を白に再指定です。リンクの下線はなくして(box-shadow: none;)、マウスを当てるとオレンジ色に変わるようにします。

div.entry-content{
	line-height: 2em;
}
footer#colophon{
	background-color: #f1f1ed;
	margin: 0px;
	padding-left: 24px;
}
footer#colophon div.wrap{
	padding-top: 0px
}
div.site-info{
	padding: 0px;
}

フッタ部分です。基本的に詰め詰めにします。(padding・margin)

その他の要素

blockquoteなどを設定します。ここは趣味で。

article blockquote{
	font-size: 16px;
	font-style: normal;
	color: #473624;
	background-color: #fffaf8;
	border-style: solid;
	border-color: #b12e05;
	border-width: 1px;
	padding: 4px 12px 12px 12px;
	margin: 0px 0px 12px 0px;
}
article pre{
	background-color: #fffaf8;
	font-family: Verdana, "メイリオ", sans-serif;
	font-size: 16px;
	margin: 0px;
	padding: 0px;
}
article code,article tt{
	font-family: Consolas, Menio, "Liberation Mono", Courier, "メイリオ", monospace;
	font-size: 16px;
	line-height: 1em;
}
article ul{
	margin-bottom: 4px;
}

codeブロックの行間隔が広かったので(英字を使うから)、line-height: 1emとしました。

インライン要素

em{
	font-style: normal;
	color: #f00000;
}
.big{font-size: 150%;
}
em.big{color: #2b0a03;}

強調(em)は、イタリックにしたくなかったので、font-style: normalにして、色を赤(color: #f00000)にしました。

テーブル要素

table.bordered th{
	color: #fffaf8;
	background-color: #b12e05;
}
table.bordered td{
	padding: 0px 8px;
}
table.bordered img{
	vertical-align: middle;
}

背景色の設定と、間隔です。

画像

img.postcard{
  padding: 8px !Important;
  background-color: #ffffff !Important;
  border-color: #888888 !Important;
  border-style: solid !Important;
  border-width: 1px !Important;
  margin: 4px 12px 6px 0px !Important;
}

画像を、昔の写真風にふちを付けて表示できるように指定しました。

記事タイトル

h1.entry-title,header.entry-header h3{
	padding: 12px 16px 6px 16px;
	color: #ffffff;
	line-height: 1.6em;
  background-color: #621900;
	background-image: url("http://gadgets.pocolog.net/wp-content/uploads/sites/3/2017/12/main_background.jpg");
  background-position: 92% 63%;
}

記事タイトルは、トップ画面(記事一覧画面)ではh3、個別記事画面ではh1なので、両方に指定します。これ重要!
記事タイトルには、このブログのイメージ画像を背景に表示するようにしました。それからの流れで文字色は白。

header.entry-header h3 a{
	font-weight: bold;
	color: #ffffff;
	box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 0);
}
header.entry-header h3 a:hover{
	color: #f65300;
	box-shadow: none;
}

記事一覧画面での記事タイトルは、リンクになっていて文字色・下線を設定していたので、再設定しました。ここも、マウスを重ねるとオレンジ色になるようにしました。

以上が現時点での修正点です。