[対応：5]コンテンツとコンテンツの幅を縮める方法

賢威はサイトを見やすくするために、極力幅を広く取っています。
ある程度密集サイトを作る場合に、スカスカに見えてしまうので、
コンテンツの幅を縮める方法を説明します。

コンテンツとコンテンツの幅を縮める方法

賢威の中央の記事部分は<div class="contents">で
コンテンツを制御されています。

このコンテンツの幅を変更する事で
次のコンテンツまでの幅を調整出来ます。

まず説明の前に、下記をご覧ください

こちらは、
DIVボックスのコンテンツの関係です。
まずはこちらを覚えておいてください＾＾

 

次に賢威を見て見ます。

賢威ではこのように表されています。
margin-bottomとpaddingを変更する事で幅や高さを調整出来ます。

WordPressダッショボード⇒外観⇒テーマ編集をクリックします。
cool-whiteg○.cssをクリックします。

中央の

/*——————————————————–
メインコンテンツ（本文）
——————————————————–*/

よりさらに下にある/*●コンテンツ*/を探しましょう。

/*●コンテンツ*/
#main-contents .contents{
   margin-bottom: 20px;
   padding: 20px;
    background-color: #fff;
    border: 1px solid #666;
    color: #333;
}

上の図を参考に、
まずはmargin-bottom: ○pxを変更します。

次に、padding: 20px;を設定します。

ここで注意ですが、
padding:20PXは、縦横全て20px空けるように設定されています。

まずはこれを変更します。

padding: 20px 20px 20px 20px;

まずはこのように変更します。
padding:↑px →px ↓px ←px;
を表します。

/*●コンテンツ*/
#main-contents .contents{
   margin-bottom: 5px;
   padding: 20px 20px 5px 20px;
    background-color: #fff;
    border: 1px solid #666;
    color: #333;
}

このように変更します。
これで無事に幅や高さを縮まっています。

最新情報以外にも全てのコンテンツに適用されます。
個別に変更したい場合は、

#main-contents .contents2などを作成して、
テーマ編集に直接書き込んで変更する事が可能です。

以上
コンテンツとコンテンツの幅を縮める方法でした