ワードプレステーマSelaの横幅レイアウトをカスタマイズしたので自分メモ

2017年8月7日

当サイトはワードプレスの無料テーマ「Sela」を使って作成しています。他にあまり使っている人がいないのか、ググッてもカスタマイズ情報が見つかりません。初心者なので苦労しながらちょこちょこいじっています(笑)

使い始めの頃から、横幅のレイアウトに不満がありました・・・。悩みに悩んで選んだテーマだから使い続けたい意地がある。見て見ぬふりをしてきましたが、もう限界だ!!

色々いじって変更したので、忘れないための自分メモです。


 

まずはページを検証して各要素の幅を調べてみた

OSはWindows10、ブラウザはChromeを使用しています。

ページを右クリックして「検証」を選択すると、ページの要素を見ることができます。この機能を利用して、横幅が何pxなのかを調べました。

  • サイト全体・・・1180px
  • サイドバー・・・250px
  • 固定ページの左の余白・・・201px、記事部分620px
  • 投稿ページ・・・横幅765px、左の余白146px、記事部分620px

私がやりたいのは、1.サイドバーを広げたい。2.固定ページ/投稿ページの左の余白を詰めたい。このふたつ。

単に幅を広げるだけなら、スタイルシートで該当箇所を探して書き換えるだけ。でも、それだとレイアウトが崩れる可能性があるので、微調整が必要になります。

カスタマイズ実験用の非公開サイトで最適サイズを検証

実は、カスタマイズの実験用に、サブドメインで非公開サイトを別に作っています。そちらで試行錯誤の結果、横幅は以下のように変更することに決めました。(数字の根拠は割愛)

  • サイト全体・・・1200px
  • サイドバー・・・302px
  • 固定ページの左の余白・・・60px、記事部分728px
  • 投稿ページ・・・横幅750px、左右の余白10px

子テーマのスタイルシートを上記の数字に書き換えていきます。

☞子テーマの作り方はこちら

ところで、当サイトで使っていない機能がふたつあります。

それは、アイキャッチ画像と日付の表示。どちらもあまりレイアウトが好きじゃないんです・・・。

アイキャッチと日付を設定するとこんな感じ。

このように左側に突き出て表示される設定になっているために、左側に変な余白があるんですよね。

アイキャッチと日付の表示箇所を変更できないか色々調べたこともあるのですが、結局断念。アイキャッチの代わりに記事上に画像を挿入し、日付も本文中に直接書き込んでいます。

(※正確に言うと、アイキャッチはサムネイルの都合で設定はしています。子テーマのcontent.phpの「<?php sela_post_thumbnail(); ?>」という部分をコメントアウトし、非表示ににしています。

また、日付は、設定→一般→日付のフォーマットでカスタムを選択し、空白にすることで非表示にしています。)追加CSSに一行書き加えて非表示にしています。

.entry-meta .date{display:none;}

他のテーマは分かりませんが、Selaの場合、上記のように書くと、entry-metaの日付部分のみ非表示にできます。

☞追加CSSについてはこちら

なので、今回のカスタマイズは、Selaでアイキャッチを使わない、日付を表示しないことが前提となります。

もし今回のカスタマイズとアイキャッチ、日付の表示を併用しようとすると、レイアウトが崩れてしまうためです。

アイキャッチを指定しないとサムネイルに意図しない画像があてられたりしますが、私はサムネイルよりも全体の見た目を優先したいので致し方なし・・・。

子テーマのスタイルシートの数字を書き換える

【❕】変更を加える前に必ずバックアップを取るか、スタイルシートの記述を全てメモ帳などにコピペします。

外観→テーマの編集→スタイルシート(style.css)を開きます。Ctrl+Fを押して検索バーを立ち上げ、最初に調べた横幅のpx数を入力して該当箇所を探します。

サイト全体の横幅を変更(1180px→1200px)

1180pxを検索すると3か所ヒットします。すべて1200pxに変更。

サイドバーの横幅を変更(250ox→302px)

250pxを検索すると1か所ヒットします。/* Sidebar */部分であることを確認のうえ、302pxに変更。

固定ページ(デフォルトテンプレート)の左の余白を変更(201px→60px)

201pxを検索すると2か所ヒットします。/* Default Page Template */部分を60pxに変更。

※Selaで固定ページを作る際、ページのテンプレートは4つあります。当サイトの固定絵ページは「デフォルトテンプレート」を使用しているため、上記の部分を変更します。

4つのテンプレートのざっくりとした違いは以下のとおり。

  • 「デフォルトテンプレート」・・・サイドバーが表示される
  • 「グリッドページ」・・・サイドバーは非表示だが、ページの幅はサイドバーがあるときと同じ
  • 「フロントページ」・・・トップページ用の全幅ページで、サイドバーは非表示、フロントページウィジェットがページ下に表示される
  • 「全幅ページ」・・・ページが全幅表示で、サイドバーは非表示

もう1か所の201pxの記述がある「.content-wrapper .hentry:after」部分については、変更を加えなくても今のところ問題ないので保留です。

固定ページの記事部分の幅を変更(620px→730px)

620pxを検索すると1か所ヒットするので、730pxに変更。

投稿ページの横幅の変更(765px→750px)

765pxを検索すると1か所ヒットするので、750pxに変更。

投稿ページの左右の余白を変更(左146px→左右10px)

146pxを検索すると4か所ヒットします。

/* Content */
.entry-body {
margin-top: 1.5em;
padding: 0 0 0 146px;
}

まず、/* Content */という箇所のpaddingという部分を書き換えます。4つ数字が並んでいるのは、上、右、下、左の余白の数値を表しています。

もしこの数字が2つ並んでいる場合は、上下、左右の余白を指定することになります。今回、左右の余白を10pxにしたいので、「padding: 0 10px」と書き換えます。

全体では以下のようになります。

/* Content */
.entry-body {
margin-top: 1.5em;
padding: 0 10px;
}

残り3か所の146pxを全て10pxに変更します。具体的には以下の記述の部分です。

.post-navigation,
.paging-navigation,
.comments-area {
margin-left: 146px;
}
.blog .without-featured-image > .entry-header,
.single .without-featured-image > .entry-header,
.archive .without-featured-image > .entry-header,
.search .without-featured-image > .entry-header {
		margin-left: 146px;
	}
.archive .page-header,
.search .page-header {
margin: 0 0 3em 146px;
}

ここまで入力したら、ファイルを更新をクリック。スタイルシートの変更はこれで完了です。

無事に変更できたかを確認

変更前の投稿ページのキャプチャがこちら。

 

変更後がこちら。無事に左の余白が無くなり、サイドバーも広くなりました♪大変だった・・・。


あとは、幅を広くした分、文字のサイズなどのバランスが悪くなったので、追々調整していこうと思います。

Selaはレスポンシブ対応。スマホの設定はいじらなくてOK

テーマSelaは、画面サイズによって自動的に表示を切り替えるレスポンシブに対応しています。

今回のカスタマイズはあくまでパソコン(大きい画面)でサイトを閲覧した場合のカスタマイズで、モバイルで見た場合の設定は別にあり、いじっていません。

スマホやタブレットで見た場合の見え方は今までと変わらないことを手持ちの機器で確認したので、とりあえず一安心です。

あなたのシェアが励みになります!