もっと知りたいリンゴあれこれ トップページボタン

もっと知りたいリンゴあれこれ

*Mac関連備忘録ほか+絵日記* Macを使いこなせるようになりたいyucovinが、日々(遅々と)精進する様を綴ったもの。

Blog内検索

このブログは引っ越ししています
このブログは2013.4.1にhttp://rinare.comへ引っ越ししました。
リンクは以下。
『もっと知りたいリンゴあれこれ(new)』
よろしくお願いします。
このブログは2013/4/1に引っ越ししました。
2秒後にリュニューアルしたページに飛びます。↓↓↓
『スポンサーサイト』
飛ばない方は、お手数ですが上部リンクから新サイトを訪問してください。よろしくお願いします。

--年

--月

--

--/--/-- --. --:--

スポンサーサイト


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


このエントリーをはてなブックマークに追加

このブログは2013/4/1に引っ越ししました。
2秒後にリュニューアルしたページに飛びます。↓↓↓
『[由無し事] ブログデザインのカスタマイズ完了。』
飛ばない方は、お手数ですが上部リンクから新サイトを訪問してください。よろしくお願いします。

2010年

10月

07


こんにちは。
もう秋ですね~。ちょと寒いです。

おしゃれなMac系ブログに倣って、始めたブログデザインカスタマイズ。やっとこさ終わりました。

8月の頭にこのスタイルにして、しばらくほったらかしにしてましたが、ヘッダー部分にボタンを追加し取りあえず終了です。
タイトルの右下にあるカラフルなヤツですね。一応説明しておきます。



ボタンの説明


ホームボタン
[home]
ブログのトップページに飛びます。左上のおおきなリンゴマークやブログタイトルをクリックしても同じです。


プロフィールボタン
[profile]*随時更新
このブログの概要と管理人のプロフィールのページを作りました。始めての方はコチラをご覧下さい。(*゚ー゚)


エントリボタン
[All entries]
全エントリー(記事)のタイトルの一覧が出ます。現在カテゴリ別になっていますが、日付順やもっとわかりやすいサイトマップにする予定。(しばらくかかるかも…@-@;)


rssボタン
[RSS]
諸先輩方の真似っ子をしてFeedBurnerを利用しています。よろしければご利用下さい。FeedBurnerは嫌いという方はコチラ→
http://yucomac.blog96.fc2.com/?xml
(FC2のRSSはサイトのURLに/?xmlを足したものです。)


コンタクトボタン
[contact]
管理人に連絡を取る時にご利用下さい。(コメント欄を利用して下さっても構いません。)励ましのお便りもコチラ(笑)


リンクボタン
[link] *随時更新
リンク集です。管理人の一言コメント付き。タイトルだけのモノは右サイドバーの真ん中あたりにあります。
これからどんどんリンクサイトを増やしていきたいと思っています。




こんなカンジになってます。少しは便利になったかしらん。(´∀`)よろしければご利用下さいませませ。



yucovin的カスタマイズの仕方


時間がなくてしばらくほったらかしになってわけですが、私の場合のデザインカスタマイズの仕方をちょっとメモメモφ(..)

1.まず最初にイラストレーターを使ってデザイン(レイアウト)を作ります。
こーんなカンジかな?

デザイン作業風景
(yucovin作業中はこんなカンジ。きちゃない…^-^; いろいろ作りすぎると重くなるのでボタンやミニパーツは別のファイルで作る。)


2.雰囲気がつかめたらサイトの構造を考えてパーツを作ります。
どうやったら、この絵が再現出来るか? 基本は枠の組み合わせで考えます。(多少html、cssの知識が必要。)これがWebページの面白さと言えよう。文字羅列が画面(絵)になるのが楽しい。
(全くの初心者でも、ネットで調べられる範囲の知識でもって簡単な事なら出来るようになりますよ~。1週間くらいで。)
あまりこだわりすぎると画像が沢山必要になったり、大きい画像を細切れにして組み合わせて再現しないといけなくなるので、妥協も必要。(重くなるし面倒、汗)
構造はその人の考え方が思いっきり出る。
(私のソースはきちゃないので覗かないでいいですよ~。(゚Д゚;))

イラレで描いたイメージのパーツを加工してそのままブログ流用しちゃいましょう。
手の込んだ物を作る際は別に作業します。(このブログではそんな手の込んだ物は全く無い。)

ブログの場合、そこのブログサービスの変数が必要。勉強するのが面倒だったので、私はカスタマイズしやすそうなテンプレートをお借りしてそれを元に書き書き。
変数を使ってあるため、実際FC2ブログの管理画面にソースを貼付けないとレイアウトの確認出来ない。この作業がとっても手間。なんとかなれば良いのに…(´;ω;`)

今回はボタンを作って貼付けた。
コレね。カラフルってダサイ(^-^;)
今回追加したボタン

マウスオーバーした時の画像も作る。この手のナビは画像に文字を乗せる方法の方が好みだが面倒なので文字入り画像にしちゃった。


