WordPress

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


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

 

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

 

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

 

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

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

https://wp-simplicity.com/

 

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

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

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

 

それがあるからこそ、自分で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を使ってブログを更新している方なら取っているはず。万が一ブログが消失し...

 

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

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

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位 エックスサーバー
『エックスサーバー』
高い安定性と、充実の多機能性でブログ運営に活用している人も多いレンタルサーバーです。
高速サーバーなので表示速度も速く、万が一のバックアップ体制も万全ですよ。
評価
月額 月900/1800/3600円(初期費用3000円)
容量 200GB/300GB/400GB
SSL 無料独自SSLあり

エックスサーバーの公式サイトを確認

ランキング2位 ロリポップ!
『ロリポップ!』
金額を抑えて、容量も小さめでOKなら断然ロリポップ!
月額ワンコインで行けちゃうお手軽さなら1番です。
※月100円のエコノミープランはWordPress不可なので注意
評価
月額 月100/250/500/2000
容量 10GB/50GB/120GB/400GB
SSL 500円

ロリポップ!の公式サイトを確認

ランキング3位  wpX
『wpX』
WordPressを高速表示可能な特化サーバーです。クラウドプランとレンタルサーバープラン2種類あるのも頼もしい所ですね。
評価
月額 クラウド500円~5万円/レンタルサーバー1000円~
容量 クラウド10GB~250GB/レンタルサーバー30GB
SSL 無料独自SSLあり

wpXの公式サイトを確認