はい、今回は、現在ベータテスト中の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月１２日に結構大改造しました。
この記事を読んでくださりありがとうございました！
よろしければ他の記事もご覧ください！
こんにちは。翻訳ではお世話になっております。
次回バージョンの新たなテーマの情報助かります。
私は有料テーマなどあれこれ物色してみたものの、プラグインとの干渉が厳しいものであったり、
高機能が故に、他プラグインとの競合で管理画面が崩壊したりで、ほとほと疲れ、
今では公式の Twenty Fourteen を亜種化したままのテーマを使用している有様です。
色々ためになる情報で助かります。
また時々お邪魔させてください。それでは失礼致します。
こんにちは。翻訳ではお世話になっております。
次回バージョンの新たなテーマの情報助かります。
私は有料テーマなどあれこれ物色してみたものの、プラグインとの干渉が厳しいものであったり、
高機能が故に、他プラグインとの競合で管理画面が崩壊したりで、ほとほと疲れ、
今では公式の Twenty Fourteen を亜種化したままのテーマを使用している有様です。
色々ためになる情報で助かります。
また時々お邪魔させてください。それでは失礼致します。
こちらこそ翻訳ではお世話になってます。
そして初めてのコメントありがとうございます！
これからもこのくだらない(w)サイトをよろしくお願いします。
こちらこそ翻訳ではお世話になってます。
そして初めてのコメントありがとうございます！
これからもこのくだらない(w)サイトをよろしくお願いします。
初めまして。奈良と申します。
WordPressのテーマのカスタマイズで、ここにたどり着きました。
http://10324.dip.jp/wp/
を少しご覧ください。
投稿記事の左上の「投稿」という文字を消したのですが、色々見ましたが未だ探すことが出来ません。
ぞごんじでしたらご教示頂けませんでしょうか。
どうぞよろしくお願いいたします。
すいません、誤記訂正します。
投稿記事の左上の「投稿」という文字を消した”い”のですが、色々見ましたが未だ探すことが出来ません。
“ご存じ”でしたらご教示頂けませんでしょうか。
ご丁寧にありがとうございます。
投稿という文字の消し方は、display:noneするだけです。
具体的に言いますと下記のようになります。
.page-title {display: none;
}
#page-title {
display: none;
}
これでよろしいでしょうか？もし、これをやっても無理だった場合、別の方法をご紹介します。
コメントありがとうございました。
初めまして。奈良と申します。
WordPressのテーマのカスタマイズで、ここにたどり着きました。
http://10324.dip.jp/wp/
を少しご覧ください。
投稿記事の左上の「投稿」という文字を消したのですが、色々見ましたが未だ探すことが出来ません。
ぞごんじでしたらご教示頂けませんでしょうか。
どうぞよろしくお願いいたします。
すいません、誤記訂正します。
投稿記事の左上の「投稿」という文字を消した”い”のですが、色々見ましたが未だ探すことが出来ません。
“ご存じ”でしたらご教示頂けませんでしょうか。
ご丁寧にありがとうございます。
投稿という文字の消し方は、display:noneするだけです。
具体的に言いますと下記のようになります。
.page-title {display: none;
}
#page-title {
display: none;
}
これでよろしいでしょうか？もし、これをやっても無理だった場合、別の方法をご紹介します。
コメントありがとうございました。
おはようございます。
返信ありがとうございます。
この内容はダッシュボード→外観→テーマの編集で開かれるフィルの890目近辺のpage-titleの内容を編集すれば、投稿記事の左上の投稿の文字が消えると言うことで宜しいでしょうか。
よろしくお願いします。
いいえ、そういうことではなく（そうやってもできる気がしますが。。）テーマを直接いじるのではなく、子テーマを作り、子テーマのstyle.cssに書き込んでいただくという形です。
ちなみに、こちらで勝手にCssをテストした結果です；
または、下記のCssを読み込んでいただいても結構です。
https://cdn.rawgit.com/raspi0124/my-sites-files/a6011251/remove-post.css
おはようございます。
返信ありがとうございます。
この内容はダッシュボード→外観→テーマの編集で開かれるフィルの890目近辺のpage-titleの内容を編集すれば、投稿記事の左上の投稿の文字が消えると言うことで宜しいでしょうか。
よろしくお願いします。
いいえ、そういうことではなく（そうやってもできる気がしますが。。）テーマを直接いじるのではなく、子テーマを作り、子テーマのstyle.cssに書き込んでいただくという形です。
ちなみに、こちらで勝手にCssをテストした結果です；
または、下記のCssを読み込んでいただいても結構です。
https://cdn.rawgit.com/raspi0124/my-sites-files/a6011251/remove-post.css
返信ありがとうございます。
出来ました。
子テーマを作る。
twentyseventeen-child
というディレクトリを作成し、その中に
functions.php
style.css
を作成し
style.cssに
.page-title {
display: none;
}
#page-title {
display: none;
}
を追加し、外観→テーマでtwenty seventeen-childを有効化したら出来ました。
ありがとうございました。少しWPの知識が増えました。
返信ありがとうございます。
出来ました。
子テーマを作る。
twentyseventeen-child
というディレクトリを作成し、その中に
functions.php
style.css
を作成し
style.cssに
.page-title {
display: none;
}
#page-title {
display: none;
}
を追加し、外観→テーマでtwenty seventeen-childを有効化したら出来ました。
ありがとうございました。少しWPの知識が増えました。