WordPress【Simplicity2】Widthを広げる方法【横幅拡張】

  • このエントリーをはてなブックマークに追加


WordPressでブログを運営するなら、有料のテンプレートを使った方がカスタマイズは簡単に行える。
けれども、自分の力でブログを作り上げていく感動があってもいいよね。

今回は、Simplicity2で本文の横幅を少し広めてみる作業を行ったので記録に残しておきます。

【自分が忘れないための忘備録】になります。

ブログの目的によって、使うテンプレートは変えているけれど

やはり、一番使っていて楽しいのはSimplicity2です!

Simplicity
内部SEO施策済みのシンプルな無料Wordpressテーマを公開しています。初心者でも出来る限り分かりやすく使えるように作成しました。

元々のスタイルがシンプルだからこそ、自分でカスタマイズが可能になる。

なおかつ、リンク先のコメントやトピックスを見ればわかるが
管理者である、わいひらさんの対応がスゴイ。

無礼者にも対応しているし、できた人だなぁと実感させられる。

それがあるからこそ、自分でHTMLやCSSを変更してバグっても

わいひらさんが教えてくれるはずだからチャレンジできる!
(自分でしっかり調べてから改変は行いましょう)

スポンサーリンク
レフタリング大

Widthを1170pxに変更(%にしなかった理由)

今回は、本文部分の横幅を規定値の1070pxから1170pxへ変更しました。
変更した理由は、今までのブログ本文が「自分で読みにくかった」からです。

文章の書き方を変えながら、色々なスタイルで記事を作成しています。

そうすると、本文部分が狭いと読みにくくなってしまうんですよね。

なおかつ、サイドバーもソコソコ広いです。
本文1070PXなのにサイドバーが300PXもあります。

なんか、視界にチラチラ入ってきて本文に集中できなくなってきていたんです。

変更の際に「%」表記にしなかった理由

はじめは、元のサイズの10%増しなら大丈夫とイメージしていたので「元の110%」で指定していくつもりでした。

その方が後から変更も楽だろうと考えたのです。

しかし!
先ほどの、わいひらさんのコメントを見つけてしまったのです。

「幅の%指定はやめたほうがいいと思います。
あまりスタイルシートの変更になれていないのであれば、カラム幅の変更は難易度が上がるのでやめておいたほうがいいかもしれません。」

引用:メインカラムの幅のカスタマイズについて
https://wp-simplicity.com/suport/topic/%E5%B9%85%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/
 

「難易度が上がるので」「難易度があがるので」「なんいどがあがるので」

はい。この一言で十分です。

なぜに高難易度に自ら飛び込む必要があるのでしょうか!

簡単な手法で、後からリカバリーも行いやすい手法で行う事を決意しました。

CSSに書き込むだけの簡単作業

今回は、コピペでも後々使えるようにシンプルに簡単な方法で行います。

1、コピペで完結できる

2、コピペする場所は最低限(PC用とモバイル用)

3、後から見ても理解できるようにする

CSSを設定する際に気を付ける事は

一番最初にバックアップを取りましょう!

失敗しても復元できるようにしましょう!

直前のバックアップを取っていれば何とかなります。

簡単なバックアップはプラグインで行う手法もありますし、手動で行う形でも問題ありません。

今回は、手動で行いました。

バックアップの簡単な取り方はコチラ

WordPressのバックアップは細目にする!自動化と手動の方法【Xサーバー編】
WordPressのバックアップは細目にする!自動化と手動の方法【Xサーバー編】
皆さんバックアップ取ってますか? WordPressを使ってブログを更新している方なら取っているはず。万が一ブログが消失してし...

コピペ用に作っておけばチェックが簡単

コピペできる状態にしておくことで、直に書き込む際に発生するフューマンエラーを撲滅します。

1文字の書き間違いが命取りですので、書き込む手間を減らしています。

ブログの横幅を広くするCSS(コピペ用)

メインカラム(記事の本文の所)を変更するのに使用した記述はこちらです。

2つのスタイルシートへ書き込みを行いましたので順番に解説していきます。

親テーマのCSSを、子テーマで上書きして使用しています。

ですので、子テーマのCSSを変更していきます。

1、メインカラムの変更

まずは「 外観 」から「 テーマの編集 」を選択し、子テーマの編集を行います。

DLした状態で名前を変更せずに使用しているなら「 Simplicity2 child 」となっているはずです。

選択が終われば、編集する項目の選択になります。

右側に出ている項目の中から「 スタイルシート (style.css)」をセンタします。

すると、中央の表示がスタイルシートの中身に変更され表示されますので、コレを編集していきます。

コピペ1発で変更するCSS

/* Simplicity子テーマ用のスタイルを書く */
#header-in, #navi-in, #body-in, #footer-in{
 width: 1170px;
}
#main {
 width: 840px;
}

これを追記するだけで、全体の横幅を1170pxへ変更し、メインカラムの広さを840pxへ拡張します。

あまり大きくしすぎると、サイドバーがずれたりしますので、ブログの横幅がちょうどよく収まる幅にしています。

もしも、広くなりすぎるようならサイズを減らして調節します。

2、変更が適用されているか確認する

CSSを変更すると、即時適用されます。

更新をかけてもブログ表示が依然と変わらないようであれば、ブラウザのキャッシュが残っていて以前の状態を表示しています。

最新の状態へ変更するために、ブラウザに保存されているキャッシュを削除していきます。

もしくは、普段使用しないブラウザで表示の確認を行います。

3、モバイル表示がずれるので調整する

CSSを大幅に変更したときには、スマホの表示を確認することが必須になります。

ブログへの検索流入にはスマホなどの携帯端末からのアクセスが多いはずです。

自分の端末でも表示がズレていないかの確認を行いましょう。

モバイル用CSSでは、パソコン用で打ち込んだCSSを打ち消す効果を作ります。

下手に調整するのではなく「auto」で自動調整させてあげればいいんです。

記入するのは「 mobile.css 」になります。

コピペ1発で変更するCSS

/*ここにモバイルのスタイルを書く*/
#header-in, #navi-in, #body-in, #footer-in{
 width: auto;
}
#main {
 width: auto;
}

4、最後にパソコンとスマホで表示をチェック

最後に、パソコンとスマホからで表示にズレが無いか確認して終了になります。

先ほどの確認の時と同様に、キャッシュが残っている場合には、キャッシュを削除してから確認を行います。

これで表示がズレていなければ完成です。


少しの表示の違いで、印象がガラっと変わるケースは良くあります。

今まで「見にくい」と感じていたサイトも、余裕を持った作りになると「見やすく」なります。

一番の確認方法は、自分がユーザーとして訪問した時に「このサイトを読むか」「読まないか」この視点で確認します。

自分の好みをブログを作っていくなら、読んでくれる人の見やすさも考えていきましょうね!

スポンサーリンク
レフタリング大
レフタリング大
  • このエントリーをはてなブックマークに追加

フォローする

コメント

  1. きょろ より:

    こんにちは
    あんまりテーマをいじったことがないので
    自分なりのデザインブログができあがりますね
    わたしも挑戦してみようかと思います

  2. akiyo より:

    きょろさん

    こんにちは。
    テーマはこだわればこだわるほどに愛着が持てますからね。
    オリジナルなデザイン目指してがんばってください^^