ちなみに
[profile] [contact] [link] のページはブログのページではなくFC2のHPサービスのページ。同じデザインにしておいた。ブログでない分自由に作れるのがメリット。


できあがり。ほえ~。
時間があればテンプレとか作って提供したいけど…そんな日が来るのであろうか…謎。


*****

勝手に参考にさせて頂いた諸先輩方ありがとうございました。こそこそソース覗いたりしました。えへへ。
少しでも読みやすいブログになれば幸いです。
また少しずつ手直しして良いブログにしてゆきたいと思います。(良いブログにする一番の方法は、記事のクオリティを上げる事だってツッコミは自分で入れておきます(T◇T))

覗きに来て下さってる皆さん、いつもありがとうございます。これからもよろしくお願いしますね。(*´∇`*)


このエントリーをはてなブックマークに追加

tag :タグ 由無し事 タグ ブログ

ブログ内関連記事
Loading

ほえぇ~!
yucovinさん、こんばんは~

なるほど~、だからこういう整った仕上がりになるんか~。

僕の場合は全てが図面無しのぶっつけ本番!
漠然としたイメージをもとにCSSやHTMLを書いて、
必要ならばその場で画像を作成して適用する…のが私のスタイル。

yucovinさんのようなプロセスを踏むのは昔から理想としているんだけど、
絶対途中で訳が分からなくなっちゃうんです、これが(笑)
[ 2010/10/07 23:09 ] [ 編集 ]
Re: ほえぇ~!
くじゃくさ~ん♪^-^)/

> なるほど~、だからこういう整った仕上がりになるんか~。

整ってる?整ってる? うふふ~褒められてるのかな?ありがとうございます。


> 僕の場合は全てが図面無しのぶっつけ本番!
> 漠然としたイメージをもとにCSSやHTMLを書いて、
> 必要ならばその場で画像を作成して適用する…のが私のスタイル。

Σ(゚Д゚;)うわ~、どう考えてもそっちの方がスゴいですよ。
私は大きい枠から作って行くんですけど…。漠然としたイメージだけでいきなり構文書いちゃうなんて
さすがくじゃくさん(>_<)


> yucovinさんのようなプロセスを踏むのは昔から理想としているんだけど、
> 絶対途中で訳が分からなくなっちゃうんです、これが(笑)

うや~。でもちゃんと出来てるんだから良いんですよ~。
ちなみに、もちろんくじゃく兄さんのブログのソースも覗かせてもらっちゃいました。(*´∇`*)てへ。
[ 2010/10/08 00:28 ] [ 編集 ]
ブルドッグ
yucovinさん、こんちゃわ

ソース…みーーたーーなーー(-_- ;;

えと、Safari 5使っていますよね?
BetterSourceというプラグインをご存知でしょうか?
ソースを見るんだったらこのプラグインを入れておくと奇麗で見易いですよ(いまさら/笑)
http://www.awarepixel.com/safari/bettersource/

ご存知でしたら聞き流して下さい~
[ 2010/10/08 17:43 ] [ 編集 ]
Re: ブルドッグ
くじゃくさんへ^-^)/

> ブルドッグ
わう!ぷぷぷo^―^o)

> ソース…みーーたーーなーー(-_- ;;
きゃ~。つい出来心で~! 勘弁しておくんなまし、兄貴!

> えと、Safari 5使っていますよね?
> BetterSourceというプラグインをご存知でしょうか?
> ソースを見るんだったらこのプラグインを入れておくと奇麗で見易いですよ(いまさら/笑)
> http://www.awarepixel.com/safari/bettersource/

うんにゃ。(・∀・)全然知りませんでした。
というのも、わたくしめ、safariよりfirefoxの方をよく使ってるのでやんす。(∩゜д゜)
しかし、ソースが見やすいってのなら導入しない訳にはまいりませぬぞ!ぞー!ぞーー!

くじゃくさん。いつもいつも、いろいろ教えてくれてありがとー(*´∇`*)ですv-238
[ 2010/10/09 01:59 ] [ 編集 ]
コメントの投稿














管理者にだけ表示を許可し、公開しない。(つまり内緒話?)  
・コメントは認証制です。
・現在管理人多忙のため、コメントにお返事が出来ない事がほとんどです。ご了承下さい。  

[おやくそく]
・コメントをつける方は必ず自分のメールやサイトのURLをご記入下さい。所在の分からない方のいい加減なコメントは削除します。
・宣伝目的や明らかに内容にそぐわないもの、いわゆる公序良俗に反することや誹謗中傷めいたものは削除します。
・管理人および見に来てくださった方を不快にさせる可能性があるものも内容にかかわらず削除します。
・そのようなものを目にした時に応戦するようなコメントをつけることも避けてください。こちらも削除します。
顔の見えないインターネット上のやり取りなので誤解が生じることがあります。諍いに発展する事は本意ではありませんのでご理解下さい。内容も言葉も少し気をつけて頂くだけで、コメント欄はとても有意義な交流の場になります。ご協力お願いします。(^_^)

トラックバック
この記事のトラックバックURL


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