link
special
radioDTM.jp site

blogトップへ

メルマガ登録へ

linksへ

公式バナーへ

Podcastへの登録と試聴

メールはこちら


link

play for japan

酒ト飯 イイダ

最近の記事
最近のコメント
最近のトラックバック
カテゴリー
アーカイブ
リンク集
カレンダー
Sun Mon Tue Wed Thu Fri Sat
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
<< December 2018 >>
プロフィール
検索
管理者ページ
RSS1.0
Atom0.3
<< コヤマリョウのSKY(サブカルクソ野郎)/テレビについて〜テレビっ子の生態〜 | main | 社長の「これでも聴けば」Vol.111 >>
エセWebデザイナーへの道:第4回(更新履歴を作る)


エセWebデザイナーへの道

はーい、構成のカネコです。
遅れてすいません。第4回のこの企画になります。
まぁ全然働いてないわけじゃないんですよ!
リスナーや、ブログチェックしてくれてる人は分かっていただけていると思いますが、
「radioDTM配信200回記念イベント特設サイト」
のオープンをしました!!イェイ!



既にみてくれていると思いますが、この特設サイトは、前回のこの企画的に説明しますと、
ヘッダーの下に、2段の段組があるタイプになります。
これはhomeのページと比べると楽なもんですね。
(実はhomeのページを作る前に、すでに特設サイトの土台は完成させていたりしてます)

なるべく分り易く、清潔感のあるイベントサイトを目指してます。
ラインナップもバナーっぽいレイアウトにして、
徐々に増えていく楽しみを感じて貰えればと思ってます。
(イメージは、本棚に名著の背表紙が並んでいく感じ!)

ってことで、ブログは遅れてますが、radioDTMのホームページ環境は、日々進化してます。
今回はその「日々の変化」を分り易くする。ということがテーマでもあるのでよろしく!



さーて、まずどんなコーナーかと言いますと・・・
このコーナーではradioDTM企画構成のカネコが
立派な"エセWebデザイナー"として成長していくまでの過程を
毎週お届けします。

毎週テーマ(課題)を自らに課し、
それを克服していく過程と報告をしていきます。

*あくまでド素人が試行錯誤している様を書いていくため、
 間違いなどが多々あると予想されます。
 そういう場合は、コメント等で、ご指摘いただければ幸いです。

ってことです。まずはこのコーナー・・・

今週のお道具!!!

毎週Webをデザイン、編集、更新する上で
役立つであろう便利グッツを紹介するミニコーナーです。
今週の"お道具"はこちら・・・

カメラ!!!!

前回は「画像編集・制作ソフト」を紹介しましたが、
今回はその画像の元を揃えるための必需品である、カメラをピックアップ。
写真によるイメージはホームページにとって非常に強力な武器になります。
まぁ「百聞は一見に如かず」とは良く言ったもので、
どんなに文章で説明しても、実物のイメージは伝えにくい。
でも写真なら一発で伝わる力があります。

また、写真をたくさん色鮮かやにレイアウトするだけで、
サイトの持つ印象が変わるはずです。
カネコの好みとしても、写真を品よく上手に使いこなすサイトは大好物で、
我々のサイトも目指したいところではありますね。

そんなカネコが使用しているカメラはこちら・・・



Canon EOS Kiss Digital N

所謂「デジイチ」と言われる品。
社長の家に眠っていたものを安く譲っていただきました。
眠っていただけあって、結構年代モノではありますね。
(発売日は2005年2月らしい)

でも、カネコの個人的な見解としては、
古くても一眼レフカメラはやっぱり良い!
その理由は、
1:レンズがデカいし、選べる。
2:絞り、シャッタースピード、露出が細かく設定出来る。

こんなところでしょうね。
昔は大きいサイズの写真が撮れるとか、言われてた気がしますが、
ぶっちゃけると今ではコンパクトデジカメでもかなりの大きさで撮れるので
そんなにこだわらなくていい気がしますし、
Web制作の場合はRAW現像は関係ないですけど、
やはり上に上げた2つのポイントは一眼レフカメラが一番ですね。

デジイチって型が古くなると、がくっと値段が落ちるんですが、
そうとう最新型の新しい機能を使いたいという人以外は、
型落ちのデジイチを一つもっておくのは手だと思います。
(*ただ、最近のデジイチは写真のみではなく動画撮影の機能も含んでいるため、
    動画を撮りたいという人は、やはり最新型の購入をオススメします)

さぁ、ここまで全4回のお道具をまとめると・・・
●PC
●ホームページ制作ソフト
●画像編集・制作ソフト
●カメラ


以上の4つがあれば、かなりのホームページが作れると思います。
今回のカメラに関しては、正直、iPhoneとかのカメラでも十分だと思いますし、
編集ソフトだって、無料でそれなりに使えるソフトも探せばあります。
あとは根気とセンスだと思いますので、皆さん、僕と一緒に頑張りましょう!!


・・・ってことで今週のお道具はこれで終わり。
さぁいよいよ本題です!

ということで今週の課題!!!
ひとつのボックスだけをスクロール出来るようにする!(=更新履歴を作りたい)

所謂「What's News」ってやつです。
Web業界では(たぶん)What'sNews=更新履歴を指します。
でもって実はもう作って運営しちゃってます。(↓図1)


はい出来ました〜ってことで終わらせてもいいんですが、
ここまでに至る経緯は結構苦労しました。

この更新履歴を作る上で、前回も紹介したCSSによる「段組」が活用されてまして、
実は段組によるブロックは、ブロック内に収まり切らない情報量の場合、
「上下にスクロールさせる」という機能が選ぶことが出来るのです。
それを利用して作ってみたら、角丸のボックス全てが適用されてしまいました。

・・・いやいや、そうじゃないがな。
俺がやりたいのはこういうことじゃい。(↓図2)


うん、これですね。
そこで考えられることは、やっぱり「段組」によるレイアウト。
要するに、
「スクロールさせたい部分と、そうでない部分を段組で分ければ良い」
ってこと。


そこで、実際に組んだ段組はこんな感じ(↓図3)




この【A】【B】【C】を上下に組んで、【B】のみにスクロール機能を適用。
あとは【A】+【B】+【C】をまとめて【news】というブロック内に収納すれば
更新履歴の出来上がりってわけです!!

・・・でもこのやり方は、かなりアナログな方法をとってまして、
実はもっと効率的な方法論があります。
それは「php」というもプログラミンを利用したもので、
「WordPress」などのオープンソースを使った自動反映のシステムです。
まぁ僕は全然詳しくないので、今後勉強していきたいと思いますが、
いま現在運営されている多くのホームページで採用されているシステムで、
簡単にいうとブログみたいなもんです。
記事を書くと、予め設定していた箇所に、記事のタイトル・公開日時などの
指定した情報を自動的に反映してくれるというもの。
・・・いずれはこれを利用したい。
今はいちいちDreamWeaverで更新情報をタグで書き込んで
それをサーバーにアップするという手動方法をとっていますカネコです。
頑張ります。


ってことで今回は終わり。次回の課題!!!
サイトの軽量化に挑む!

「重いぞradioDTM!」ってな感じなサイトなんで、次回は軽量化がテーマ。
さぁ、カネコはこの課題をうまくクリアできるのか??
来週の更新を乞うご期待!!!

【構成カネコ】
JUGEMテーマ:インターネット
Posted by : radioDTM | エセWebデザイナーへの道 | 02:45 | comments(0) | trackbacks(0)
コメント









この記事のトラックバックURL
http://blog.radio-dtm.jp/trackback/982894