BlogPressにはトップページのメインカラムに
ウィジェットエリアが備わってませんので、
自力で備える方法をお伝えします(笑)
mayu自身（知識が足りないせいで）かなり四苦八苦しまして
お伝えするのは我流の方法になりますが、どうぞご了承下さい(つд⊂)
BlogPressはコンテンツ部分が実は画像の枠で出来てます。
（実はってほどじゃないですが笑）
コレをそのまま活かそうとしたら
ものすごくめんどくさくて途中で嫌になりました┐( ´∀｀)┌
というわけで
mayuのアフィリエイト用ブログで実装しているように
画像の枠を使わない方法をご紹介します(´・ω・｀)
▼こんな感じ（肉球は付かないよ）
まずはウィジェットエリアを追加
トップページにウィジェットを表示させるための必須作業です。管理画面にウィジェットエリアを表示させる作業
ダッシュボード → 外観 → テーマ編集【テーマのための関数（functions.php）】を開きます。
※functions.phpの編集は慎重に！
全角文字入れるだけでもブログが表示されなくなったりします((((；ﾟДﾟ))))ｶﾞｸﾌﾞﾙ
念のため入力文字を「半角」にして挑んで下さい(笑)
【ウィジェットの設定】という箇所があるので、
そこにトップ用のウィジェットエリアを追記します。
以下のハイライト部分が追記箇所です。
// ウィジェットの設定 ------------------------------------------------------------------------------
if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'before_widget' => '<div class="main_widget clearfix %2$s" id="%1$s">'."\n",
'after_widget' => "</div>\n",
'before_title' => '<h3 class="main_headline"><span>',
'after_title' => "<span></h3>\n",
'name' => __('トップメイン', 'tcd-w'),
'id' => 'main_widget'
));
register_sidebar(array(
'before_widget' => '<div class="side_widget clearfix %2$s" id="%1$s">'."\n",
'after_widget' => "</div>\n",
'before_title' => '<h3 class="side_headline"><span>',
'after_title' => "</span></h3>\n",
'name' => __('Side widget', 'tcd-w'),
'id' => 'side_widget'
));
register_sidebar(array(
'before_widget' => '<div class="side_widget clearfix %2$s" id="%1$s">'."\n",
'after_widget' => "</div>\n",
'before_title' => '<h3 class="side_headline"><span>',
'after_title' => "</span></h3>\n",
'name' => __('Side widget2', 'tcd-w'),
'description' => __('Only use in three column layout', 'tcd-w'),
'id' => 'side_widget2'
));
register_sidebar(array(
'before_widget' => '<div class="footer_widget clearfix %2$s" id="%1$s">'."\n",
'after_widget' => "</div>\n",
'before_title' => '<h3 class="footer_headline">',
'after_title' => "</h3>\n",
'name' => __('Footer left area widget', 'tcd-w'),
'id' => 'footer_widget1'
));
register_sidebar(array(
'before_widget' => '<div class="footer_widget clearfix %2$s" id="%1$s">'."\n",
'after_widget' => "</div>\n",
'before_title' => '<h3 class="footer_headline">',
'after_title' => "</h3>\n",
'name' => __('Footer center area widget', 'tcd-w'),
'id' => 'footer_widget2'
));
register_sidebar(array(
'before_widget' => '<div class="footer_widget clearfix %2$s" id="%1$s">'."\n",
'after_widget' => "</div>\n",
'before_title' => '<h3 class="footer_headline">',
'after_title' => "</h3>\n",
'name' => __('Footer right area widget', 'tcd-w'),
'id' => 'footer_widget3'
));
}
ダッシュボード → 外観 → ウィジェット で表示を確認したら
ドラッグ＆ドロップで何か適当に入れておいて下さい( ´∀｀)
次はブログ上に反映させる作業
もう一度、 ダッシュボード → 外観 → テーマ編集
次は【メインインデックスのテンプレート（index.php）】を編集します。
１番上ら辺に、こんな箇所があります。
<div id="main_col_wrap"> <div id="main_col"> <div id="content" class="clearfix">
ここにこちらを追記します。 ※同じところに放り込んで下さいね
<div id="main_col_wrap">
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('main_widget')) : ?><?php endif; ?>
<div id="main_col">
<div id="content" class="clearfix">
見栄えを整える
今の段階ですと、多分こんな感じになってると思います。
何か変に重なってていい感じじゃないですね(´・ω・｀)
というわけでここから、この枠画像を消して新たに枠を作ります。
と言っても、コピペだけで大まかなデザインが実装可能なので
そんなに難しくなく出来ると思います＾＾
ここからのカスタマイズは【スタイルシート(style.css)】を変更します。
CSSの編集はこちらの記事を参考になさって下さい＾＾
→ 【CSS】状態を確認しながら編集する方法
３カラム（両サイドバー）の例
[Ctrl]＋[Ｆ]で【/* layout */】と検索します。こちらに記載している箇所（ハイライト部分）を書き替えて下さい。
▼変更前
#content_wrap { width:980px; margin:50px auto 150px; position:relative; }
#side_col { width:300px; float:right; margin:0; }
#main_col_wrap { position:relative; float:left; width:650px; margin:0; background:url(img/common/content_side.gif) repeat-y left top; }
.page #content_wrap { margin-bottom:50px; }
#main_col { background:url(img/common/content_top.gif) no-repeat left top; }
#content { background:url(img/common/content_bottom.gif) no-repeat left bottom; padding:10px 0; }
▼変更後
#content_wrap { width:980px; margin:50px auto 150px; position:relative; }
#side_col { width:300px; float:right; margin:0; }
#main_col_wrap { position:relative; float:left; width:650px; margin:0; }
.page #content_wrap { margin-bottom:50px; }
#main_col { background:url(img/common/content_top.gif) no-repeat left top; }
#content { padding: 0; }
▼変更前
.three_column1 #main_col_wrap { float: left; width:540px; margin: 0 0 0 220px; background: url(img/common/content_side_3col.gif) repeat-y left top; }
.three_column1 #main_col { background: url(img/common/content_top_3col.gif) no-repeat left top; }
.three_column1 #content { background: url(img/common/content_bottom_3col.gif) no-repeat left bottom; padding: 10px 0; }
.three_column1 #side_col { width: 200px; float: left; margin: 0 0 0 -760px; }
.three_column1 #side_col2 { width: 200px; float: right; margin: 0; }
▼変更後
.three_column1 #main_col_wrap { float: left; width: 540px; margin: 0 0 0 220px; }
.three_column1 #main_col { }
.three_column1 #content {
border: 1px solid #ddd; /* 枠の太さと色 */
margin-bottom: 20px;
background-color: #fff; /* 背景色 */
-webkit-border-radius: 5px; /* 角丸指定： Google Chrome・Safari用 */
-moz-border-radius: 5px; /* 角丸指定： Firefox用 */
border-radius: 5px; /* 角丸指定： 基本 */
}
.three_column1 #side_col { width: 200px; float: left; margin: 0 0 0 -760px; }
.three_column1 #side_col2 { width: 200px; float: right; margin: 0; }
続いて、[Ctrl]＋[Ｆ]で【Widget setting】と検索します。
こちらをまるごと追記して下さい＾＾
/* ウィジェットの枠 */
.main_widget {
margin: 0 0 30px 0;
font-size: 12px;
clear: both;
border: 1px solid #ddd; /* 枠の太さと色 */
background-color: #fff; /* 背景色 */
-webkit-border-radius: 5px; /* 角丸指定： Google Chrome・Safari用 */
-moz-border-radius: 5px; /* 角丸指定： Firefox用 */
border-radius: 5px; /* 角丸指定： 基本 */
box-shadow: 0px 0px 2px 0px #ddd;
}
.main_headline {
font-size: 14px;
color: #333;
line-height: 140%; /* タイトル縦幅 */
background: #fff; /* 背景色 */
padding: 10px 10px;
margin: 0;
-webkit-border-radius: 5px; /* 角丸指定： Google Chrome・Safari用 */
-moz-border-radius: 5px; /* 角丸指定： Firefox用 */
border-radius: 5px; /* 角丸指定： 基本 */
border-bottom: 2px solid #ccc; /* タイトル下ラインの太さと色 */
display:block;
}
.main_widget img {
display: block;
margin: auto;
}
.main_widget .textwidget {
font-size: 12px;
padding: 10px;
line-height: 170%;
}
.main_widget li ul {
margin: 15px 0 0 0;
}
.main_widget li {
line-height: 170%;
margin: 10px;
font-size: 12px;
background: url(img/common/arrow1.png) no-repeat left 0px;
padding:0 0 0 20px;
}
線の色や文字サイズなど、
細かな調整はご自由にお願いします(∩´∀｀)∩
これで改装完了です。お疲れ様でした～！
こんな風になったらバッチシです☆
お助けマンやってます。
mayuが直々に プランカスタマイズサポート を行います。
納得いくまでとことんお付き合いするこってりサービスです！
お陰さまで大変ご好評をいただけておりますので
お困りの際はご相談くださいね。
