WPの場合、自由度が高いのでいろいろできるわけですが、逆にいろいろできるのではまったり、うまくいかなかったりすると思います。
まずは、実際にやってみましょう
標準状態から以下の４点ぐらいをやるとこのような感じになります。
ヘッダー部分のカスタマイズ
※テーマーのstyle.cssの一番後ろに追加してください■ タイトルの背景画像を設定する
.site {
background-image:url(画像のURL);
background-repeat: no-repeat;
}
■ タイトル文字を画像に置き換える
.site-description {display:none;}
.site-title a {
height: 0px;
display: block;
overflow: hidden;
width: 300px; /*画像の横幅*/
padding-top: 78px; /*画像の縦幅*/
background: url(画像のURL) no-repeat left top;
}
・ブログタイトルを画像化する方法 【Twenty Twelve,Twenty Eleven対応】
■ ナビゲーション（メニュー）に背景色を付ける
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
border-bottom: 0px;
border-top: 0:px;
background: #222; /*背景色*/
}
.main-navigation ul {
margin: 0;
padding-left: 14px;
padding-left: 1rem;
}
.main-navigation li a {
color: #eee; /*文字の色*/
}
記事タイトルの装飾
※テーマーのstyle.cssの一番後ろに追加してください.entry-header .entry-title {
color: #141414; /* テキストの色 */
font-size:150%; /* フォントの大きさ */
font-weight:bold; /* 太字 */
line-height: 1.5em; /* 行間 */
border-bottom:1px solid #008ee1; /* 下線 */
border-left:10px solid #008ee1; /* 左側の線 */
margin: 50px 0 10px 0; /* 上下の余白 */
padding:3px 10px 1px 10px; /* テキストとボーダーの間の余白 */
}
ソーシャルボタンの追加
※テーマのfunctions.phpに追加します。if(is_single()){
print <<< EOF
ここに「忍者おまとめボタン」で取得したスクリプトを貼る
EOF;
}
//これより上をコピペ
printf(
$utility_text,
$categories_list,
$tag_list,
$date,
$author
);
function twentytwelve_entry_meta()を探してください。
その下の方に printfと書かれているものがあるかと思います。その上に上記のコードをコピペしてください。
忍者おまとめボタン
http://www.ninja.co.jp/omatome/
（ここに「忍者おまとめボタン」で取得したスクリプトを貼る）部分に上記サービスで取得したタグを貼り付けてください。
ブログサービスには「その他のブログ」を選択したタグにしてください。
カスタマイズのやり方について
1.アドセンス広告を入れたい場合が多いと思うので、最初に入れたい位置に「広告サイズと同じ大きさの画像」を配置する2.まずは骨格のみをさわるとよい
3.CSSの試行錯誤は、サイドバーのウィジェットのテキストを使うとよい
4.できる限りCSSで対応して、テンプレートを直接書き換えない方向で…
アドセンス（300x250）と同じ大きさの画像
<img border="0" src="https://1.bp.blogspot.com/-YRRMdw30wm4/VeHPdm9MsXI/AAAAAAAAZ5A/EqMpPebKCqg/s1600/300x250.png" />
作るの面倒な人用に用意しました。
このままコピペすれば、300x250の画像が表示されます
アドセンス広告
1.サイドバーに、広告と同じサイズの画像を配置ウィジェットにテキストを追加して、その中にimgタグの画像を配置
2.記事下に、広告と同じサイズの画像を配置
直接テンプレートをこの時点で触ると混乱の元なので、プラグインを使用して挿入する
Quick Adsense
http://wordpress.org/plugins/quick-adsense/
アドセンスコードを設定するところに、imgタグで画像を配置すればOK
骨格のみを触る
・TwentyTwelveのレイアウト構造 ｜ウェブシュフ上記の図がなかなか良いかと思います。
CSSの試行錯誤は、サイドバーのウィジェットのテキストを使うとよい
<style>
.site-header {
border: 1px solid #ff0000;
}
</style>
サイドバーのウィジェットの中にCSSをかいて、どう変わるかを見てみるのが意外とお手軽でやり直しもしやすいと思います。
id="名前" -＞ ＃名前
class"名前" -＞ .名前
divなどがどの範囲かわかりにくい場合は、上記のように実際に外枠を表示してみればよくわかるかと思います。
上記の場合だと、site-headerと名前の付いたdiv枠がどの範囲かが赤線枠でわかります。
上記以外のカスタマイズ
・Twenty Twelveのサイドバーの幅を広げる方法・wp-pagenaviの導入方法 【Twenty Twelve,Twenty Eleven対応】
・【WordPress】PCとスマートフォンでアドセンスのサイズを切り替える方法
「コメントをどうぞ」を消す
.comments-link {
display: none;
}
style.cssに上記を追加
スポンサーリンク
コメントを残す