MesoColumn WordPress WordPressカスタマイズ テーマ

WordPress無料レスポンシブテーマMesoColumnのカスタム

無料レスポンシブWebデザインテーマの「MesoColumn」を使って、サイトを作成したときのカスタマイズの記録です。


テーマの特徴などに関しては、『テーマタンク：当サイトおすすめ。満を持して登場の本格派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;
}
マウスを乗せる前の色はTheme Optionsで変更できる

その他

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とします。
  1. サイトタイトルの横
  2. カテゴリーページの下

  4. 個別記事の記事タイトル下
  5. 個別記事の記事下（関連記事の上）

  7. トップメニューの上
  8. フッターの下
ここにアドセンスコードを貼り付けるとうまく表示されません。（a8などのコードはそのまま貼り付けられます。）そこで、ショートコードでアドセンス広告を表示させます。

子テーマfunctions.phpに以下のコード追加します。
function googlead_shortcode() {
$adsensecode = 'ここにアドセンスコードを貼る';
return $adsensecode;
}
add_shortcode('ショートコード名', 'googlead_shortcode');
例えば、ショートコード名をadsenseとしたら、表示させたいところに、[adsense]と入力します。

2箇所以上に設置する場合は、googlead_shortcodeの部分を好きな文字に変更する必要がある。例えば、topバナーの場合、googlead2_shortcodeとし、ショートコード名もadsensetopにする。googlead_shortcodeの部分が1つ目と同じだとエラーで表示されなくなるので注意が必要です。
この場合、表示させたい場所に[adsensetop]と入力します。

せっかくのレスポンシブWebデザインテーマなのでアドセンスもレスポンシブ広告ユニット（ベータ版）を使うことにしました。

WordPressにレスポンシブ広告ユニットの設定
スポンサーリンク
関連記事
スポンサーリンク