紅葉・黄葉を楽しもう〜♪ブログの模様替え♪
2006年11月03日
もうすっかり寒くなってきましたね〜!!
こちらでもじわじわ木々の葉の色が変わってきました♪
紅葉は近所には少ないですが、銀杏はわりとたくさんあるのです♪
楽しみだわ♪《《《《♪♪(*´▽｀*)ノ゛うふふ〜
さてさてそろそろうちのブログも模様替えをしてみようと思い、
いつもお邪魔しております「柚莉湖♪風と樹と空と♪」さまのところで
素材をお借りしてまいりました!!
基本的にはいつもやっていることをしただけなのですが、
手順を簡単に書いておきます。
(今までのカスタマイズ記事はＦＣ２カスタマイズのカテゴリからご覧いただけますよ。)
まずは壁紙の変更です。
カスタマイズなんて私には無理と思われるかたもおられるかもしれませんが、
壁紙を変えるだけでも自分だけのテンプレが出来たみたいで嬉しいですよ!!
まずは２カラムにするのか３カラムにするのかを決めて
出来るだけシンプルなテンプレを探してダウンロードし、
(テンプレにもいろいろと規約はございますので
カスタマイズできるかどうかを必ず確認するようにしてくださいね!!)
その壁紙を変えてみるのが近道かな？
もちろんお好みの壁紙も探してくださいね!!
そして使いたい壁紙をアップロードして
そのテンプレートのスタイルシート編集の中から
bodyタグの中の
background-image : url("http://〜.jpg");
と書かれている部分を探して赤字の部分を使いたい画像に変更すればＯＫです!!
もしもこのような記述が見当たらないときは
同じくスタイルシートの編集の中のbody{ }の部分を探して
この記述を入れてみてください。
その次は細かい画像を足していきます。
本当はCSSをきちんと設定して画像を配置した方がいいのでしょうが、
(後でメンテナンスがしやすい。)
なかなか上手くいかなかったので、htmlに直接書き込んでみました。(笑)
タイトルを表示させている部分を探します。
<a href="./" accesskey="1"><%blog_name></a>赤字の部分がブログタイトルのFC2独自タグです。
その前後のタグはリンクをつけるタグですね。
この前後に私はimgタグを入れました!!
<%topentry_year>.<%topentry_month>.<%topentry_day>という
独自タグを探してその前に画像タグを追加!!
記事のラストのライン、右サイドバーのタイトルの頭の画像も同じ要領で付けました!!
次は右サイドバーでリストになっている部分のアイコンの変更です。
こちらは「ブログを七夕用に模様替え♪」の記事にて書いていますので
参考になさってくださいね。
今回のどんぐり画像は「A Trial Product's 素材置き場」さまよりお借りいたしました。
ありがとうございました。(*- -)(*_ _)ペコリ
今回ひとつだけ新しいことに挑戦してみました。
記事タイトルの下と右サイドバーのタイトル下の区切りですが、
今まで画像だったものを線を入れて区切ることにしました。
こちらは「yozoの気が向いたと記2.0」のyozoさんの
「画像の枠線を設定しましょう（CSS編集）」の記事を参考にさせていただきました。
まず右サイドバーから。
プラグインのタイトル部分をあらわす部分を探します。
html編集の中から<%plugin_first_title>という部分を探します。
FC2ではプラグインが３箇所に分かれています。
プラグインの編集ページに行くと、
プラグインカテゴリ−１〜３まであることが分かります。
このプラグインカテゴリー１の部分がplugin_first、２がplugin_secondとなっているわけですね。
さてさて<%plugin_first_title>の前後を囲んでいるdivタグを見てください。
もしも記述されていなければ自分で作る必要があります。
私の場合は<div class="plugintitle"><%plugin_first_title></div>のようにしました。
プラグインカテゴリー１のタイトルのクラスは赤字の部分です。
plugintitleというクラスのCSSを書き換えればデザインが変わるということになります。
先ほどのクラスをスタイルシート編集画面で探してください。
クラス名の前に「.」がついているはずです。
自分でdivタグを付け加えたかたはCSSを新たに書き加えます。
.plugintitle{yozoさんの記事を見て書き加えたのが、
font-size:1.1em;
font-weight:bold;
padding:4px 0px 4px 3px;
margin-left:5px;
text-align:center;
width:210px;
letter-spacing:2px;
padding-left:0.3em;
border-left: 1em solid #e6c671;
border-bottom: 2px solid #e6c671;
}
赤字の部分です。
タイトルの左に１文字分の線を入れて、
下に2pxの線を入れました。
プラグインの枠と同じ色にそろえて完成です!!
これと同じ作業を記事タイトル下の日付の部分にも付けました。
右と左の余白を少し広げたい場合は
margin設定を入れればＯＫです。
margin:0px 6px 5px 6px;
のような記述をいれてくださいね!!
左の数字から順に、上、右、下、左の余白を決めます。
時計回りですね♪(*'ー'*)ふふっ♪
borderを使うことによっていろんな色を使える利点がありますし、
画像が減ったのできっと表示も軽くなるんじゃないかな？《《《《♪♪(*´▽｀*)ノ゛うふふ〜
興味のある方はyozoさんの「画像の枠線を設定しましょう（CSS編集）」の記事を
一度ご覧になってくださいね!!
yozoさん、とっても分かりやすい記事をありがとうございました。(*- -)(*_ _)ペコリ
そしてとってもたくさんの素敵な画像をいただきました「柚莉湖♪風と樹と空と♪」さま、
本当にありがとうございました。ペコリ(o_ _)ｏ))
BlogPetの背景、短冊背景も秋の背景にしています。
どうぞお楽しみくださいね♪(=´ω｀)ﾉ
↓応援よろしくお願いします!!ヨロシク( ゜ー゜)/゜*゛:¨*;.・';゛:..・☆
