Twenty TwelveのCSSをカスタマイズする

WordPress(以降WP)をインストールし基本的な設定後、始めての投稿を記載しWEBでプレビュー。
しかし画面がWPを勉強した各種サイトと比較するとあまり見栄えが良くないのでstyle.cssのカスタマイズを決意しました。

カスタマイズ方法を色々ネットで調べ試行錯誤を繰り返した結果、TwentyTwelveの画面の変更はほぼ思い通りにコントロールできるようになりました。
色々情報を提供して頂いた方々にこの場を借りて感謝させて頂きます。ありがとうございました。

CSSのカスタマイズで判った事を下記構成で説明させて頂きます。

1. Twenty Twelveのカスタマイズ方針
2. style.cssの修正や確認を行う時の注意点
3. 具体的なTwenty TwelveのCSSのカスタマイズ事例

１.Twenty Twelveのカスタマイズ方針

私のWPの勉強はPCのローカル環境の中にWP環境を構築し基本を学びました。

この中でWPの基本を教えてくれたのが『バズ部』というサイトの『XAMPPを使ってローカル環境にWordPressをインストールする方法』という記事です。

この記事は画面がシンプルでドキュメントを読むには大変読みやすいサイトです。
そこでStyle.cssのカスタマイズ目標は『バズ部』のような読み易い画面を目指しました。

シンプルな画面のポイントは下記になります。

・背景は上部の青い背景のみ

・ヘッダーは画面一杯に表示

・投稿記事部分はなるべく大きくする

・ウィジェットエリアは右側

以上の基本方針の元にTwenty Twelveのstyle.cssの修正を開始しました。

２、style.cssの修正前に行う事と修正時の注意点

CSSは Cascading Style Sheet (カスケーディング・スタイルシート)の略で、style.css はWordPressのコンテンツを表示させるときに使われます。
このCSSの修正には幾つか気を付けなければならないことがあり、これを知らないとCSSを修正しても画面が変わらない！等の問題が起こります。

下記にCSSをカスタマイズする際に気を付けなければならない事を解説します。

2-1.style.cssの修正前に行う事

style.cssを直接編集するとTwentyTwelveがバージョンUPされた時に修正個所が置き換わってしまいます。

これを防止するのがWordPressの子テーマと言われる仕組みです。

下記にその作り方を解説します。

①子テーマフォルダを作成する。

現在のTwentyTwelveの各種ファイルは＜WordPressのサイト名＞→wp-content→themesの下にあります。

ここに『twentytwelve_child』というフォルダーを作成してください。

②style.cssをコピーする

twentytwelveのフォルダの中にあるstyle.cssをtwentytwelve_childフォルダにコピーして下さい。

③twentytwelve_childフォルダにコピーしたstyle.cssをEmEditorで開いて下記の修正する。

このファイルの先頭に記述されている/*～*/のコメント文章を変更します。

＜変更前＞

/*
Theme Name: Twenty Twelve
長い定義文なのでここに記載している構文以外は省略してあります。
*/

＜変更後＞

上記の『Theme Name: Twenty Twelve』を下記に書き換えます。

/*
Template:twentytwelve
Theme Name:twentytwelve_child
*/

上記は

・このCSSはテーマ名がtwentytwelve_childです。

・このテーマはtwentytwelveのテンプレートを使います。

(ここにないphpファイルはtwentytwelveのphpファイルを使いますという意味です)

という宣言文です。

よって上記の作業で＜WordPressのサイト名＞→wp-content→themesの下に

・twentytwelve

・twentytwelve_child

上記の2つのテーマができた事になります。

④作ったtwentytwelve_childのテーマを有効化する。

ダッシュボードの『外観→テーマ』を表示し今、作ったテーマを有効化をしてください。

以上で、twentytwelve_childにあるstyle.cssが優先的に利用されるようになります。

2-2.CSSファイルの修正結果の確認には『スーパーリロード』を使う。

CSSの修正を試みた始めた時に突き当たった壁は『修正しても画面が変わらない！』でした。

理由はブラウザがキャッシュ上のCSSファイル(過去の物)を見る為に修正結果が反映されないという問題です。

これを解決するのが『スーバーリロード』で、これを使うと最新のCSSを読み込んでくれます。

使い方は表示された画面で下記コマンドを使います。

・Shift+F5：Google Chromeの場合

・Ctrl+F5：Windows Internet Explorerの場合

・Ctrl+Shift+R：Firefoxの場合

2-3.CSSの修正は一番下に入れる事と、記述上の注意点。

