左右に余白を作って、ブログのコンテンツを中央に表示する。

ブログデザイン

ブログとかのコンテンツって、画面いっぱいに表示されても見辛いよね。

どうも、taigaです。

前回、サイドバーを消し飛ばしたんですけど、それによって以下のようにコンテンツが全画面で表示されるようになってしまいました。

これだと、

  • 視点の移動が多くて疲れる。
  • パッと見の見栄えが悪い。

などの問題があります。

この対処法として、”両サイドに余白を作ってコンテンツを中央に表示する“のが手っ取り早いと思ったので、今日はその方向でカスタマイズをしていきます。

前回同様、今回も自分でコードを打ち込みますが、超簡単なので気楽にお付き合いください。

手順①カスタマイズを選択する。

まず、ダッシュボードを開いて「外観」から「カスタマイズ」を選択します。

手順②追加CSSを選択する。

カスタマイズ画面のメニューバーで、一番下の「追加CSS」を選択します。

手順③コードを打ち込む。

追加CSSを開くとこのような画面になりますので、ここに実際のコードを打ち込んでいきます。

打ち込むコードは、以下のコードをコピペすれば大丈夫です。

.no-sidebar .content .main {
margin: 0 auto;
width: 60%;
}

これを入力すると、表示を中央に圧縮することができます。

途中経過を確認してみる。

一見すると良さそうに見えます

ですがこの状態だと一つ問題があって、試しにスマホで確認をしてみると

このように、スマホ画面でも両サイドに余白が作られて表示されてしまいます

スマホは画面が小さいので、元の全画面表示の方が見やすいと思います。

なので今回のコードは、パソコンなどの大きい画面で開いた時のみ適応したいですよね。

ということで、先ほどのコードにそのような条件設定をします。

手順④コードに条件設定をする。

条件設定と言ってもやることは簡単で、先ほどのコードに赤字のコードを追加するだけです。

@media(min-width:780px){
.no-sidebar .content .main {
margin: 0 auto;
width: 60%;
}
}

赤字で追加した部分は、「画面サイズが780px以上の時に、中のコードを実行する」という意味になります。

780pxというと、モノによりますが一般的なタブレットを横画面にした時がそれくらいです。

なので今回のコードだと、

  • タブレットの横画面以下の画面サイズで表示した時は、画面いっぱいに記事を表示する。
  • タブレットの横画面以上の画面サイズで表示した時は、コンテンツを中央に寄せて表示する。

ことになります。

完成。

確認をしてみると、スマホでは無事全画面表示になっておりました

やっぱりスマホなどの小さい画面では、全画面に情報が表示される方が見やすいですね。

終わりに。

ということで、今日は左右に余白を作ってコンテンツを真ん中に寄せる方法についての記事でした。

ちょっとだけ詳しい話をすると、余白を作っているわけではなくてコンテンツの表示スペースを画面の60%に指定しているだけなのですが、得られる結果的には同じなので気にしないことにします。

これで見やすいブログデザインになったかなと思いますので、しばらくは大きなデザイン変更はせずにやって行こうかなと思います。

 

以上!

コメント

タイトルとURLをコピーしました