Webを創る Page.17『ソースを検証』

ふと思い立って当サイトをリニューアルしました。
とは言っても、デザインを変えただけですが。

WordPressは【テーマ】と呼ばれるテンプレートが豊富です。
テーマにはそれぞれ特徴があり、好みにカスタマイズすることも可能です。
CSSやPHPなどの言語を覚えなくても細かくカスタマイズできるテーマも多くあります。
とはいえ、自分が気に入るまでカスタマイズするためにはやはりCSSは避けられず。。。

ちょっと復習

HTML

1年少し前にCSSに関する記事を書いてましたが、ちょっと復習します。

Webサイトを表示するのには【HTML(HyperText Markup Language)】という言語を使います。
世にあるWebサイトは、すべてこのHTMLが関連します。
HTML言語はタグと呼ばれる <p> や <img> などの<>でアルファベットを囲ったものを使って文字や写真を表示したり、色をつけたり大きさなどを調整したりできます。

ですが、ここで1つ問題が出てきます。
ページ内で何度も使うタグがあります。

文章の見出しを示す <h2> や、文章の段落を示す <p> 、画像を貼り付ける <img>などなど。
HTMLの場合、色や大きさの調整はこのタグごとに書く必要があります。
1ページ内でも何度も使うのに、新しいページ（ブログの場合は記事）を作るたびにこれらのタグが出てくるたびに色や大きさの指定を書いていては手間が掛かりすぎます。
それに、デザインを変えたいと思ったらすべてのページのタグを書き換えることになり、とても面倒くさい大変な作業になります。
そこで出てくるのがCSSです。

CSS

『HTMLはHTML本来の仕事である文字や写真を【表示】するために使おう。色や大きさなどのデザインに関する部分は切り離して考えよう。』
という概念で出てきたのが【CSS(Cascading Style Sheets)】です。

HTML内のタグに向けて、別ファイルに書かれたCSSからデザインをいじる命令を出すイメージです。

これによってHTML内のタグにいちいちデザイン指定を書く必要がなくなります。
さらに、デザインを変えたいときはCSSの方をいじれば全HTMLページにデザイン変更が反映されます。

PHP

補足的に。

『Wordpressやブログを使ってるけど、<p>や<img>なんて使ったこと無いよ？』
なんて方も多いと思います。

その昔はHTMLでコツコツ記事を書き、CSSでデザインをしたものをWebで公開するのが普通でした。
が、頭のいい人が【PHP(Hypertext Preprocessor)】という言語を使ってブログシステムを開発します。
これにより、HTMLやCSSを使わずにWebに記事を公開することが可能になりました。

WordPressやほとんどのブログはPHPで作られています。
【記事の入力画面はPHPで作られていて、ここから送られた情報がHTMLに変換され、そのHTMLのデザインをCSSが司り、その結果がブラウザに表示されて公開】されています。
（ちょっと省略した説明。）

ああ、思ったよりも長くなってしまった。

検証

ようやく本題です（汗）
WordpressのデザインをいじるにはCSSが必要という話でした。

設定したテーマのCSSファイルはメニュー一覧から【外観⇒テーマの編集】でたどり着けます。
そこに style.css というファイルがあるので、それをクリックして開きます。

ここからデザインをいじれるわけですが、1つ問題があることを覚えておきましょう。
それは、ここでの編集は【テーマが更新されると失われる】ということです。
それを避けるために【子テーマ】を作るなどして対処するんですが、それはまたまた話が長くなるので今回は割愛。

今回は、CSSをいじるときに一番重要な【どこをいじればいいの？】問題を考えます。

方法

たとえば『見出しのデザインを変えたい』と思ったとします。
必要なのは【ページのどこにある見出しなのか】を確認すること。
本文中なのか、ウィジェット（サイドバー、フッターエリア）なのか。
本文中の見出しであれば、本文中の見出しに命令を出しているタグをCSS内でいじることになります。

Google Chromeの場合、

  1. 目的のページをブラウザで表示
  2. ページ上で右クリック
  3. 【検証】をクリック
  4. ウィンドウが開く
  5. マウスカーソルをタグに合わせると対応する部分が反転するので、それを使って目的のタグを探す

という方法を取れます。

CSSのタグ探しはこれが楽。

akimさん(@akim.is.bassist)が投稿した動画 –

こうやって探した後、style.cssや子テーマでデザインをいじります。

FireFoxにも同じような機能があります。
（IEや他のブラウザはほとんど使わないのでわかりません。ごめんなさい）
これにより、CSSを効率的にいじれるようになります。
Webを創る Page.15『見出しタグ～CSS』も参考にしてみてください。

‡ポイント‡
CSSでデザインをいじる。
いじる場所は【検証】で探す。

読んだけど、よくわからない。
PC作業が苦手なので作ってもらいたい。
なんていうアーティストさん、Y-T-WではWebサイト制作も承っております。
まずはお気軽にお見積からどうぞ。
Webサイト制作の発注・お見積≫




コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です