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

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に参加出来ることになりました。作品作りが思ったより時間がかかってしまい、コーディングコンテストの課題提出が出来ませんでしたが、予習も兼ねて当日までには完成させようとつもりです。