かちびと.net

のシロさんがWordpressで構築されたサイトを多数載せた、WPデザインギャラリーを公開されました。最近HTMLとCSSで作られた国内サイトを集めたギャラリーサイトを探していた所だったので、これは嬉しい限りです。

Wordpressで構築されたサイトに限られますが、数も多くデザインの良いサイトが集められていますので参考になります。

今は自分専用のギャラリーサイトを作っています。きっかけは以前Twitterでちょっと話題になった「俺専ブックマーク」の存在。ブックマークは自体ははてブで間に合ってるのですが、やはりサムネイル付きでずらりと並べたい。で、だんだんと数を増やしコンテンツを充実させて一人でニヤニヤしたいとです。

せっかくだから勉強も兼ねてHTML5とCSS3で作ろうと思ってます。前回のcss nite LP９の課題（提出はしてないけど・・・）をやっていたとき本当に面白かった。とくにCSS3を使って表現出来る幅は広がったんじゃないでしょうか。ただブラウザの実装状況が十分ではないのが残念。CSS3自体も草案段階でこれから色々と変わるでしょうし。早く実践レベルで使えるようにならないかなと願うばかり。

ただ今回作ろうとしているのは自分専用コンテンツなので、一番CSS3の実装状況の良いwekit系ブラウザにしぼって作ってみようかと思っています。が、いざ作ろうとするとCSS3の良さを生かすというか、別にいままで通りのCSSで十分というようなデザインしか出来ない。そう思うとLP９の課題は良く出来てたなと、素人のくせして上から目線の感想ですいません。

いろいろ試しながら、夢の自分専用ブックマークを目指して頑張ります。

アップされたというかアップ出来たというか。ホントに時間がかかってしまいました。

HitosashiYubi

今回もCMSはa-blogcmsを使わせていただきました。ちょびっとだけ上達したかな？

問題は各ブラウザでの表示。IEでは多少のズレはあるものの、レイアウト自体は崩れていないようで。

ホット一安心していたら、アップ後に発見してしまいました。

現在wordpressでブログ（またブログですよ・・・）を作っていますが、学科の皆もwordpressでブログを作ろうとする動きが出てきたので、自分がやってる作り方や参考にしているサイトを書いとこうと思います。

といっても多くのサイトで紹介されているとおりで、基本的には既存のテンプレートをいじるのが一番早いかと思います。自分がいじっているのは最初から用意 されているdefaultのテンプレートと、vicunaです。vicunaは参考になるので、ダウンロードしてテーマに加えま しょう。

■最初の頑張りどころ

まずはwordpress.日本語を見て、wordpressがどういった仕組みで出来ているのかを知りましょう。でもここで全てを理解する必要はありません。なんとなくでいいんです。

「なんかheader.phpとかfooter.phpに分けるらしい」

「＜?ｐhp ~ ?＞みたいな書式をHTMLに埋め込んで作るんだって。よく分かんないけど。」

って程度で大丈夫です。でも必ず一度は目を通しておきましょう。

後で実際に既存のテンプレートと照らし合わせながら見たり、いじったりすることで自然と理解が出来てくると思います。

■次の頑張りどころ

defaultなどのテーマの中に入っているindex.phpなどを開くと、テンプレートタグが沢山出てきてうんざりするかも知れませんが、ここは踏ん張りどこです。

配布されているテーマの中身はとても複雑に見えますが、これはウィジェットに対応するためや、管理画面でブログタイトルなどを変更した際に、その変更をブログに適用させるための記述が多くなっているだけです。

自身が使う為のオリジナルテーマにはこれらの機能はほとんど必要ないかと思います。そのためいざオリジナルテーマを作ってみると、配布されているテーマに比べ、index.phpなどの記述はかなりシンプルになります。

