スポンサーリンク

テーマ「First」のカスタムでブログの幅を広げる

contentwidth

既存のテーマをカスタムしてレイアウトを大きく変更するのは少し勇気が要りますね。今回はとある理由から、私が愛用しているテーマ「First」の横幅を広げてみることにしました。

すべてはAdSenseのため

とある理由というのはGoogle AdSenseです。先日ようやく審査に通り、晴れてブロガーとしてのスタートラインに立つことができました。審査に通るまで初申請から1か月以上かかったので、合格通知のメールが来た時はめちゃくちゃ嬉しかったです。記念にGIF載せておきますね。

合格通知

最後のドヤ顔が憎い!

336 × 288サイズの広告を横並びに掲載したい

色んなブログを拝見しましたが、パソコン上だと圧倒的に336 × 288サイズの広告を掲載している方が多いです。ちなみにモバイル端末上だと300 × 250サイズが多いですね。そのサイズが多いということは、それだけそのサイズのクリック率が高いということだろうと思い、私も真似してみることにしました(笑)。

見栄え的に360 × 288サイズの広告を横並びに配置したいと思ったのですが、私が使っているテーマ「First」はメイン部分の幅が664pxなので、幅が336pxの広告2つを横並びにすることができないのです。最低でも672px必要ですからね。

というわけで子テーマを使ってブログ全体の幅を広げることにしました。

テーマ「First」のデフォルト幅を見てみよう

テーマ「First」のコンテンツ幅

上の画像を見るとわかりますが、なぜメイン部分の幅が664pxなのかというと、メイン部分の親要素の幅が1000pxであり、その64.4%に指定しているからです。

早速CSSで幅を変更していきますが、まずは親テーマのstyle.cssで644pxに指定してあった部分を子テーマのstyle.cssで702pxに上書きします。この部分は一番始めに記述してください。

textarea {
       max-width: 702px;
}

.site-top,
.site-content,
.footer-widget,
.site-bottom {
       max-width: 702px;
}

次に大きい要素から順番にサイズを指定していきましょう。

ページ幅を1220pxから1280pxへ

ページ全体の幅を1220pxから1280pxへ拡大します。上の図でいうと赤字の部分です。Webサイトの幅は8の倍数が良いという情報を得たので、とりあえず1280pxにしました。

.boxed .site {
       max-width: 1280px;
}

コンテンツ幅を1000pxから1080pxへ

次はメインとサイドの親要素となるコンテンツ全体の幅を1000pxから1080pxに変更します。これも8の倍数ですね。
また、ここの値をきちんと選ばないと、子要素の幅をパーセンテージで指定した場合にきりの良い数字にならなくなります。その意味でデフォルトの1000pxという値は非常に扱いやすいです。

@media screen and (min-width: 783px) {
       .site-top,
       .main-navigation,
       .site-bottom {
              max-width: 1080px;
       }
}

@media screen and (min-width: 960px) { 
       .site-content,
       .footer-widget {
              max-width: 1080px;
       }
}

基本的には親テーマのstyle.cssを見て1000pxで指定してあった部分を子テーマのstyle.cssに1080pxで上書きしています。

メイン幅を644pxから702pxへ、サイド幅を260pxから270pxへ

先ほど変更した親要素の幅1080px65%702px25%270pxとなり、小数点以下が出ずにきりの良い数字になるので、このパーセンテージをメインとサイドの幅に指定してやります。

@media screen and (min-width: 960px) { 
       .content-area {
       width: 65%;
       }
       .no-sidebar .content-area,
       .full-width .content-area {
              width: 702px;
       }
       .sidebar-area {
              width: 25%;
       }
}

ここは先ほど1080pxを指定した部分と同じメディアクエリを使っているので追記する形でもOKです。メディアクエリとは「@media screen and (min-width: 960px)」の部分のことです。

これでCSSの記述は完了です!

子テーマのfunction.phpを編集する

実は親テーマのfunction.phpを見ると、「function first_setup()」という関数によって、アイキャッチ画像を入れた際のサイズ指定やページの幅に関する定義がなされていることがわかります。

幸いにも親テーマのfunction.phpにはこの関数に対して「if ( ! function_exists( ‘first_setup’ ) ) :」という条件付けがされているので、子テーマのfunction.phpに「function first_setup()」という関数を記述すれば子テーマの方が優先して適用されます。助かりますね!

