ワードプレス初心者【コピペで簡単!】記事とサイドバーとの間隔を変更する


この記事は、私がワードプレス【Lightning】でサイトを作成するにあたり、わからなかったこと・調べたこと・変更したことなどを、備忘録として残しています。

私と同じようなワードプレス初心者のみなさまに、少しでも参考になりましたら幸いです。

記事とサイドバーとの間隔を変更したい!

記事とサイドバーとの間隔とは、「メインカラムとサイドカラムとの間隔」のことです。

初心者でも簡単!

初心者

ムズカシそうだけれど、初心者でもできるのかな・・・?

725

大丈夫!簡単です。
【追加CSS】に下記コードをコピペするだけで変更できます。

公開までの流れ

  1. ダッシュボードを開く
  2. 「外観」から「追加CSS」をクリック
  3. 下記コードをコピペ → 公開をクリック

たったこれだけ(*^_^*) 早速やってみましょう。

追加CSS欄に何かコードか入っている場合は、先にメモ帳などにデータをコピーし、失敗しても元のデザインに復元できるよう必ず対策をしてから、ご自身の責任で行ってください。

早速やってみましょう! 操作手順は①~⑤

①ダッシュボードを開く

②外観 → 追加CSSを選ぶ

③編集画面が出る

④下記コードをコピペする

下記をコピペし、赤色部分の数字を変えると間隔が変更できます。
ご参考までに、このサイトの間隔は【3em】です。

@media (min-width: 992px) {
.mainSection-col-two {
width: 66.6667%;
}

/*記事とサイドバーとの間隔*/
.sideSection-col-two {
width: calc(33.3333% – 3em);
}
}

⑤貼り付けて、公開する

サイトの見やすさ・印象が変わる

ここを少し変えるだけで、見やすさ・印象が大きく変わります。

サイドバーの幅も変わる

サイト全体の横幅は変わりませんので、カラムとカラムの間隔を変えると、サイドバーの横幅も変わります。お好みで調整してください。

間隔が変わらない場合

公開して確認してみると、間隔が変わっていない場合があります。その際は

  • ブラウザの更新ボタンを押してみる
  • 編集画面で、数字だけ何回か変更していると変わらない場合があるので、再度、全コードをコピペし直してみる。


私の場合は、上記で解決できましたので、同様にお困りの場合は一度やってみてください。

まとめ

コピペ→貼り付け→実行するだけなので、初心者でも簡単にできますよ(*^_^*)
よかったらチャレンジしてみてくださいね。


725

追加CSS欄に何かコードか入っている場合は、先にメモ帳などにデータをコピーし、失敗しても元のデザインに復元できるよう必ず対策をしてから、ご自身の責任で行ってくださいね。

ファシアルウォーキングについてはこちら

ファシアルとは

FasciarWalking.
ってどんなもの?

こんな方におススメ

そのお悩み
諦めていませんか?

よくあるご質問

お問い合わせの前に
お読みください