テンプレート2 - 幅を変更したりプラグインの位置を変更したり

 テンプレート2が共有テンプレートに登録されたということで少しずつカスタマイズ方法を紹介していきます。まずはメインカラムとプラグインの幅を変更してみます。
 変更するところはスタイルシートの下記の部分です。関係のない部分は表示していません。幅を調整するとこでお好みのサイズになります。
/* 全体の幅 -------------------------------------------------*/
#container{
width: 800px;
}

/* 左+メインを合わせた幅 -----------------------------------*/
#box2 {
width: 800px;
}

/* 左右の幅 -------------------------------------------------*/
#left {
float : left;
width : 240px;
}


/* メインの幅 -----------------------------------------------*/
#main {
float : left;
width : 560px;
}
 #leftと#mainの幅の合計が#box2より大きくならないようにしないといけません。プラグインの位置を左にしたい場合は#mainを下記のように変更します。
float : left; ⇒ float : right;
 幅を変えてもタイトルの位置はそのままなので何とかしたと感じた方はこちらを変更してみてください。幅を広くするほどタイトルの位置は左に移動します。
#header2{
width: 800px;
}
 タイトルの下にあるRSSボタンや検索窓の位置を変更したい場合はこちらを変更します。#navi-inの幅を大きくすると全体が左に移動します。archivesと検索窓の距離を変更するには.sitemapのmarginの太字の部分を変更します。
#navi-in{
width:800px;
}

.sitemap{
margin : 1px 340px 0 0px;

}
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
質問があります。よろしければご教授をお願いいたします。
letsfc2blog3をダウンロードしてテンプレートに使いたいのですが、
メインカラムでサムネイル画像を横並び2列に表示したいのですが
幅等を調整してもうまくいきません。
カスタマイズでメインカラム幅を560→575pxへ
それにあわせて全体の幅は1000pxへ、
メインと左側のプラグインを合わせた幅は775pxへ変更しております。

サムネイル画像の横幅は270pxに設定しております。

【2008/03/21 10:34】 | tak #GCA3nAmE | [edit]
こんにちは takさま。
テンプレートにご興味頂きありがとうございます。

ご質問の件ですがメインカラムの幅を
580px以上に広げると表示されるかと思います。

理由について説明してみます。
メインカラム内に画像が表示されるのは
以下のように padding が指定された div の中になります。

<div class="entry"> ⇒ padding: 15px 10px 5px 0px;
<div class="entryblock"> ⇒ padding: 5px 10px 5px 20px;

すなわち270pxの画像を2つ並べる場合メインカラムの幅は

 ・画像270px × 2
 ・entry 左右 paddingの合計10px
 ・entryblock 左右 paddingの合計30px

 で合計580px以上必要となります。

拙い説明で申し訳ございません。
では今後もよろしくお願いいたします。
【2008/03/21 19:18】 | 管理人 #6urEx/7U | [edit]
管理人さま
ご指導ありがとうございます。
とりあえず全体の幅 1005px
メインと左側のプラグインを合わせた幅 780px
メインの幅 585px

に設定してサムネイル画像が横に並んで表示されるようになりました。
ありがとうございました。

もう少しデザインをしたいのですが。。。
左右のカラムとメインカラムの間を少し狭くするにはどうしたら
よろしいでしょうか。

重ねての質問で恐縮でありますが、お答えいただければ幸いです。m(_ _)m



【2008/03/21 22:48】 | tak #GCA3nAmE | [edit]
おはようございます。

ご質問の件ですが先ほどの説明に出ました
「.entry」「.entryblock」のpaddingを変えると
メインカラムと左右カラムの幅を調節するとこができます。

この2つはメインカラム内にありますので左右の幅を縮めると
左右カラムとの間隔は狭くなります。

ちなみにpaddingは「padding : 上 右 下 左 ;」
という感じに幅を指定しています。
【2008/03/22 09:39】 | 管理人 #6urEx/7U | [edit]
ご教授ありがとうございます。
色々と試してみます。

何か有りましたらご指導のほど何卒よろしくお願いいたします。

【2008/03/22 12:21】 | tak #GCA3nAmE | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加