ブログのデザインを変更した

Twenty Fifteen

WordPressのテーマを変更した。
テーマ”Twenty Fifteen”を使うことにした。

Twenty Fifteen – WordPress Codex 日本語版

スーパークリーンで、コンテンツに焦点をあて、私達のブログにもう少しシンプルさをもたらすようにデザインされています

サイトに適用すると、こんな感じ

幅が広いとき
ss 2014-12-23 23.18.09

幅が狭いときss 2014-12-23 23.18.46

すっきりしてる。
幅を広げると、フォントサイズも徐々におっきくなっていくスタイル。 
ちょっと、本文がディスプレイの右に寄って見える。
自分でブラウザの幅を調整しながら、じーっと見ているからそう感じるんかしら。ぱっとページを開いて見た場合、そんな風には感じないのかな。
うーむ。
でも、まあ、サイドバー、もう少し狭くしよう。元テーマを生かして、改造するなら子テーマを使うとのこと。

子テーマ

子テーマ – WordPress Codex 日本語版

Child Themes « WordPress Codex

WordPressの子テーマとは、別のテーマ(親テーマ)の機能を継承し、その機能にさらに機能を追加したりその機能を調整したりすることのできるテーマです。

まずは、日本語版の解説を見た。
「このページ「子テーマ」は 原文が頻繁に更新されており、情報が古くなっている可能性があります」
とあるけど、まあ、このへん、やりかたは変わってないだろうと思って読み出した。今回やりたい「サイドバーを狭くしたい」に関しては、子テーマの最小構成であるstyle.cssの作成のみで対応できそうだ。子テーマ用style.cssを作って、その冒頭で親テーマをimportすれば良いとのこと。ではやっていこう。
その前にちょっと英語版の解説を確認。
すると、こんなこと書いてあった。
@importを用いた親テーマのインポート方法は、もう最良の方法ではない。子テーマ用のfunctions.phpに、wp_enqueue_script()を使って、親テーマ、子テーマを取り込むようにしましょう。

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

それにしたがって、子テーマ用フォルダに上記のコード書いたfunctions.phpを置いた。

そのあと、表示したページのサイドバーを右クリック(Ctrl + クリック)。
「要素の詳細を表示」して、クラスの見当をつけて、幅を調整した。

/**
 * 15.4 Desktop Small 955px
 */
@media screen and (min-width: 59.6875em) {
    body:before {
        width: 20.4118%;
    }
    .sidebar {
        float: left;
        margin-right: -100%;
        max-width: 413px;
        /*max-width: 263px;*/
        position: relative;
        width: 20.4118%;
    }
    .site-content {
        display: block;
        float: left;
        margin-left: 20.4118%;
        width: 70.5882%;
    }
}

/**
 * 15.6 Desktop Large 1240px
 */
@media screen and (min-width: 77.5em) {
    body:before {
        width: 22.4118%;
    }
    .sidebar {
        width: 22.4118%;
    }
    .site-content {
        margin-left: 22.4118%;
        width: 77.5882%;
    }
}

 

「ブログのデザインを変更した」への2件のフィードバック

  1. こんにちは。
    こちら参考にさせていただきました。
    もしよろしければ、フッターの幅もコンテンツの幅に
    合わせるようなコードを教え頂けないでしょうか。
    よろしくお願いいたします。

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください