初めてのカスタマイズに挑戦。

今回は2ペインで。

コンテンツ幅を広げるために、下記の474px部分適当な数字に変更。

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
max-width: 474px;
}
.post-navigation,
.image-navigation {
max-width: 474px;
}
.archive-header,
.page-header {
max-width: 474px;
}
.contributor-info {
margin: 0 auto;
max-width: 474px;
}
.comments-area {
max-width: 474px;
}
.site-main .mu_register,
.widecolumn > h2,
.widecolumn > form {
max-width: 474px;
}

 

それからコンテンツ部分の右側マージンを5%に変更。

.site-content {
margin-right: 5%;
margin-left: 182px;
}

左側は使うのでそのまま。

 

editor-style.cssも変更します。474pxになっているところを、style.cssで変更した数字に。

とりまここまで。

 

 

web作成初心者なんで、初Masonry

サイト内のjsフォルダに、jquery-2.1.1.min.js  とmasonry.pkgd.min.js そして、masonry呼び出しjsファイルを設置。

ヘッダーにjs読んでくるscriptを書いてと。

スタイルシートに、ボックスのmargin記載すること。

マージン分足した幅をmasonry呼び出しjsファイルに書くと。

ほんとは図にしたいが。。。時間がないので。

WordPressで使うときは、WordPressのデフォルトのjQueryを読み込ませないように、下記をheader.phpに追記。

<?php wp_deregister_script(‘jquery’); ?>