twentyfifteenを子テーマでカスタマイズ…をあきらめました

2015年1月6日

この記事は最終更新日から10年経過しています。内容が古い可能性があります。

このblogのテーマをtwentyfifteenの子テーマに切り替えようと色々やっていましたが、手を付ければ付けるほど「これはちょっと大変かもしれない」と思い始めました。twentyfourteenではそれほどでもなかったものがなぜtwentyfifteenでは大変なのかについて考えてみました。

記事をざっと見る

twentyfourteenでのカスタマイズとtwentyfifteenでのカスタマイズの違い

今までこのblogで使うためにtwentyfourteenのテーマを子テーマをカスタマイズして色々といじってきました。デザイン的なカスタマイズはメインコンテンツの幅やフォントサイズ、トップページの追加などです。

twentyfifteenでカスタマイズしたかったところ

・フォントがとても大きいのでかなり小さくしたい
・paddingが大きいところを小さくしたい
・著者表示や年月日表示をフッターから上に移動したい
・左ブロックが大きすぎるので狭くしたい
・トップ部分に固定ページへのメニューを付けたい（これは実現済み）

などなどです。

この直したいところの列挙を見て、、、やはりこれは、、、だったらこのテーマを使う意味はどこに？

という疑問が湧いてきたり、最新のテーマは最新のWordPressの機能を一番使えるようになっているはず！ということで、確かに最新のモノを使いたい、と思い直したり。

思い直してフォントのサイズを直そうとしてみます。

twentyfourteenでフォントのメディアクエリー（メディアの幅による個別指定）は、

style.css(3090): @media screen and (max-width: 400px) {
style.css(3164): @media screen and (min-width: 401px) {
style.css(3292): @media screen and (min-width: 594px) {
style.css(3303): @media screen and (min-width: 673px) {
style.css(3437): @media screen and (min-width: 783px) {
style.css(3598): @media screen and (min-width: 810px) {
style.css(3649): @media screen and (min-width: 846px) {
style.css(3693): @media screen and (min-width: 1008px) {
style.css(4012): @media screen and (min-width: 1040px) {
style.css(4046): @media screen and (min-width: 1080px) {
style.css(4107): @media screen and (min-width: 1110px) {
style.css(4123): @media screen and (min-width: 1218px) {
style.css(4151): @media screen and (min-width: 1260px) {
style.css(4173): @media print {

となっています。これがtwentyfifteenでは、

style.css(2586): @media screen and (min-width: 38.75em) {
style.css(2774): @media screen and (min-width: 46.25em) {
style.css(3371): @media screen and (min-width: 55em) {
style.css(3892): @media screen and (min-width: 59.6875em) {
style.css(4562): @media screen and (min-width: 68.75em) {
style.css(5069): @media screen and (min-width: 77.5em) {
style.css(5578): @media screen and (min-width: 87.6875em) {
style.css(5590): @media print {

となり、メディアの種類は減っています。なのでこれは楽なのでは？と思うんですが実際に手を付けてみるととても大変でした（途中でやめましたが）。

twentyfourteenでは

    .list-view .site-content .entry-title {
        clear: none;
        font-size: 15px;
        font-weight: 900;
        line-height: 1.2;
        margin-bottom: 6px;
        text-transform: none;
    }

このようにピクセル指定や数値に小数点がついても1桁でした。

これがtwentyfifteenでは

    .site-title {
        font-size: 22px;
        font-size: 2.2rem;
        line-height: 1.0909;
    }
    .secondary {
        margin: 7.6923% 7.6923% 0;
        padding: 7.6923% 7.6923% 0;
    }

と、font-sizeは2種類（ピクセルとrem）で指定してあり、色々な所で使われている数値も小数点以下4桁などかなり複雑でした。想像なのですがtwentyfifteenは何らかのソフトウェアを介してこのあたりの数値を自動計算して出力してるのでは？と思いました。

とにかくということで手を付けようとしてのですが、数値を変更するのがとっても大変そうで挫折しました。けれどもそもそも、それほど大きさが変わらないならばそんなには大変じゃ無かったと思います。twentyfourteenでもフォントサイズはベースのものしか変更しませんでした。

＊ここまではやってみました

WordPressのテーマ選びで注意したいところ

なぜ大変なのかということを考えてみました。考えてみるとtwentyfourteenは自分が作りたいサイトのイメージに近かったです。それに較べるとtwentyfifteenは作りたいサイトのイメージからはだいぶ離れていました。そうでなければそれほど直すところも無かったはずなのでfunctions.phpによるシステム的な修正を適用していけばよかっただけなのであきらめなくてもよかったはずです。

カスタマイズをするにしても「あまりにもデザインが自分のイメージと違うテーマを元にすると直すのが大変」なのだなと気づきました。

これからいくつか作ったり、手直ししたいサイトがあるのですがこのことを元に最適なテーマ選びをしたいと思います。

ということでWordPressのテーマ選びで注意したいところを調べてみてこのサイトを見つけました。

自分のブログに最適なWordPressテーマの選び方