なのでここで無理だと諦めず、とにかく既存のテンプレートのテンプレートタグを適当に消しては付けてを繰り返し、その度にどう変化しているのか確認する、これを繰り返しましょう。個人的にですがCMSの導入ってコツを掴むかどうかだと思います。複雑な構造になるとその先の知識が必要になりますが、オーソドックスなブログであれば、一度コツを掴むとそれらしい形のものは出来ると思います。

■その次の頑張りどころ

既存のテンプレートをいじり倒してなんとなくでもコツが掴めたら、次は自分のオリジナルテーマのHTMLにテンプレートタグを埋め込んでいきましょう。その際のポイントを紹介します。

まず最初に作るオリジナルテーマはシンプルなものにしておいた方が無難だと思います。シンプルっていうのはブログ全体のデザインの話ではなく、レイアウトや構造の話です。基本的な2カラムレイアウトで、サイドバーにはエントリーやらアーカイブのまとめがあり、残るもう一方のカラムには記事本文が表示されるような、ようするにごく一般的なブログの構造です。

理由はdefaultのテーマやvicunaのテーマが、この構造で出来ているからです。オリジナルテーマの構造をこれらと同じにしておくと、必要なテンプレートタグやそれを埋め込む箇所など、defaultやvicunaを見ればすぐに分かります。

例えばオリジナルテーマのサイドバーに用意したアーカイブ一覧の項目を動的にしたいと思ったら、defaultやvicunaのアーカイブ一覧の項目からテンプレートタグをコピペしてやればすぐに出来ます。同じように記事タイトルや記事本文に必要となるテンプレートタグをdefaultやvicunaからコピペしてくればOKです。

こうやって少しづつでも作業を進めていくうちに自然と理解ができてきます。また、PAOLOGさんのサイトにwordpressで簡単なブログを作る方法が書いてあり、大変参考になります。すごく解りやすいので参考にしてみて下さい。

自分もまだ製作途中ですが、上に書いたようなやり方を繰り返し、色々なサイトを参考にしてほぼ出来上がってきました。CMSがちょっとでも使えるとサイト制作が楽しくなりますよ。

 例えばページ幅1000ｐｘに設定していたとして、ブラウザのウインドウ幅が1000ｐｘ以下になったとき、コンテンツの上にbodyに設定した背景色や背景画像が食い込んでくるという現象が起きました。

この現象が起きたときはCSSでbodyに対してmin-widthを設定すると防ぐことが出来ます。

body {

min-width:1000px;

}

お久しぶりです。一ヶ月以上開いてしまいました。

この間何もしてなかった訳ではなく、自分の作品やら課題の作品やら作っていました。上の写真は春休み中の集中授業で作った自分のポートフォリオサイトです。海外サイトに影響を受けている部分が多く、インパクトのあるデザインと、作品をサムネイル形式でできるだけ大きく見せれるようにしました。

一部にCSS3を使っています。IE6もターゲットブラウザに入れているので、CSS3が適用されなくてもさほど影響ないような部分でちょこっとだけ。なので大したプロパティは使ってないですが。ブログもこのサイトの中で更新して良く予定です。完成はしてますが公開はもうちょっとだけ先になりそうかな。

CSS3と言えば今月東京で開催されるCSS  Niteに参加出来ることになりました。作品作りが思ったより時間がかかってしまい、コーディングコンテストの課題提出が出来ませんでしたが、予習も兼ねて当日までには完成させようとつもりです。

現在製作中の友人のブログです。写真には全体像が映ってませんがTopページのデザインはこんな感じです。まだちょこちょこデザインの部分を手直しして来週からマークアップ出来ればと思っています。詳しいコンセプトなどはまた後日。

とっくに明けましたがおめでとうございます。学校も始まり新たな生活がスタートしました。今年は去年の反省を生かした年にしたいと思います。

「とにかくやってみる」

これをキーワードにして今年を充実した年にしたいと思います。

ということでさっそくお友達のサイトを作らせて頂くことになりました。将来はカメラマンを目指して日々カメラの練習をしている同じ学校の生徒で、自分のギャラリーサイトが欲しいそうです。