賢威6.2-WordPressサイト横幅の変更方法|投稿全体やサイドバーの余白を設定しよう | LIVE YOUR LIFE

賢威6.2-WordPressサイト横幅の変更方法|投稿全体やサイドバーの余白を設定しよう

 

 

どうも、RIKUです。

今回は賢威6.2における、WordPressサイトの横幅を調整する方法を解説していきます。

 

賢威6.2では、メインコンテンツとサイドバーの横に余白部分があるのですが、そのスペースが広すぎるということが気になります。

 

賢威7ではサイト全体の横幅が広めに設定されており、そこまで余白部分が気にならないのですが、賢威7はどうも全体的にカスタマイズしづらいんですよね。

ですので、カスタマイズのしやすさを考慮した上で賢威6.2を使っているのですが、先述したスペース部分はやはり気になる。

 

そこで、今回は賢威6.2において実際にサイトの横幅を調節し、自分好みにサイトをカスタマイズする方法をお伝えします。

 

賢威6.2-WordPressサイトの横幅を変更しよう

 

賢威6.2をWordPressサイトにダウンロードした際、サイト全体の横幅を調整することをおすすめします。

というのも、メインコンテンツとサイドバー部分の横にある余白を調整した方が、より見やすいサイトになるのです。

 

実際に比べてみると、

・変更前

 

・変更後

 

このように、PC画面で見た際には、明らかに余白部分が少ない方が見栄えが良いですよね。

 

個人的にサイト訪問者に一番見せたいのは、メインコンテンツ部分つまりは投稿部分に当たります。

ですので、余白を減らしメインコンテンツ部分を大きく見せるためにも、テーマ編集からカスタマイズを施していきましょう。

 

コンテンツ全体&サイドバーの余白の設定方法

 

まずは、WordPressのダッシュボード画面から『外観』→『テーマの編集』を選択しましょう。

 

テーマの編集画面の右側に、『スタイル』という項目があるので、その中から『layout.css』を選びます。

 

次に、layout.cssを上から見ていくと、『1カラム』『2カラム』『3カラム』という項目があるので、その中から現在あなたが使っているカラム部分を見るようにしましょう。

 

ちなみに、メインコンテンツを目立たせたいという部分からも、当サイトでは『2カラム』を使用しているため、該当部分を解説していきます。

3カラムでは少しゴチャゴチャしてしまう印象があるので、おすすめは右サイドバーの2カラムですね。

 

ですので、『2カラムレイアウト』の部分に設定を施していきましょう。

 

変更するのは、『2カラムレイアウト』内の以下の部分になります。

 

解説していくと、

  • width: 950px;・・・サイト全体の横幅
  • sidebar{ width: 29.5%; }・・・サイドバーの横幅
  • main-and-sub{ width: 66.8%; }・・・メインコンテンツの横幅

赤枠部分はこのような意味を表しています。

 

賢威6.2のデフォルトでは上の画像のように表記されていますが、単位がそれぞれ『px』と『%』で異なっているため、少し変更するのが面倒です。

ですので、どちらかの単位に変更し、サイトの横幅を調節していきましょう。

 

今回は、『px』の単位で統一しました。

 

当サイトではこのように設定しているのですが、どのように反映されるのか解説していきますね。

 

まず、サイト全体の横幅は1200pxまで変更することができるので、お好みで変更していきましょう。

ある程度の余白は必要ですので、ここでは1150pxに設定しています。

 

そして、次にサイドバーとメインコンテンツの横幅を変更していくのですが、ここで注意すべき点があります。

それは、『2つのpx値の合計が、サイト全体のpx値より小さくなるようにする』ということ。

 

どういうことかというと、もしサイドバーとメインコンテンツのpx値の合計を1150pxにしてしまうと、投稿部分とサイドバーがぴったりくっついた状態になってしまいます。

それでは、逆にサイトの見栄えが悪くなってしまうので、少しの余裕は持たせるようにしましょう。

 

当サイトでは、『300(サイドバー)+800(投稿)=1100px』ですので、投稿部分とサイドバーの余白は『50px』に設定しています。

 

値を変えることで自由に余白を調整することができるので、お好みで設定してみてくださいね。

 

最後に

 

以上、賢威6.2WordPressサイトの横幅を調整する方法を解説しました。

うまく余白部分を調整することができましたでしょうか?

 

賢威はCSSなどのソースページが分かりやすく表示されているので、サイトのどこをカスタマイズしているのかが一目でわかります。

ですので、サイトに愛着を持ってどんどんカスタマイズしていきましょう。

 

メインコンテンツとサイドバー部分の横幅を調整することで、サムネイル付き新着記事人気記事ランキングなど、サイドバーに掲載するサムネイルのサイズを調節することなどもできます。

また、サイトの見栄えを良くすることはユーザビリティの向上にもつながりますので、ぜひとも積極的に見やすいサイトを作っていきましょうね。

 

MAIL MAGAZINE

 

 

     
公開日:2016/11/29 更新日:2016/11/30

コメントを残す

サブコンテンツ

TO THE TOP