スポンサーサイト 

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

カスタマイズ 

暦の上ではもう立春。
ってぇことで、テンプレを春に向けて爽やか(たぶん)バージョンにすべく
地味にいじくりいじくりスタート。

今日は幅をちびっと広げてみた。
記事部分をもっと広くしたほうが読みやすいかなと思いまして。
え、誰も読んでないって?
あそう。いいのいいの。それでもいいの。

幅を広げたわりには、幅一杯まで書かない自分…。
いいのいいの。それでもいいの。


問題は配色ですねー。
センスない自分には難しいわねー。厳しいわねー。
あと背景とかタイトル画像とかね。
いろいろ悩み中なのねー。
でもちょっと楽しいのねー。
でもでも面倒っちゃ面倒なのねー。

(´ω`;)ぼちぼちなのねー。
スポンサーサイト

素材探し 

テンプレのカスタマイズに向けて、土日は素材探ししてました。

まあねー。カスタマイズと言ってもそっち方面の基礎すらわかっていない超素人ですから、たいしたことは出来そうにないですけど。
この前は全体と記事部分の横幅を広げたので、次は背景の変更ですかね。
予定としてはヘッダー、BODYの背景色、壁紙を変更しようと。
それに合わせて文字色やリストアイコンなども変更する予定であります。

いやー、それにしても無料素材屋さんの多いこと多いこと!
きっとくまなく見ていけば必ず超お気に入りが見つかるんでしょうけど。
キリがないので適当に検索して出てきた素材屋さんを順に見てました。

もースゴイね、素材屋さんって!
何でこんなものが作れちゃうのってイチイチ感動。
そんなんで2日間ずーっと画面とにらめっこしてたために、目は疲れるし首・肩はコリコリになるしで…もーダメ。

こんなんでカスタマイズなんて出来るのか。
結局、色だけ変更とかだったりして…。

それより、ツリー化したカテゴリーにもアイコンつけたいんですけど~。
いろいろ読んでもつけれない自分はおバカですか。おバカですね。
まず用語から勉強しろって話ですね。そうですね。


完成までの道のりはまだまだ遠い…。

カスタマイズへの道のり 

今日はずーっとテンプレとにらめっこしてた。
とりあえずヘッダーに置く画像は決めた。
とは言っても変更になるかもしれないけど。一応ね、一応。

で、それに合わせて全体の色をずーっと考えて、ずーっと試してみて。
あーこりゃ違うな。いやいやこれも違うし。
うーむむむ…。

このテンプレで使っているのとは全然違う色調を考えてるので、色を変更しようとしたら思ってたよりもいろいろな個所を変更しなければならないとわかってね。
大変だ、こりゃー。

果たして無事カスタマイズし終えることができるのか!?
(´ω`;)


…つづく。

月別アーカイブをプチカスタマイズ 

以前、いらないだろうと削除した「月別アーカイブ」を再度導入。
やっぱりあった方が便利だな、と(^^;)

共有プラグインの『プチ月別アーカイブ』をカレンダーの下にジャストフイーーット。
1行のみ 2行見えるように高さを調節。
  →height: 20 40px;

ついでに枠線を追記。
  →border: solid 1px #色;

でもって、カレンダーに合わせてスクロールバーの色もプチ変更。
スクロールバーもプチプチ(*´ω`)

ってことで、プチアーカイブのプチプチカスタマイズでした。
プチプチ。

※firefoxでは1行だとスクロールバーが表示されないので、2行に変更。
ちょっぴりガックシ。

テンプレのカスタマイズ 

あまり考え過ぎてもキリがない。やればやるほど何がよいのかわからなくなってくる。
悩みに悩んで試行錯誤を重ねながら出来上がったのがコレ。
自分ではどうなのかわからない。
なるべくクドくならないようにしたつもりなのだが…うーん。

イメージは『緑の楽園』(超テキトー)。
最初に適当にこんなバナーを作ってしまったので、一応バナーに合うような感じにしてみた。

タイトルバナー
が、合ってるのは色だけな気もしないでもない。

テンプレはmyhurtさんの【benri-navi_cz_lovers】です。
便利ナビ機能が気に入っているので、テンプレはこのまま使用。

・カスタマイズ詳細
【タイトル画像】
タイトルの背景画像はイタリア・フィレンツェの風景。
サイズをヘッダー(870x190)に合わせて縮小し、全体に緑色のフィルターをかけてあります。
フッターは縮小せずにサイズに合わせて切り取りし、緑色のフィルターをかけたもの。

【ブログタイトル】
文字間を広げるためにCSSにletter-spacingを追加し、全体に右へ移動。

/* ブログタイトル */
.site_title {
font-weight: boler;
text-align: center;
letter-spacing: 20px;
padding: 60px 270px 0px 55px;
font-size: 26px;
}


【記事タイトル】
葉っぱのアイコンをつけたらアイコンとタイトル先頭の文字がかぶってしまったため、タイトルをやや右に移動。

/* 記事タイトル */
.entry_table h2 {

・ 
margin: 10px 20px 10px 10px;
padding: 0px 20px 0px 30px;
background-color: #E5FFE5;  ←背景色を追加
}



【背景色】

body {
background: url(http://*****);
background-attachment: fixed; ←背景固定を指定
}



左メニュー→右メニューに変更。
なんとなく、記事が左にある方が読みやすいかな?と思ったり。
そうでもない?気持ち記事幅が狭くなったような感じがしないでもない。

あとは各部分の背景色、文字色、リンク色、マウスオーバー時の色などなどを細かく変更。
一番悩んだのがやはり
なるべく目に優しく、と文字色は黒に近い緑色にしてありますが…どんなもんでしょ?

普段はIE使いですが、念のためにfirefoxでも確認してみたところ、firefoxのが緑色がやや薄くなりますね。
枠線の雰囲気が違ってくるのね。
それはそれでまたいい感じなのだけれども。

シンプルにシンプルにと思いつつも、ついついいろいろと手を加えて付け足したりしてしまうのが初めてと言う名の
困ったもんだ(´ω`;)



※今回主に使用したのはこちらのサイトの素材です。

・ヘッダー&フッターの画像 → 『無料写真素材 p-fan.net』
 ヨーロッパを中心とした豊富な写真素材。
 サイズや色調を自動で調整してくれる簡単加工機能付き。
・記事タイトルのアイコン → 『Simple Life』
・メニューのリストアイコン → 『由美の素材屋さん』

興味を持たれた方は右にバナーがありますので覗いてみては。



上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。