WEBサイトリニューアル

2011年2月にlogwはオープンしました。来月には1年を迎えます。1年を迎える前にWEBサイトのリニューアルをしてみました。リニューアルしたのは単純に自分で1から作成してみたかったからになります。

テンプレートを作ってみたかった

自分で一度オリジナルテンプレートというのを作成してみたかったというのがあります。今までWordPressのオリジナルテーマを作ったことがないので、初めて作ってみました。実際にやってみ思ったのはちょっと慣れるまでは大変かなと思いました。

HTMLを組むまで

デザインをしてHTMLを組むまではそんなに時間はかかりませんでした。HTML自体の調整を考えると合計で4時間程度でできました。PSDデータをHTMLにしてCSSを組み込むまではそんなに時間はかかりません。この変は普段からサイト制作をしている人ならおそらくもっと早くできるとこだなと思いました。

PHP適用まで

HTMLから実際にPHPへ適用させるまでがちょっと苦労しました。参考サイトとしてWordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボックスを見ましたが、9のループあたりで頭がちょっとパニックになりました。

実際に適用して確認して修正など重ねるとかかった時間はデザインとは別に5時間程度かかったかと思います。これはHTMLにして実際に反映させてみてなんか違うと思ってさらにCSSの調整などをしたからでもあります。

教えてもらって実際に適用

このテンプレートを作成している時、WebクリエイターボックスのManaさんにスカイプで少し疑問に思ったこと聞いたり、コードでmoreタグを使ったときにページのURLになるやり方を教えてもらいました。これであっているかなど間違っていないかなどを教えてもらいました。

style.cssの階層間違い

実際に適用して一番最初プレビューで見たとき、見事に何も反映されていませんでした。header.phpに書いたコードは以下でした。

<?php bloginfo( 'stylesheet_url' ); ?>

僕はスタイルシートは基本的に『cssディレクトリ』を作ってその中にいれています。上記のコードは『themeフォルダ直下のstyle.css』を読み込むためのもので僕は知りませんでした。そのとき知りました。そのため、cssフォルダに入っているstyle.cssだけをthemeフォルダ直下に移動しました。コードを変更すれば『cssフォルダの中のstyle.css』を呼び出すこともできます。

<?php bloginfo('template_directory'); ?>/css/style.css

上記のコードにすると、themeフォルダの中のcssフォルダの中のstyle.cssを適用させると言うことになります。個別にCSSを適用させたい場合は使える設定です。

海外と日本の考え方の違い?

海外のテンプレートというのはimagesフォルダに全部の画像があり、CSSもstyle.cssだけしかないです。今まで僕が使っていたテンプレートもそれだけでした。てっきりWordPressではstyle.css以外は使えないのか?とかimagesフォルダの中にフォルダを作っても駄目なのかなと勝手に思っていたら、単純に海外ではフォルダ分けをしたりスタイルシートを分けるという習慣?がないだけでした。

サイドバーは広告とリンク

元々このブログは個人的な記録用がメインですが、サーバー代やドメイン代はサイト内で稼げたらなと思っているので、サイドバーには広告や普段お世話になっている方のリンクなどを貼らせていただきました。

デザインについて

新しいデザインは今までとは違います。今までのデザインは元々が海外の無料テンプレートでもあったのですが、少しくらい青系統の色でした。

今回はさらに暗い無彩色をメインに使っています。無彩色を選んだのは元々次のデザインをするときはシックな感じにしたいというのと、派手な感じは避けて落ちつきのある色にしたかったためになります。黒(#000000)は使っていません。

jQueryのスライドを使ってアイキャッチをおけるようにもしました。特にこの箇所はどうやって使用するか決めていませんが一つは確実に決まっていることがあります。それは追々わかっていけると思います。

リンクの色について

リンクの色も当初は黒などの色でしたが、誰が見ているのかわからないサイトです。ブラウザのデフォルトのCSSにもあるようにリンクの色=青という事もあり、リンクの色は青系の色にしました。リンクの色はGoogleと同じ色にしました。

サイドバーについて

以前のデザインは、サイドバーが広告とカテゴリでした。今回も変わりません。前のデザインはカテゴリが非常に小さく見づらかったため、今回はカテゴリが見やすいようにしました。