FC2ブログ

紅葉・黄葉を楽しもう~♪ブログの模様替え♪

2006年11月03日

もうすっかり寒くなってきましたね~!!
こちらでもじわじわ木々の葉の色が変わってきました♪
紅葉は近所には少ないですが、銀杏はわりとたくさんあるのです♪
楽しみだわ♪《《《《♪♪(*´▽`*)ノ゛うふふ~


さてさてそろそろうちのブログも模様替えをしてみようと思い、
いつもお邪魔しております「柚莉湖♪風と樹と空と♪」さまのところで
素材をお借りしてまいりました!!
基本的にはいつもやっていることをしただけなのですが、
手順を簡単に書いておきます。
(今までのカスタマイズ記事はFC2カスタマイズのカテゴリからご覧いただけますよ。)


まずは壁紙の変更です。
カスタマイズなんて私には無理と思われるかたもおられるかもしれませんが、
壁紙を変えるだけでも自分だけのテンプレが出来たみたいで嬉しいですよ!!
まずは2カラムにするのか3カラムにするのかを決めて
出来るだけシンプルなテンプレを探してダウンロードし、
(テンプレにもいろいろと規約はございますので
カスタマイズできるかどうかを必ず確認するようにしてくださいね!!)
その壁紙を変えてみるのが近道かな?
もちろんお好みの壁紙も探してくださいね!!
そして使いたい壁紙をアップロードして
そのテンプレートのスタイルシート編集の中から
bodyタグの中の
background-image : url("http://~.jpg");
と書かれている部分を探して赤字の部分を使いたい画像に変更すればOKです!!
もしもこのような記述が見当たらないときは
同じくスタイルシートの編集の中の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ではプラグインが3箇所に分かれています。
プラグインの編集ページに行くと、
プラグインカテゴリ-1~3まであることが分かります。
このプラグインカテゴリー1の部分がplugin_first、2がplugin_secondとなっているわけですね。
さてさて<%plugin_first_title>の前後を囲んでいるdivタグを見てください。
もしも記述されていなければ自分で作る必要があります。
私の場合は<div class="plugintitle"><%plugin_first_title></div>のようにしました。
プラグインカテゴリー1のタイトルのクラスは赤字の部分です。
plugintitleというクラスのCSSを書き換えればデザインが変わるということになります。


次にCSS編集を行います。
先ほどのクラスをスタイルシート編集画面で探してください。
クラス名の前に「.」がついているはずです。
自分でdivタグを付け加えたかたはCSSを新たに書き加えます。
.plugintitle{
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;

}
yozoさんの記事を見て書き加えたのが、
赤字の部分です。
タイトルの左に1文字分の線を入れて、
下に2pxの線を入れました。
プラグインの枠と同じ色にそろえて完成です!!

これと同じ作業を記事タイトル下の日付の部分にも付けました。
右と左の余白を少し広げたい場合は
margin設定を入れればOKです。
margin:0px 6px 5px 6px;
のような記述をいれてくださいね!!
左の数字から順に、上、右、下、左の余白を決めます。
時計回りですね♪(*'ー'*)ふふっ♪


borderを使うことによっていろんな色を使える利点がありますし、
画像が減ったのできっと表示も軽くなるんじゃないかな?《《《《♪♪(*´▽`*)ノ゛うふふ~
興味のある方はyozoさんの「画像の枠線を設定しましょう(CSS編集)」の記事を
一度ご覧になってくださいね!!
yozoさん、とっても分かりやすい記事をありがとうございました。(*- -)(*_ _)ペコリ


そしてとってもたくさんの素敵な画像をいただきました「柚莉湖♪風と樹と空と♪」さま、
本当にありがとうございました。ペコリ(o_ _)o))


