テーマの特徴などに関しては、『テーマタンク：当サイトおすすめ。満を持して登場の本格派WP無料テーマ「Mesocolumn」』で非常にわかりやすく解説されているので、そちらを参考にしていただきたい。
カスタマイズポイント
カスタマイズした場所を個別に解説していきます。コードは、特に記載がない限りCustom CSSに追加しています。追加してもスタイルが変わらない場合は、最後に「!important」を追加する。
＜例＞記事中のH2の文字の太さを変えたい場合
.post-content h2 {font-weight: 400 !important;}こうすることで優先順位が変わり、太文字から通常の文字に変わります。400の部分はnormalでも同じです。 ヘッダーを画像に変更
おすすめの画像サイズは、タイトル横に728×90の広告を使用するなら225×90、468×60の広告を使用するなら250～300×60です。これは画面を縮めたときや、スマホで見たときの表示も考慮しています。変更方法は、外観のヘッダーからではなく、ThemeOptionsから変更します。メディアの追加後、Header SettingsのSite LogoにファイルのURLを貼り付けます。
ファビコンは、プラグインを使用して変更しているため、Favourite Iconは使用していませんが、Site Logo同様ファイルのURLを貼り付けるだけで変更できそうです。
ちなみに、プラグインは「Favicon Rotator」を使用しています。
記事タイトル文字サイズ
#post-entry article.post-single h1.post-title, h1.folio{ font-size: 2.5em; }ヘッダー下にライン
#header{ border-bottom: solid 1px #111; }タイトル横のバナー
#topbanner { padding-left: 1px; }サイドバーとメインの横幅を変更
#right-sidebar{ width: 32%; }
.content{ width: 65%; }関連記事の横幅
#post-related .feat-cat-meta { width: 30%; }2個なら47%、3個なら30%がきれいに収まる。
続きを読むを右にする
#post-entry article .post-more a { float: right; }ページナビの文字の大きさ
#post-navigator-single.post-nav-archive { font-size: 1.5em; }モバイルナビの右を消す
#mobile-nav .select-pri.sec{ display:none; }モバイルナビの左を消す
#mobile-nav .select-pri{ display:none; }引用の文字
blockquote{font-size:1em;font-family:serif;}トップナビ マウスオーバー
#top-navigation .sf-menu li a:hover{
background-color:#ddd;
color:#444;
}
その他
aside.home-feat-cat .feat-title a{ /* ホーム記事タイトル */ }
img.home-feat-rss { /* ホームRSS */ }
aside.home-feat-cat .feat-meta { /* ホーム日付など */ }
aside.home-feat-cat .feat-content { /* ホーム記事抜粋 */ }
aside.home-feat-cat .apost .feat-content { /* ホーム記事抜粋2個目以降 */ }
.entry-date{ /* 個別記事の日付 */ }
サンプル
追記：現在サンプルサイトはありません。
試しに作ったサイトがあるので、時間があれば見てみてください。
PCでは、サイドバーの新着記事一覧の下あたり、スマホでは記事下の人気記事の下あたりにリンクがあります。
デフォルトのデモとは大分違いますが、上のカスタマイズで変更できる部分を変更しています。
広告の設置
MesoColumnにはオプションで広告を表示する機能があります。Advertisement Settingsに8箇所コードを入力できます。上から順に1～8とします。- サイトタイトルの横
- カテゴリーページの下
- 個別記事の記事タイトル下
- 個別記事の記事下（関連記事の上）
- トップメニューの上
- フッターの下
子テーマfunctions.phpに以下のコード追加します。
function googlead_shortcode() {
$adsensecode = 'ここにアドセンスコードを貼る';
return $adsensecode;
}
add_shortcode('ショートコード名', 'googlead_shortcode');
2箇所以上に設置する場合は、googlead_shortcodeの部分を好きな文字に変更する必要がある。例えば、topバナーの場合、googlead2_shortcodeとし、ショートコード名もadsensetopにする。googlead_shortcodeの部分が1つ目と同じだとエラーで表示されなくなるので注意が必要です。
この場合、表示させたい場所に[adsensetop]と入力します。
せっかくのレスポンシブWebデザインテーマなのでアドセンスもレスポンシブ広告ユニット（ベータ版）を使うことにしました。
WordPressにレスポンシブ広告ユニットの設定
スポンサーリンク
