ともの技術メモ

これまで、このサイトのテーマは初めてWordPressを使った際に選んだテーマをPHPのバージョンアップに伴う不具合とかを手直ししつつ使ってきたのですが、さすがに今の世の中、スマホやタブレットでサイトを見る機会が増えてきていて、レスポンシブデザインへの対応をしたいなー、と思うようになりました。

しかし、元のデザインを自力でレスポンシブデザイン対応させるようなスキルもないので、ついにテーマ変更することにしました。で、新しいテーマはできるだけ長くサポートされるであろう、標準のテーマのうち、レスポンシブデザインに対応しているもの・・・ということで、TwentySeventeenにしました・・・が、TwentySeventeenはそのままだとアクセスするとどどーんと画像が表示されてしまうので、こちらのサイトを参考に控えめに表示されるようにしました。

変更箇所は、テーマの中のfunctions.phpの最後に、以下の記述を追加して UTF-8 で保存しました。もう少しデザインはカスタマイズすると思いますが、とりあえずレスポンシブデザインになったのでよしとします。

///////////////////////////////////////////////////////////////////////////// 2019.1.20
// トップページヘッダー画像を他ページと同じ扱いとする
add_filter( 'body_class', 'top_body_class');
function top_body_class( $classes ) {
    unset($classes[array_search("twentyseventeen-front-page",$classes)]);
    unset($classes[array_search("home",$classes)]);
    return $classes;
}

・・・が、何も考えずにテーマ自体のfunctions.phpを編集してしまうと、テーマがバージョンアップしたときに元に戻ってしまうようです。なので、子テーマを作って、そちらの funcions.php を編集しました。

子テーマは、サーバ上のテーマディレクトリと同じ階層に子テーマのディレクトリ（twentyseventeen-child）を作って、そこに必要なファイルを置きます。

一つは、functions.php で、以下の内容です。実際には、上記の内容も後ろに書き足して、UTF-8で保存しました。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

もう一つは、style.css で、以下の内容です。

/*
Theme Name:twentyseventeen-child
Template:twentyseventeen
Version:2.0
*/

ここに、こちらのサイトの記事の内容そのまま（ありがとうございます！）ですが、

@media screen and (min-width: 48em) {
	.wrap {
		max-width: 1100px;/*記事・サイドバー・余白の全幅*/
		padding-left: 2em;/*記事の左余白*/
		padding-right: 2em;/*サイドバーの右余白*/
	}
	.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;/*メニューバー幅*/
		padding: 0.75em 3.4166666666667em;
	}
	.site-content {
		padding: 2.5em 0 0;/*メニューバーと記事の間隔*/
	}
}

を後ろに書き足して元のテーマでは狭くて読みにくい記事の幅を広げてみました。

さらに、記事の見出しと記事内の見出しがともにh3で同じサイズで表示されてして醜いところがありましたので、あちこち参考にさせてもらいながら、style.css に

.entry-title {
	padding: 0.25em 0em 0.1em 0.5em ;
	background: transparent;
	border-left: solid 5px #753;
	border-bottom: solid 2px #333;
	font-size: 1.6em;
}

を追加して記事のタイトルに装飾をつけてみました。

今しばらくはデザインがいろいろ変わるかもしれませんが、ご容赦を（笑）