はい、今回は、現在ベータテスト中のWordpressテーマ、Twenty seventyをカスタマイズしてみたのでここでさらっと解説と、子テーマを配布したいと思います。(ぐだぐだになる予感がしなくもない….)
2017年2月6日追記；プラグインでTwenty Seventeenをカスタマイズする方法も載せてみたので、よろしければそちらもご覧ください。↓
準備
まず、Twenty Seventeenがインストールされてないと話にならないので、こちらを見ながらインストールしてください。
そして、インストールが終わったら子テーマを作成してください。
といっても自分はFTPとかなるべく使いたくない派なのでこちらのプラグインをいつもありがたくつかわせてもらってます。
カスタマイズ
はい、準備が終わったらいよいよカスタマイズし始めます（といってもさらっと流すので分からないところがある方はコメントまでどうぞ…出来る限りこたえます)
404.phpのカスタマイズ
はい、これが僕的には一番最優先なところです。
なにしろデフォルトは英語で書かれていて、サイドバーもないので???ってなってせっかく来た訪問者が戻ってしまう可能性が高いからです。
デフォルトの404;
んで、カスタマイズした後が下の写真;
ソース；
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title>お探しのページが見つかりませんでした</title>
<?php get_header(); ?>
</head>
<body>
<div>
<p>お探しのページが見つかりませんでした (404 Not Found)</p>
<p><?php get_sidebar(); ?>
お探しのページは存在しません。<br />
もしくは一時的にアクセスできないか、<br />
移動または削除された可能性があります。<br />
URLに間違いがないかご確認をお願いいたします。
<br>また、ひょっとしたら検索してみたらでてくるかもしれません。<br>横のサイドバーにて検索してください<br></p>
<p><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?> のトップページに戻る</a></p>
</div>
<?php get_footer(); ?>
</body>
</html>
これだけでも結構訪問者に優しくなった気がします.
あと、ソースは子テーマフォルダに404.phpを作って、そこに書いてください。
あとでCSSでも適用したほうがいい気がします
見出し
これはまあ好きなようにどうぞ。
ちなみにこのサイトの場合、ソースは
.entry-content h1 {
font-size: 1.4rem;
font-weight: 400;
}
.entry-content h2 {
font-size: 1.3rem;
font-weight: 400;
border-bottom: thin solid #6495ed;
}
.entry-content h3 {
font-size: 1.2rem;
font-weight: 400;
border-left: 4px solid #6495ed;
padding-left: 0.5rem;
}
です。(ソースはstyle.cssに書いてください。)
見出しはここでもみて、決めた方がいい気がします。
powered by wordpress の文を削除
はい、これもう微妙にあれなので消してしまいましょう(このテーマを作成中の皆さんすみません！）下のコードをstyle.cssにコピペするだけです。
// powered by wordpress の文を削除
.site-footer .site-title:after {
content: "";
}
span.credit-link
{
display: none;
}
.site-info {
display: none;
}
タイトルのフォントのでかさを変更
なんかもう書くことがあと１，２個しかないので別にどうでもいいコードを書いておきます。これは、タイトルのでかさを350に変更するコードです。
コード（style.css)
.entry-title {
font-size: 1.4rem;
font-weight: 350; /* でかさ変更 */
margin-bottom: 0.5rem; /* 下の距離 */
}
本文の文を文の幅を変更(少し小さめに）
コード(style.css)
body:not(.search-results) article:not(.type-page) .entry-content {
width: 80%; /* 本文の幅 */
}
はい、このコードは見ての通り本文の文と文の幅を本来の80%に変更します
投稿の一番最後にある<次>とか言う単語を右よせに
コード(style.css)
div.nav-next {
text-align: right; /* 「次」は右寄せ */
}
はい、もうこれは見出しの通りなので解説飛ばします(面倒になってきてしまったので暇なときにかき足します)
ウィジットの領域(?)のタイトルに青く下線を引く)
ウィジットの領域のタイトルがデフォルトではなんか太くなってるだけなのでデザインを変更します。
コード(style.css)
.widget .widget-title {
border-bottom: solid thin #6495ed !important; /* タイトルに下青線 */
padding-bottom: 0.4rem; /* 下線までの距離 */
margin-bottom: 0.8rem; /* 最初のエントリーまでの距離 */
font-weight: 100; /* フォントが大きすぎるので */
font-size: 1rem;
}
nav.navigation {
border-top: medium solid #6495ed; /* 領域の上下に青線 */
border-bottom: thin solid #6495ed;
padding: 0.5rem 0; /* 線との距離 */
}
サイトタイトルとサイトデスクリプション（サイト説明）手書き風に
(style.css)
@font-face {
font-family: 'Huifont';
src: url('https://cdn.rawgit.com/raspi0124/my-sites-files/ad9d1ffc/HuiFont109.ttf') format('woff');
}
.site-branding,.site-title,.site-description { font-family: "Huifont"; }
上のコードをstyle.cssに入れてみると、たぶんサイトのタイトルと説明が手書き風になったと思います。
なお、手書き風フォントは、ふい字置き場さんのほうからお借りしました。
ヘッダーの幅を変更する方法（サイトホーム）
ヘッダーの幅を追加するのも簡単です。
このCSSコードを入れて、XXXpxのところを編集するだけです。
.blog.home .custom-header-media {
height: 200px !important;
}
.site-description {
padding-bottom: 20px !important;
}
最後に
はい、これでとりあえず軽くカスタマイズ完了です。
上のコードだけではこのサイトと一緒のデザインにならない可能性があり、このコードはベータリリース時のものなので実際のリリースでは使えない可能性をご了承ください。
また、この子テーマ（この記事に含まれてないカスタマイズも入ってます）をダウンロードしたいという方は下記のリンクからダウンロードお願いします。
https://github.com/raspi0124/sleepy
そのうちGitHubに変更します。 2016/11/30 に変更しました
さらに1月１２日に結構大改造しました。
この記事を読んでくださりありがとうございました！
よろしければ他の記事もご覧ください！
コメントを残す