パソコン初心者日記

テンプレートTwenty Twelveの幅を変更する

wordpress2横幅全体を変更させることが出来ます。

色々は変更が出来るので信頼出来るテンプレートが大切です。

Word pressのテーマで私はTwenty Twelveを使っていますが、、サイドバーにアドセンス広告を貼りたいので横幅を変更しました。
また子テーマのスタイルシートに足していきサイトデザインを変更して行きます。

このTwenty Twelveはまず全体の幅を決めます。
記事内が640pxでサイドバーが300pxなので記事内とサイドバーとの間を20pxとして960pxにしました。
全体の幅が960pxで決まったら、後は記事内とサイドバーの幅と変更して行くのですが、全体の幅だけがpxが使われますが、記事内とサイドバーは数字で入力しないといけません。

これがサイトの全体像ですがこの横幅を変更していきます。

このヘッダー部分の横幅が全体の幅で960pxで本文とある所が640pxでリンクメニューとある所が300pxです。

私のサイトはこんな感じになっていますが、リンクメニューと書いてある部分が左部分にあるサイトや両側にあるサイトとあると思いますが、私のサイトはこんな感じになっています。

企業サイトなどはフッダーがある場合があります。

フッダーとはヘッダーの逆で下の部分に横幅一杯を使ったものです。

スポンサードリンク
スポンサードリンク

サイトの幅の変更

計算方法ですが、記事内の本文が640pxでサイドバー(リンクメニュー)が300pxで本文とリンクメニューとの間が20pxです。

まずサイト全体の幅を決めますが私は960pxなのでそれを基本にして計算していきます。

◆ 640px ÷ 960px × 100 = 66.66666666%

◆ 300px ÷ 960px × 100 = 31.25000000%

となり小数点以下は8ケタになり後は切り捨てか0を加えていきます。

@media screen and (min-width: 640px) {
.site {max-width: 960px;}
.widget-area {width: 31.25000000%;}
.site-content {width: 66.66666666%;}
}

私のスタイルシートはこのようになっていますが、この記載方法をスタイルシートの子テーマにペーストしますが、計算の方法がわかれば自分なりのサイトのデザインが出来ると思います。

サイドバー(リンクメニュー)に広告を載せる為に広げただけでそれでなければ広げる必要もなかったのですが、サイドバーの幅の変更と共にコンテンツ(本文)記事内の部分も変更しました。

この方法で別サイトも変更しています。

このテンプレート以外にも使用頻度が高いものは検索してもヒットする可能性がありますが、見た感じでどのテーマを使っているのかわかりません。

検索も1ページに留まらず2ページ3ページと見るのが良いですよ。

サイトのデザイン変更も必ずしも上位に表示されているとは限りません。

モバイルバージョンを終了