記事幅の変更方法(クローバーの妖精のテンプレート)
↑上の画像をクリックすると、サンプルが見れます。
anne_12cl_2c テンプレート
[記事の幅の変更方法]
記事の幅は、510ピクセルから最大810ピクセルまで、
好きな幅に設定できます。
ここでは、2カラムの記事を810ピクセルにするやり方を紹介します。
↓ 追記をごらんください。
「テンプレートの設定」→「anne_12cl_2c」編集
→「スタイルシートの編集」
下記赤文字の数字を
青文字の数字に変更してください。
(ここでは、300プラスしていますが、もちろん200でも100でも、任意の数を増やしてください。)
-------------------------------------------------
レイアウト
-------------------------------------------------
div#container {
width: 800px;
~
↓
div#container {
width: 1100px;
~
div#header {
width: 800px;
~
↓
div#header {
width: 1100px;
~
div#main {
float : right;
width : 510px;
~
↓
div#main {
float : right;
width : 810px;
~
div#footer {
clear: both;
~
width: 800px;
~
↓
div#footer {
clear: both;
~
width: 1100px;
~
------------------------------------------------
メイン記事部分の画像と文字色
-----------------------------------------------
.entry_top h2 {
color:#996600;
text-align:center;
padding-top:70px;
padding-left:70px;
padding-right:30px;
}
↓
.entry_top h2 {
color:#996600;
text-align:left;
padding-top:70px;
padding-left:70px;
padding-right:330px;
}
これは、メイン記事のタイトルを、雲のイラストの中に収めるための変更です。中央よせから、左よせに変更しています。
-------------------------------------------------
メイン記事部分の設定
-------------------------------------------------
div.content {
text-align: left;
width: 510;
overflow: hidden;
}
↓
div.content {
text-align: left;
width: 810;
overflow: hidden;
}
-------------------------------------------------
横カレンダー(ヘッド下)の設定
-------------------------------------------------
#xcalender{
width:800px;
~
↓
#xcalender{
width:1100px;
~
html>body #xcalender{
width:780px;
~
↓
html>body #xcalender{
width:1080px;
~
------------------------------------
3カラムの場合のみ、「レイアウト」の中の次の部分も変更してください。
div#wrapper {
width: 755px;
~
-------------------------------------