早速子テーマのfunction.phpに以下の内容を記述します。

function first_setup() {

    global $content_width;
    if ( ! isset( $content_width ) ) {
        $content_width = 702;
    }

    load_theme_textdomain( 'first', get_template_directory() . '/languages' );

    add_theme_support( 'automatic-feed-links' );

    add_theme_support( 'title-tag' );

    add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size( 702 );
    add_image_size( 'first-page-thumbnail', 1280, 480, true );
    update_option( 'large_size_w', 702 );
    update_option( 'large_size_h', 0 );

    register_nav_menus( array(
        'primary' => __( 'Navigation Bar', 'first' ),
        'header' => __( 'Header Menu', 'first' ),
        'footer' => __( 'Footer Menu', 'first' ),
    ) );

    add_theme_support( 'html5', array(
        'search-form', 'comment-form', 'comment-list', 'gallery', 'caption'
    ) );

    add_theme_support( 'post-formats', array(
        'aside', 'audio', 'chat', 'gallery', 'image', 'link', 'quote', 'status', 'video'
    ) );

    add_theme_support( 'custom-header', apply_filters( 'first_custom_header_args', array(
        'default-image' => '',
        'width' => 1280,
        'height' => 480,
        'flex-height' => false,
        'header-text' => false,
    ) ) );

    add_theme_support( 'custom-background', apply_filters( 'first_custom_background_args', array(
        'default-color' => '#f5f4f2',
        'default-image' => '',
    ) ) );

    add_editor_style( array( 'css/normalize.css', 'style.css', 'css/editor-style.css', str_replace( ',', '%2C', first_fonts_url() ) ) );
}

 アイキャッチ画像のサイズ変更を一括で行う

function.phpで設定しても今まで投稿されたアイキャッチ画像のサイズは変更されません。

アイキャッチ画像のサイズ変更

このように以前の644pxに合わせたサイズのままになっています。そこでプラグインを使って今までのアイキャッチ画像のサイズ変更を一括で行います。

使用するプラグインはこちら

Regenerate Thumbnails

この「Regenerate Thumbnails」をインストールして有効化したら、WordPressメニューの「ツール」から「Regen. Thumbnails」を選択し、「すべてのサムネイルを再生成する」ボタンを押します。

これで既存のアイキャッチ画像の横幅が702pxに変更されるはずです。

無事AdSenseを横並びにできました!

AdSense2つ分の幅336px × 2 = 672pxと広告同士の間隔30pxとを合わせてメインの幅702pxにぴったり収めることができました!

パソコン用だけでなく、スマホやタブレット用にもAdSenseの設定やレイアウトの変更をしたので結構大変でしたが、どの端末でも納得のいく配置ができて良かったです。
先日タブレットを購入したこともあって、パソコン、スマホ、タブレット全てで動作確認ができました。

HTMLやCSSの知識がついてくると思ったようにレイアウトを変えられるようになるのでとても楽しいです。これからも頑張ります!

スポンサーリンク

シェアする

コメント

  1. take より:

    なかなかwordpressのfirstでAdsense横並びさせる方法が見つからなくて苦労していましたが、こちらを参考にさせてもらってようやくできました!
    ありがとうございました。

    • Lenny より:

      コメントありがとうございます。
      お役に立てたようで何よりです!励みになります。

  2. モス より:

    はじめまして。モスと申します。色々調べて、こちらのブログにたどりつき、記事の通りに子テーマに記述してみました。その後、子テーマを有効化してブログを表示したところ、function.php に記述した全文が、タイトル上部に表示されてしまいます。どうすれば改善されるか教えていただけませんか?お手数お掛けして申し訳ありませんが、どうぞ宜しくお願いいたします。

    • Lenny より:

      はじめまして、コメントありがとうございます。

      function.phpに記述した全文がソースとして表示される理由はスクリプトとして実行されていないからだと思います。
      今回記述した内容が、<?php と ?> で囲まれているかどうか確認してみてください。

      • モス より:

        ご指摘いただいた通りでした。
        の間に貼り付けてみたところ問題が解決されました。
        お手数お掛けして申し訳ありませんでした。
        本当にありがとうございました。

トップへ戻る