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

この記事は約6分で読めます。

Image [2]

この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でもフォントサイズはベースのものしか変更しませんでした。

Image [1]
*ここまではやってみました

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

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

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

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

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

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

大まかなイメージを考える

にあるように、blogっぽい作りにしたいのかコーポレートサイトっぽい作りにしたいのか、あるいは何か「こんなサイトイメージにしたい」というイメージがあるのか というあたりを決めて探したり、

自作のテーマを作る

Image

にあるように Artisteer というフリーソフトで自作のテーマを作ったりすることも考えてみることにしました。

色々手を付けたいサイトがありますのでこれらについて少しトライしていきたいと思っています。

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

ゆうそうとITブログの更新通知が受け取れます!
スポンサー広告

WordPress theme テーマ
スポンサーリンク
ゆうそうとITブログの更新通知が受け取れます!
ゆうそうとITブログ

コメント

  1. 古い記事にもかかわらず取り上げて頂いて恐縮です。

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。