【WordPressにも共通するCSSカスタマイズの王道】 - Webサイト専門プログラマの言いたい放題

f:id:wp-lesson:20161029004611j:plain

CMSのカスタマイズは、難易度に応じてできることとできないことが分かれます。
　
　
テンプレートやプラグインが用意してくれるメニュー画面を操作することで
かなりのカスタマイズが叶います。
　
　
しかし、それらは全て他人が用意した「想定」の範囲内でしかありません。
　
　
他人が想定していない「私の」理想とするカスタマイズを形にするためには
　
　
・使っているCMSの仕組みを学ぶ
・HTMLやCSS、PHPなどを学ぶ
　
　
などといった努力が欠かせません。
　
　
でも、皆、仕事を抱えています。

じっくり腰を据えて勉強するには、それなりの覚悟は必要でしょう。
　
　
当然、なるべく効率的に学びたいと考えますよね？
　
　
学ぶことなんて腐るほどあるのだから時間は無駄にしたくないはずです。
　
　
「何からやったらいいのか？」
　
　
それはHTMLとCSSです。
　
　
JavaScriptとかPHPはその次です。
　
　
HTMLとCSSはプログラミングに共通する
基本的な作法やルールを教えてくれます。
　
　
作法を知らずに難しいことに挑むのは、
兵法を知らずに武器だけ持って敵陣に斬り込むのと同じだと思います。
　
　
というわけで、とても大事なCSSですが、CMSで出来たウェブサイトのように、
１つ１つのテンプレートの役割分担や、CSSファイルなど理路整然と管理された
　
　
「仕組み化されたお城」
　
　
を、仕組みを壊さないように効率よくカスタマイズしていくためには、
　
　
「全体を見失わない書き方をする」
　
　
ことが大事です。
　
　
添付の画像は、私がウェブサイトを作ったりカスタマイズしたりするときに
いつもやっている作法です。
　
　
HTMLをきちんと階層化し、自分で名付けたidやclassを、
HTMLの階層順に沿ってCSSファイルに並べてしまいます。
　
　
そう、常にHTMLの構造を意識しながらCSSの「枠」だけを列挙してしまうのです。
　
　
そうすると、ディベロッパーツールで要素の検証をしたときに、
CSSを記述する場所が表示されるので、あとは流れ作業的に、
プレビューしながらスタイルを埋めていくだけです。
　
　
最初にしっかりと「枠」を漏れなく書き終えてしまうのがポイントです。
　
　
あっちを直し、こっちを直し、という行ったり来たりをしないためです。
　
　
そして最後に無料のコード整形ツールでインデントや改行をきれいに整えます。