BlogPetの背景、短冊背景も秋の背景にしています。
どうぞお楽しみくださいね♪(=´ω`)ノ


↓応援よろしくお願いします!!ヨロシク( ゜ー゜)/゜*゛:¨*;.・';゛:..・☆
banner_02.gif

スポンサーサイト



スレッドテーマ:カスタマイズ:ブログ

メイン

トラックバックURL


トラックバック

画像の枠線を設定しましょう(CSS編集) from yozoの気が向いたと記2.0
 画像の枠線(border)を設定して、画像が引き立つようにしてみましょう。なお、この記事の内容は、CSS編集が可能なブログならどのブログでもできます。基本の設定 枠線(border)の設定は、CSSで下のように「太さ [Read More]

コメント

こちらにもこんばんは!
今回の背景は紅葉の秋ですがとても優しい淡い色合いのサイトとなりましたね。可愛いです。
濃いビシッとしまったデザインもかっこいいけど、ととろはこんな優しいデザインも大好きです。
ラインのカラーもすごく美しく合ってますし、記事したのちょっと鮮やかなラインもいいわ♪
ととろはなかなか腰を上げられないのですが、こうやってエントリに残してくださるときっと後から「やろう!」って時にお邪魔して助けていただけると思って安心しちゃう。
とても丁寧ないろんな場合もカバーしたカスタマイズエントリに感謝です。
まゆびさん、こんばんはー♪
ハロウィンも終わって、もとのテンプレートにもどっていたので、あらら?って思っていたら、やっぱりこんなに素敵に模様替えされたのですね。さすがですよ♪(*^-^)
 Yurikoさんの壁紙、ワンポイント、カレンダーと、いつものまゆびさんのブログになりましたね。こちらは本当に見やすいのでyozoは気持ちよく記事を楽しませていただいてまっす m(_ _)m
 今回は初心者のみなさんに、特に丁寧に語りかけていますね。まゆびさんの仰るとおり、このカスタマイズが一番やりたいけど、やれないことなのかもしれませんね。
 yozoも色々と相談受けることがありますが、背景画像やワンポイント画像、枠線の変更など、CSS編集についてのことが一番多いですね。(゚-゚*)(。。*)ウンウン
 そして、記事やサイドバーのタイトルに、yozoの記事の枠線の応用を使ってくださったのですね。まゆびさんの記事を見て、おもしろい!多くの人に思ってもらえそうですね♪ありがとーございまっす♪ m(_ _)m yozoもまゆびさんの真似をしようかなって、企んでいるくらいなんですからね (=⌒▽⌒=) ニャハハハ♪

追伸:記事でのyozoの紹介及びトラバありがとーございまっす♪
こちらからもお返しのトラバ入れさせていただきました。m(_ _)m
ととろさん、こんばんは♪(o^∇^o)ノ
「柚莉湖♪風と樹と空と♪」さまのところでいろいろ借りてきて
実際に設置して試してみたところこれが一番可愛かったので
最終決定をしました。相当悩みましたけどね!!
また11月の後半に壁紙だけでも変えるかも。(笑)
>ととろはこんな優しいデザインも大好きです。
(*'▽'*)わぁ♪とっても嬉しいです!!
記事下のラインは紅葉のみのラインにしようか悩んだのですが、
いろいろちりばめられている今のラインの方が背景に合うなと思い、
こちらに決定しました。(*'ー'*)ふふっ♪

カスタマイズはどうしても時間がかかりますから、(特にやり始めはね。)
じっくり取り組めるときにでもまた挑戦してみてくださいね。
もしもこの記事が役に立ったら本当に嬉しいです!!d(*⌒▽⌒*)b ニコニコッ
yozoさん、こんばんは♪(^ー^)ノ
そうそう、本当はハロウィン後に紅葉テンプレートにするつもりだったのですが、
微調整が間にあわなかったことと、コスモスももうちょっと楽しみたかったので、
コスモステンプレに戻していました!!
>Yurikoさんの壁紙、ワンポイント、カレンダーと、
>いつものまゆびさんのブログになりましたね。
もともとYurikoさんの素材を見て、どうしても使いたくなって
カスタマイズを始めたほどのYurikoさんファンですからね!!
たくさんの素材を使わせていただいてますし、
うちのブログはきっとこのイメージなんだろうなって思います。
見やすくなってます?ありがとうございます!!
やっぱり来ていただく人に楽しんでいただけるようにするために
出来るだけ見やすいデザインを心がけています。(*^▽^*)

カスタマイズって難しいように思われる方が多いですが、
実際チャレンジしてみると案外簡単に出来ることもあるんですよね。
壁紙を変えるだけでもかなり印象が変わりますしね♪

サイドバーの枠線についてはyozoさんの記事にお世話になりました。
本当に分かりやすい記事で助かりました。(*- -)(*_ _)ペコリ
あれは本当に便利な技だと思うのでいろんな使い方が出来そうですね!!
こちらこそトラバありがとうございました。ペコリ(o_ _)o))
こんにちはー。
模様替えですね!!
前回のコスモスも色鮮やかで素敵でしたが
今回の銀杏やドングリの背景も
秋が深まってきた今の季節にピッタリでいいですねー☆

FC2にお引越ししてきてから、
共有テンプレにいっぱい素敵なテンプレがあるので
自分で素材探して・・・・てことをしなくなってる不精者な私ですが
まゆび殿を見習って、オリジナリティのあるブログを
自分で作るのっていいなーと思いましたょ☆
ばばるさん、こんにちは♪(o^∇^o)ノ
そろそろ紅葉もいいなと思って模様替えしてみました♪
コスモスもお気に入りだったんですけどね。
>秋が深まってきた今の季節にピッタリでいいですねー☆
ありがとうございます!!ペコリ(o_ _)o))
ブログでも秋を楽しめたらいいなと思っています♪

他のブログはあまり知らないのですが、
FC2はテンプレがいっぱいありますよね!!
私もこの間検索してみたら可愛くて使いたいものがいっぱいでした!!
自分で素材を探すのはやっぱり時間がかかりますものね。
でも素材探しはすごく楽しいので、出来るだけ時間をとりたいなぁと
思っています♪(*'ー'*)ふふっ♪
まゆびさん、こんばんは。
紅葉というと、つい鮮やかな色をイメージしちゃいますが
このやわらかな色合いのテンプレートは、とっても和みますね。
すっごくすてき。癒されるなぁ
テンプレにあわせて(?)Blogタイトルの色も、やわらかい色にしたのですね?
日本の秋って感じ。しずつ、てるひも日常に帰ってこられた気がしてます。
まゆびさんのBlogは、くるたびに素敵になってて、ほんとすごいよね。
たくさんの方が「また来たいな」って思うんだろうな…って。
また癒されにきますね。
てるひさん、こんばんは♪(o^∇^o)ノ
>紅葉というと、つい鮮やかな色をイメージしちゃいますが
>このやわらかな色合いのテンプレートは、とっても和みますね。
ヽ(▽^〃ヽ)ヽ(〃^▽^〃)ノ(ノ〃^▽)ノ ワーイワーイワーイ♪
そういっていただけるとすごく嬉しいです!!
実は壁紙を決めるときに、すっごく鮮やかな赤い葉の紅葉の画像と、
この画像で悩んだんですよー。
赤い木々の画像もとっても綺麗な色だったのですが、
こちらの方がうちのブログらしいような気がして決めたのです♪
>テンプレにあわせて(?)Blogタイトルの色も、やわらかい色にしたのですね?
そうそう♪やっぱり茶のイメージだったので♪(*'ー'*)ふふっ♪
>てるひも日常に帰ってこられた気がしてます。
ふふ。10月は本当にすごいスケジュールでしたものね。

癒されるだなんて嬉しい言葉をありがとうございます♪
出来るだけ読みやすいブログをと心がけているので本当に嬉しいです!!
こんな嬉しい言葉をいただけるとますます張り切っちゃうわ!!(爆)
こんにちはー。まゆびさん。
うん。壁紙だけでも自分で、編集すると確かに嬉しいかもって、思うんですが、やっぱり英語の羅列を見てると、私に出来るかしらって思って引いてしまうんですよね。うんうん。
まゆびさんのどんぐりと紅葉、イチョウの壁紙、とっても秋らしくてすてきです。
かわいいなぁー☆うふ☆
それに、タイトルの横にある紅葉も、とってもかわいい♪
秋らしくて、すてきですぅーー☆
解説もとっても分かりやすくて、私でもちょっとは分かるかなぁ・・・。とか思いました。
いつも素敵な壁紙で、季節を感じていますよー♪
enuさん、こんにちは♪ヾ(=^▽^=)ノ
そうそう、htmlやCSSの編集って全部ややこしい英語だらけで、
どうしても躊躇してしまいますよねー!!
私もブログを始めて数ヶ月はそうでした。
私の場合はどうしても使いたい可愛い素材があって
頑張ってみたんですけどね♪(*'ー'*)ふふっ♪
>まゆびさんのどんぐりと紅葉、イチョウの壁紙、とっても秋らしくてすてきです。
O(≧▽≦)O ワーイ♪ありがとうございます♪
「柚莉湖♪風と樹と空と♪」さまの素材はとっても可愛いので
大好きでたくさん使わせてもらっているんですよ♪(^ー^* )フフ♪
紅葉のアイコンも可愛いでしょー♪
ブログを始めてからはブログの壁紙や
BlogPetの背景で季節を感じてます。(*^▽^*)

解説分かりやすいですか?それならよかったです。(´▽`) ホッ

コメントする

サイト管理者にのみ通知する
コメントをプレビューする?
ご利用のブラウザ、設定ではご利用になれません。

|

Copyright c 200x xxxxx. All Rights Reserved.

/for one column -->