Twenty Twelveのsytle.cssは基本部分が1,767行あり、それを全部理解して修正するのは大変です。
CSSは、同じ項目の定義は複数個所あっても良く、下にある方が最後に修正されたスタイルになります。
よってカスタム設定は1,767行目以降から、修正したいスタイルのみを記述するのが基本になります。

また記述上の注意点は『指定間違い』があっても、エラーが出るのではなく、間違いの所は無視されるだけです。例えば

＜正しい記述＞

 #page.hfeed.site  {margin:10px -10px 0 -10px;}
 .site-header {margin:0 -100px 0 -100px;padding:0 0 0 150px;}

＜間違った記述>

1行目の終わりに『;』を間違って入れたケース

 #page.hfeed.site  {margin:10px -10px 0 -10px;};
 .site-header {margin:0 -100px 0 -100px;padding:0 0 0 150px;}

CSSの基本フォーマットは変数名｛CSSコマンド;CSSコマンド；｝になります。
上記サンプルの問題点は行の終わりに『;』を余分につけてしまった為に、次の『.site-header』が『;.site-header』になってしまう為に、そんな変数名はないので、このコマンド行は無視されます。

指定したコマンドが思い通りに反映されない場合は行の終わりや、コメントの開始・終了、及びHTMLで表現した時の前後関係（p要素に入るクラス要素等）を慎重にチェックしてみてください。

いずれにしても修正してたらエラーがでて『どうしよう！』等の事態は起こりませんので、色々試して見てください。
頭の体操になりますよ！

３.具体的なCSSのカスタマイズ事例

Twenty Twelveは下記のエリアから構成されており、各エリア個々に名前がついています。
この名前(変数名)を指定して｛  ｝の中にCSSコマンドを記述してスタイルを記述します。

＜Twenty Twelveの画面構成＞

3-1.TwentyTwelve構成エリアの確認方法。

まず始めに上記で解説した各エリアの現状がどうなっているのか？を知るために、各エリアに色を付けたり、枠で囲み、エリアがどうなっているのか？を確認しましょう。

①背景に色を付けます。

背景に色を付けるのは、WPのダッシュボードの『外観→カスタマイズ』を選択し、表示された画面で『色』を選択します。
この事例では背景色を青にしてください。
選択後、『保存して公開』を必ず実施してください。

『最初の投稿』記事を呼び出して、画面の右上にある『プレビュー』ボタンを挿入してください。
ブラウザにタブが追加されて、記事が表示されます。

画面の周りが青色になったのが判ると思います。この画面を以降（表示画面①）とします。

②画面を構成する各エリアのカラーや枠をCSSで指定します。

CSSファイルを呼び出します

・style.cssの一番下に下記コマンドをコピー&ペーストし、ファイルの更新をしてください。

