The World メインバナースペース カスタマイズ

WordPressテンプレートの使い方とカスタマイズ

【The Worldテンプレート】メインバナースペース部分のカスタマイズ

読了までの目安時間:約 5分

 


The World

The Worldテンプレートのメインバナースペース部分のカスタマイズ方法を解説します。

 

 

まずは、これから変更する「メインバナースペース」とはどの部分を指しているのかを画像でお見せしていきます。

 

 

メインバナースペースとは

メインバナースペースは、メインバナーが存在している部分のサイドのところを意味しています。

 

バナースペース

 

 

 

例えば、バナースペースの色を変更すると…

 

バナースペース

 

わかりやすくするために、派手な色を使ってみました。

 

 

また、メインバナースペースの周りのボーダー部分の色も変えられます。

 

 

バナースペース

 

 

 

これは色を赤っぽくしてみました。これだけだとわかりにくいので、ボーダーの太さをふとくしてみましょう。

 

 

ボーダーの太さ

 

 

 

では、これらのカスタマイズはどのようにやれば良いかを以下に解説していきます。

 

 

カスタマイズ方法

まずはメインバナースペースの色の変更方法からです。

 

 

バナースペースの色変更

 

外観⇒テーマ編集⇒style.css

 

 

以下の赤文字部分を変更します。

 

 

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* メインバナー設定 */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#banner_frame{
background: #fafafa url(img/imb_back.png) top repeat-x;
margin: 10px 0 0;
padding: 0 5px 5px;
}
#banner_space {
width: 950px;
margin: 0 auto 5px;
padding: 10px;
background: #eee ;
border: 1px #FFF solid;
box-shadow: 0 0 2px #999,
0 0 2px #FFF;
-webkit-box-shadow: 0 0 2px #999,
0 0 2px #FFF;
}

 

 

バナースペースのボーダー色と太さ変更

外観⇒テーマ編集⇒style.css

 

 

  • 赤文字部分:ボーダーの色
  • 青文字部分:ボーダーの太さ

 

 

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* メインバナー設定 */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#banner_frame{
background: #fafafa url(img/imb_back.png) top repeat-x;
margin: 10px 0 0;
padding: 0 5px 5px;
}
#banner_space {
width: 950px;
margin: 0 auto 5px;
padding: 10px;
background: #fff ;
border: 1px #FFF solid;
box-shadow: 0 0 2px #999,
0 0 2px #FFF;
-webkit-box-shadow: 0 0 2px #999,
0 0 2px #FFF;
}

 

 

 

The World   コメント:0

この記事に関連する記事一覧

comment closed

トラックバックURL: