cocoon をカスタマイズ
cocoon にはスキンがたくさん用意されています。スキンはサイトを統一したデザインで作成した着せ替えのようなものです。着せ替えですからスキンを適用することによって、サイトのデザインをがらりとかえることができます。用意されたスキンの中から、自分の頭の中で作成したいと考えているサイトのデザインに近いスキンを選ぶことになります。たくさんのスキンがありますので、試しにいろいろなスキンを適用してみることも楽しいものです。
スキンはホワイトラーメンを採用
ホワイトラーメンというスキンを選ぶことにしました。白を基調とした落ち着いたデザインです。私はyuji さんの「ブログ初心者でもできるCocoonカスタマイズの完全マニュアル」で紹介されているデザインがとても気に入っていました。このブログを参考にしながら、自分自身のサイトを作成し、カスタマイズしていきました。css のコピーアンドペーストを許可していただいているので、とても楽にカスタマイズしていくことができます。
カスタマイズは楽しい
cocoon はカスタマイズの自由度が高いので、自分が取り入れてみたい css があれば、それを自分のサイトに取り入れていくことができます。カスタマイズしていくのは、とても楽しいものです。
いろいろなサイトを見ていると、自分のサイトにも、このデザインを取り入れたいな、と思うことがあります。見出しのデザイン、目次のデザイン、リストのデザイン、ヘッダーメニューのデザイン、アピールエリアのデザインなどなど。やりたいことがたくさん出てきます。
そんなときは取り入れてみたいデザインと似たようなデザインの css が紹介されているサイトを検索して css を手に入れます。紹介されている css は、ほとんどの場合コピーアンドペーストを許可してくれています。こうして手に入れた css をテーマファイルエディタなどで、自分のサイトに貼り付けていくと簡単にカスタマイズすることができます。非常に簡単です。コピペだけでカスタマイズしていくことができます。
簡単に自分の思っていたカスタマイズができるので、だんだんカスタマイズにはまっていきます。カスタマイズの沼です。「あれもしたい」「これもしたい」と思うようになります。楽しくなってきます。自分の思っているとおりのサイトに仕上がってきます。「もっとこうしたい」「もっとああしたい」と思うようになります。またまた理想に近づいてきます。すごく楽しくなってきます。
css が反映されない
ところがある程度カスタマイズが進んでくると、思っているとおりの結果にならないことも出てくるようになってきました。きちんと css を貼り付けたはずなのに、デザインが反映されないのです。サイトの見た目に変化がないのです。キャッシュが残っているためかな、と思いキャッシュを削除してみますが、多くの場合、それで解決することはありませんでした。
テーマファイルエディタに書き込まれている css を一つ一つ確認していきます。いろいろなサイトから css をいただいているので、コードの書き方もまちまちです。自分でコードを書くことができれば、こんなことにはならないのですが、私は自分でコードが書けません。css について勉強したわけではありませんので、コードを見てもわからないことだらけです。それでも何回も見ていると「多分、これは○○をしているコードだな」とわかることもだんだんに出てきます。とにかくコードを一つ一つ見ていきます。繰り返し繰り返し見ていきます。すると「他の場所にもこれと似たようなことが書かれていた部分があったな」ということに気がついてきます。内容が重複しているために反映されていないコードを削除してみます。思うとおりの表示に変わっていれば成功です。同じ事をしようとしている css が複数あるために、後の方に置かれている css だけが反映されていたのです。
こんなことを繰り返しながら、自分の思い通りのサイトデザインを作り上げていきます。楽しみながら少しずつカスタマイズを繰り返していきます。他の方のサイトを回りながらも、これを取り入れてみたい、あれを取り入れてみたい、と思う日々でした。
スキンの設定を取りやめる
css のコードはよくわからないのですが、それでも少しずつ少しずつカスタマイズできてきました。
ところがそのうちにどうしてもカスタマイズできないことがでてきました。似たような css を探して貼り付けてみますが、それもだめです。思い切って該当する css を取り去ってみます。変化はありません。コードの順番を入れ替えてみて優先される順番をかえてみます。変化はありません。優先して適用されるようにコードに「!」をつけてみます。それでも変化はありません。
こんなことを繰り返しているうちに、少しわかってきました。「スキンが関係しているんだ」と。私にはスキンの仕組みについては、css 以上に、全くわかりません。スキンによって制御されていることは css でカスタマイズすることはできないようだ、ということがわかってきました。試しに cocoon の設定でスキンを外して「なし」にしてみると css が反映されました。スキンの側でデザインを制御しているのです。そのため css では変更できないようになっているらしいということがわかってきました。
スキンの設定を「なし」に
この段階で、最初に設定したホワイトラーメンのスキンをとりやめることにしました。スキンを使わずに一から自分でカスタマイズしていくことにしたのです。そうすればスキンのデザインに左右されずにサイトのデザインを変更できるはずです。自分が思っているようなサイトを構成できるはずです。そう考えて cocoon の設定でスキンを「なし」に設定しました。
一から自分で設定していくのは、大変な事のように思いましたが、実はそれほどではありませんでした。wordpress や cocoon をカスタマイズする css を紹介しているサイトは、山ほどあるのです。そうしたサイトの中から、自分が実現してみたい css をコピーさせていただき、自分のサイトに適用していきました。ところどころ、うまく反映されない css もありました。スキンを使用していたときと同様にコードを丹念に見直していくと、それなりに解決できました。いまだに css を書くことはできませんが、読むことはいくらかできるようになってきました。カスタマイズしたいパーツごとにコピーアンドペーストを繰り返し、ほぼほぼコピペだけでサイトができあがってきました。だんだんに自分のサイトが形作られていく、楽しい時間でした。
カスタマイズの沼を脱出
そこではたと気がつきました。「自分は何をしているのだろう」「目的はカスタマイズではなかった」と。カスタマイズの沼にはまっていることに気づいたのです。楽しいけれど、これではいけない。サイトをカスタマイズすることが目的ではないのです。情報発信が目的なのです。適当なところで、カスタマイズから離れなくてはいけません。本題に戻らなくてはいけません。
ある程度できあがった段階で、カスタマイズ作業は一時中止することにしました。本題である記事を書きながら、変更が必要なところが見つかったときに変更すればよい、と割り切ることにしました。
本当は記事が増えてこないとカスタマイズできない
記事が増えてくると、それまでは見えていなかった修正したいところが見えてくることがあります。それは記事がろくにない段階で考えていても仕方のないことなのです。
たとえば5つの記事が並んだときにどのようなサイトに見えるのかは、記事が1つしかないときではわからないのです。記事が1つしかないときには、関連記事の表示やページ送りの表示は見えないからです。こうした部分は記事が複数にならないと見えてきません。
また記事のタイトルや見出しが長い場合に、どのように表示されるかについても、実際に長いタイトルや長い見出しが登場してみないと見えてこないのです。こうした部分は、実際に出現したときに初めて目にすることができ修正することができるわけです。
ですから最初から完璧なサイトのデザインを実現することは、無理なことだったのです。そのことに気づき、適当なところでカスタマイズを打ち切り、記事を書くことに力を注ぐことにしました。
