CSSフレームワークをWordPressに組み込めるのか

この記事が良ければ、ぜひシェアお願いします

CSSフレームワークに関する記事HTML Kickstartを試しに使ってみた記事を以前投稿させて来ましたが、HTML5+CSS3+Javascript(jQuery)を盛り込んだCSSフレームワークの場合、WordPressにデフォルトで組み込まれているものとバッティングするのではないかと思い、私としてはWordPressのテーマにして使うのは二の足を踏んでいました。

個人的には『HTML Kickstart』が非常に使いやすくて好感触だったりするのですが、こちらのサイトにWordPressに組み込んだ時にちょっとした苦労があったことが備忘として書かれていました。

参照元 : 超個人的な備忘録:Html KickStartをWordPressテーマに組み込みtheme my loginを有効にするとIEではエラーメッセージが表示されない

その一方で、大人気の『Twitter Bootstrap』を活用するためのツールが色々と生まれてきているようです。すでにWordPressのテーマ化しているものも複数あるのには驚きました。Colissさんで紹介されていました。

参照元 : Bootstrapをもっと活用するためのカスタマイズツールやリソースのまとめ

WordPressでCSSフレームワークは使うべきか

WordPressのプラグインを使っていて、他のプラグインとバッティングして正常に動作しないケースに遭遇した人は珍しくないとは思いますが、やはりCSSフレームワークを使うと何かしら相性による不具合は出てくるのではないかと、個人的には考えています。とは言え、CSSフレームワークの便利さは捨てがたいですよね。

私も自分でオリジナルテーマを作ってみて、メニューも縦/横、各見出しタグのデザイン、レイアウトの調整など、元々デザイナーではない人間にとっては大変な作業だと実感しました。jQuery系のUIコンポーネンツも装備されていることも、サイトを作っていく上では非常に便利ですよね。

ということで、試しにテーマを作ってみようと思います(笑)需要があれば公開させて頂きます-。

2012/03/07追記

『HTML Kickstart』をベースにWordPressのテーマ化すべく取り組んでみましたが、まずレイアウトを組もうとすると基本的にGridがクラスセレクタなので、IDセレクタなどとの優劣が思ったように組めずに却って苦労してしまいました。また、色々なUIコンポーネンツもクラスセレクタで書かれているので、デザイン性を求めに行こうとすると『HTML Kickstart』に組み込まれているものとバッティングして、打ち消されてしまい思うように表示されなかったり。

配色がほとんどないので、CSSフレームワークはどうしてもデザイン性が似たり寄ったりになってしまうのがよく分かりました。割り切って「デザインは捨てるぜ!」くらいの気概がないと、ちょっと使いづらいかもしれないと思いました。自分はレイアウトは全てIDセレクタでピクセル単位で指定してラッピングしてしまっているので、慣れるとかえってその方が使いやすかったりするんですよね。だいたいのCSSフレームワークは960pxあたりを標準としていたりしますし。

とは言え、jQueryを必要とするUIコンポーネンツが標準で使えるのは便利だと思います。WordPressだとどうしても上手く動かないものもあったりしますので。最近思ったのですが、結局WordPressはCMSパッケージとは言え、デザイン部分も凝っていたりするので、どうしてもCSSフレームワークやjQueryプラグインとバッティングしたりするんですよね。

ということで、テーマを作成するときは基本に忠実にやっていきたいと思います。とは言え、ちょこちょこミスは見つかってはいるんですが(笑)、自作テーマSimpleFeatures(Advanced)がWordpressテーマ作成のフレームになっているので、さらに拡張させていけばよいものができるかもしれないと思っています。

スポンサーリンク

この記事が良ければ、ぜひシェアお願いします

もぐ
年齢 : 30代半ばの1児の新米パパ。ITネットワークから始まり、WEBディレクター、WEBシステム系のプロマネ、データ分析など色々やってるエンジニアです。WordPress、Webサービス構築、BIツール、IoTなどがトレンド。新しくて面白い仕事募集中。
スポンサーリンク