読者です 読者をやめる 読者になる 読者になる

Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

【WordPressにも共通するCSSカスタマイズの王道】

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

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

 
 
などといった努力が欠かせません。
 
 
でも、皆、仕事を抱えています。

じっくり腰を据えて勉強するには、それなりの覚悟は必要でしょう。
 
 
当然、なるべく効率的に学びたいと考えますよね?
 
 
学ぶことなんて腐るほどあるのだから時間は無駄にしたくないはずです。
 
 
「何からやったらいいのか?」
 
 
それはHTMLとCSSです。
 
 
JavaScriptとかPHPはその次です。
 
 
HTMLとCSSはプログラミングに共通する
基本的な作法やルールを教えてくれます。

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


↓↓↓「自分で作れる力」を身につけたいあなたへ↓↓↓

【1】CODEMYマンツーマンレッスン

codemy-lesson.office-ing.net
⇒30分無料相談あり
⇒知りたいことだけ学べる個人レッスン

▼レッスンの記録をご覧いただけます。
https://www.facebook.com/codemy.lesson/
 

【2】プログラミング講座CODEMY

office-ing.hatenablog.com
⇒動画と個別添削で学べるオンラインレッスン

自分でホームページやプログラムの制作やカスタマイズをできるようなりたい方が
業種・経験・地域を問わず参加されています。

講師実績

業界大手リクルート社が運営する総合学習サイト「おしえるまなべる」
2015年、パソコンジャンルで1位評価
2016年9月「ホームページ作成のツボとコツがゼッタイにわかる本」出版

講師が執筆した本が発売されました!

『ホームページ作成のツボとコツがゼッタイにわかる本』
定価: 2,400円(税別)出版社:秀和システム
 
Amazon購入ページはこちら!