/* 以下はカスタム設定 **********************************************/
/*******************************************************************/
/* 各エリアのカラーや枠指定と文字エリアの設定 */
/*******************************************************************/
/* サイトの背景色を灰色にする */
.site {background: #f7f7f7;}
/* ヘッダーエリアの背景色を白にする */
.site-header{background: #ffffff;}
/* コンテンツエリアを白にして枠をつける */
.site-content {border:1px solid #c0c0c0;box-shadow:1px 1px 10px #c0c0c0;background:#ffffff;}
/* ウィジェットエリアを白にして枠をつける */
.widget-area {border:1px solid #c0c0c0;background:#f7f7f7;}
/* フッターエリアを白にして枠をつける */
footer[role='contentinfo']{ border:1px solid #c0c0c0;background:#ffffff;}

表示画面①で、Google Chromeの場合はShift＋Enter（スーパーリロード）を挿入してください。
各エリアが枠で囲まれて、表示された筈です。

Twenty Twelveの画面構成と、上記CSSを見比べてください。
上記サンプルは各エリアに枠と色を付けました。

CSSコマンドのbackground:は背景色、border:は線を引くコマンドです。

以降、この画面の設定を色々変えていきます。

3-2.Twenty Twelve構成エリアのサイズや位置調整

style.cssの内容を下記に変更して下さい。

/*******************************************************************/
/* 各 表示エリアのサイズと位置調整 */
/*******************************************************************/
/* 背景エリアを上部の10pxのみにする */
#page.hfeed.site {margin:10px -10px 0 -10px;}
/* サイトエリアのサイズ調整 */
.site {max-width: 1600px;overflow: hidden;}
/* ヘッダー領域を横幅一杯に広げる */
.site-header {margin:-1% -10% 0 -10%;padding-left: 14%;}
/* 記事エリアの描画位置の設定 */
.site-content {margin-left:2%;padding:3% 6% 0 6%;width:63%;}
/* ウィジェットエリアの描画位置の設定 */
.widget-area {width: 20%;margin-right:1%}
/* フッターエリアの描画位置の設定 */
footer[role='contentinfo']{margin: 0 0 0 3%;padding:0 0 0 1%;}

どうですか？かなり画面がスッキリしてきたと思います。

【各変数の解説】

   #page.hfeed.site：

上記は背景をコントロールする為の変数で、｛margin:10px -10px 0 -10px；｝は、上を10px,右を-10px、下を０、左を-10にしろ！という事を示しています。-10とは、基準の位置より-10だけ広げる！事を意味しています。

.site {max-width: 1600px;overflow: hidden;}

上記はサイトの幅を1600pxにする事により、画面いっぱいに表示しろ！という事を表しています。

 以降の各エリアは、

・marginはエリア自体の位置やサイズをどうするか？（マイナス指定可）

・Paddingはエリア内の文字領域をどうするか？（マイナス指定不可）

を指定しますが、pxではなく総て%で指定しています。

%指定の理由はPCやタブレット及びスマートフォンでは画素数が異なりますが、%で指定するとその画素数によって計算してくれる為、総てのデバイス対応が可能になります。

またmargine、Paddingの引数は上から時計回りで（右、下、左）と覚えると、忘れません。

エリアが確認できたら、投稿記事を見やすくする為に、下記の2つはコメントにして下さい。
この方が投稿が目立ちます。

/*.widget-area {border:1px solid #c0c0c0;background:#f7f7f7;}*/
/*footer[role="contentinfo"]{ border:1px solid #c0c0c0;background:#ffffff;}*/

3-3.コンテンツエリア内の各要素の指定

次にコンテンツエリアですが、ここも幾つかの構成要素があり、各々名前がついています。

＜コンテンツエリアの構成＞

style.cssの一番下に下記コマンドを追加してファイルの更新をしてください。

/*******************************************************************/
/* 記事タイトルの位置とサイズ指定 */
/*******************************************************************/
.entry-header .entry-title {margin:40px 0 30px 0;font-size:26px;color:#400fff;font-weight:bold;}
/*******************************************************************/
/* 記事エリア要素のスタイル設定 */
/*******************************************************************/
/**** 見出し２ *****************************************/
.entry-content h2{margin-top:40px;padding:10px 0 10px 10px;font-size:20px;color:#400fff;font-weight:bold;border:1px solid #400fff;border-radius:3px;border-left: 7px solid #400fff;}
/**** 見出し３ *****************************************/
.entry-content h3{margin:40px 0 0 15px;padding:0 0 3px 10px;font-size: 18px;color:#b05927;font-weight:bold;border-bottom:1px solid #b05927;border-left: 7px solid #b05927;border-radius:3px;}
/**** 段落文字 *****************************************/
.entry-content p{font-family:'メイリオ';font-size:14px;line-height: 24px;margin:5px 0 0 0;}
/**** LIST文字 *****************************************/
.entry-content li{font-size:14px;line-height: 28px;margin:0 0 0 25px;}
.entry-content Ul{margin:0 0 0 0;}/*Listの次の段落に余分なスペースを空けない設定*/
/*******************************************************************/
/* URLリンクの設定 */
/*******************************************************************/
.entry-content a {text-decoration: underline;font-weight:bold;}
.entry-content a:link {color: #400fff;}/* 未訪問時の色 */
.entry-content a:visited {color: #4082ff;}/* 訪問済みの色 */
.entry-content a:hover {color: #2feb67;}/* カーソル時の色 */

表示画面①で、Google Chromeの場合は、Shift＋Enterを挿入してください。
どうですか？かなり画面が見やすくなったと思います。

私はあまりデザインセンスが良くないので、あとは皆様のセンスで色々修正してみてください。

色コードは、GIMP等の画像編集・加工ソフトウェアで探すか？Webサイトで見つけてください。
Webのカラーコード一覧表

以上で、少しは見栄えが良いサイトになりましたので、次は、ビジュアルエディタで、見出し等をビジュアルにする方法を紹介していきます。

＜ドキュメントガイド＞
前のテーマ：投稿のカテゴリの設定とドキュメントの作成

次のテーマ：TinyMCE Advanced プラグインのインストールと設定