まず初めにいつでも現状に戻れるようにしとくと良いと思います。
R'sパパのやり方としては、このようにまったく同じテンプレートを３つ用意しています。
・使用しているテンプレート(実用)
・編集のテストをするテンプレート(編集テスト用)
・誤った作業をしたときに元通りにするテンプレート(復元用)
※３つとも全く同じようにするため、文章をまるごとコピーします。
拡大↓↓
編集テスト用でうまく行ったら実用にスタイルシートを丸ごとコピー＆ペースト(貼り付け)します。
やっぱり元通りにしたいと思った時は復元用を使います。
ではカスタマイズに移ります。
カスタマイズでイジるのは基本的にスタイルシートになります。
今回は、R'sパパが前までお世話になっていましたナチュブロのテンプレートの
【夜に優しく輝くテント(3カラム)】で説明したいと思います。
基本的な部分は３カラムも２カラムも同じだと思います。
最初に使用するテンプレートによって多少異なるようです(>_<)
一つずつ行っていきますので、必要な部分を適当に参考にして頂ければと思います。
【ブログ全体の幅を変える】
スタイルシート内に
【#container】から始まる下記のような文章があります。
#container{font-size:12px;
width:760px;
background-color:#ffffff;
margin:0px auto;
この
【width:760px;】の数字の部分を変えることでブログ幅が変わります。
今回は【width:760px;】を【width:1050px;】に変えてみました。
そうするとこのように変化します。
【width:760px;】
【width:1050px;】
単純にブログ幅を変えただけですので、
サイドバーの位置やＴＯＰ画の位置が崩れてしまいます。
その辺は順を追って・・・
【ＴＯＰ画を変える】
まずはじめにＴＯＰ画にしたい画像をアップロードしておきます。
今回は先ほどのブログ幅に合わせるため、1050×700のサイズを用意しました。
お馴染みのナチュブロ管理画面から画像一覧を選び、
ＴＯＰ画にしたい画像をオリジナルサイズでアップロードします。
そしてアップロードした画像をクリックして開きます。
赤丸のアドレスバーの画像ＵＲＬをコピーしてこれから指定する場所に貼り付けます。
指定する場所は先ほどの
【#container】の文章の少し下にある
【#banner,#subbanner】から始まる、
このような文章の赤字で記してある部分です。
(使用するテンプレートで変わると思います。)
#banner,#subbanner{
background:#fff url(
/_img/outdoor01/outdoor_01.jpg) left;
padding:0px 0px 0px 0px;
height:
220px;
青字部分は画像の高さになります。
では画像ＵＲＬを貼り付けてＴＯＰ画を変えてみます。
このようになりました。
このままだと画像が切れてしまうので、先ほどの青字部分を700pxにします。
このようになりました。
でかいですね(^^;)これは極端な例なので気にしないでください(笑)
ちなみに画像サイズが小さいとこのように同じ画像で埋め尽くされます。
ブログ幅、高さに合わせた画像を用意すると良いかもしれませんね。
つづきまして・・・
【ブログの記事欄の幅の変更】
【サイドバーの幅の変更】
これはバランスが重要らしく、バランスがうまくいかないと形が崩れてしまいます。
そして、R'sパパもよくわかってません・・・
【#content】から始まる文章で、下記赤字部分と、
#content{
width:
400px;
float:right;
background-color:#ffffff;
padding:20px 10px 20px 5px;
margin:0px;
}
【.blog{】から始まる文章で下記の赤字部分を修正することで【ブログの記事欄の幅】が変わるようです。
.blog{
width:
400px;
margin:0px 0px 0px 0px;
実際にイジってみます。
【#content{】から始まる方を635px
【.blog{】から始まる方を640pxにしてみます。
そうすると・・・これが・・・
このようになります。。。
サイドバーの部分は
【#links{】から始まる文章で下記の赤字部分を変えることで幅を変えることができるようです。
#links{
width:
160px;
float:left;
text-align:left;
margin:0px 0px 0px 0px;
padding:20px 5px 20px 5px;
background-color:#ffffff;
overflow:hidden;
３カラムの場合は
【#links2{】から始まる同じ文章もあります。
これをそれぞれ190pxに直します。
そうすると・・・これが・・・
このようになります。
赤丸部分の余白が気になりますよね？
これは、
【.sidetitle{】から始まる文章の下記赤字部分と
.sidetitle{
border-top:1px solid #cccccc;
border-left:1px solid #cccccc;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
background-image: url(/_img/outdoor01/bg_001.gif);
background-position:1px 1px;
color:#fff;
font-size:12px;
letter-spacing:2px;
padding:5px 5px 5px 5px;
width:
148px;
上記文章のすぐ下の
【.side{】から始まる文章の下記赤字部分を修正することで余白を埋めることができます。
.side{
width:
148px;
font-size:12px;
line-height:140%;
margin:0px 0px 10px 0px;
padding:5px 5px 5px 5px;
border-left:1px solid #cccccc;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
実際に直してみます。
上記赤字部分をそれぞれ148pxから180pxに直します。
すると・・・これが・・・
こうなりました。
実はこれ・・・R'sパパのファミキャン日記とブログ幅、サイドバー幅が同じです(^^;)
いろいろ何度もイジりまくってこれになりました(>_<)
ＴＯＰ画像のようなものはわかるのですが・・・この幅と余白のバランスみたいなものはいまいちわかりません。
ですのでR'sパパは手当たり次第上記の場所をイジりました。
ちなみにタイトル横の画像は
【.title{】から始まる文章の下記赤字部分をＴＯＰ画像変更の要領で画像ＵＲＬをいれることで変更することができます。
.title{
color:#000;
font-size:12px;
font-weight:bold;
height:30px;
background-repeat: no-repeat;
background-position: left;
padding-left:35px;
padding-top:10px;
background-image: url(
/_img/outdoor01/entry_icon01.gif);
background-position:1px 1px;
}
やってみるとわかるのですが・・・タイトルが画像に重なってしまたりすることがあります。
その場合は上の赤丸の【padding-left:35px;】の数字部分をイジると解消されます。
画像が切れてしまうことがあります。その場合は同じく赤丸の【height:30px】の数字部分をイジると解消されます。
・・・・・とここまでがR'sパパがやったカスタマイズになります(>_<)
他にも背景を変えたり【body{】、日付部分の画像を変えたり【.date{】もできます。。。
大体同じ要領で画像部分を編集するとできちゃいます(*´ω｀*)
そんなわけで・・・ナチュブロユーザーさんの
参考になればと思いこんな記事を作ってみました！！
※ちゃんとコピーしてながらやってくださいね。。。形が崩れても責任取れませんので・・・自己責任でお願いします(>_<)
ちなみに！！画像のサイズを変えたり、加工したり、一括リネームするのにR'sパパは【ＰｈｏｔｏＳｃａｐｅ】という無料ソフトを使ってます。こちらも参考になれば・・・
では～
本日の締めの一言。。。
『皆さんもオリジナルブログができますように☆』
ちゃんちゃん♪
ランキングに参加しています。
ポチって頂けると幸いです(*^-^*)
あなたにおススメの記事