Simple Journal – 必要最小構成のテーマを作成

前回まででWordPress環境の構築ができましたので、早速テーマの作成にとりかかります。

テーマ作成の作業中は、前回作ったWordPress環境を「vagrant up」コマンドで常に立ち上げた状態にしておきます。

 

01. 必要最小構成のテーマを作成

作業ディレクトリ(今回の場合は ~/project/simplejournal)以下のwordpressフォルダにWordPressがインストールされていますので、その中の

wp-content/themes

フォルダ以下に、今回作成するオリジナルテーマ用のフォルダ「simplejournal」を新しく作成します。

さらにその中に、WordPressのテーマとして最低限必要な以下の2つのファイルを追加します。

  • style.css
  • index.php

MinimalThemeFiles

各ファイルにはそれぞれ以下のように記述します。

※ style.cssに冒頭のコメントには、これから作成するWordPressテーマの情報を記述します(現時点では適当です)。

以上で、必要最小構成のテーマは完成です。

02. WordPress環境にテーマを適用してみる

仮想マシン上のWordPressの管理画面にログインし、右サイドバーの「外観 > テーマ」メニューを選択してインストールされているテーマの一覧を表示します。

先ほど作成したテーマファイル一式がWordPressに認識されていれば、この一覧に「Simple Journal」という名前で表示されますので、早速有効化してみます。

MinimalTheme

有効化が完了すると、「新しいテーマを有効化しました」というメッセージが表示されますので、その横の「サイトを表示」というリンクをクリックします。

AvailableTheme

サイトを表示したところが以下。

Preview

index.php に書いた「Hello World!」という文言だけが画面に表示されます(ちょっと寂しいですが)。

 

次回以降は、この必要最小構成のテーマをさらに拡張していくことで、もっといい感じのテーマに仕上げていきたいと思います。

モックアップ作成 – ブラウザ標準のスタイルをリセット

スタイルシートを作り込むにあたり、まずは各ブラウザのデフォルトスタイルをリセットします。

ブラウザのデフォルトスタイルとは

各ブラウザ(IE、FireFox、Chrome、safari等)は、HTMLのタグ毎にデフォルトスタイルというものをそれぞれ独自に持っており、同じHTMLファイルをブラウザで表示してもその見た目はブラウザごとに異なってしまいます。

例えば先日作った single.html を Safari で表示すると以下のようになりますが、

on Safari

同じファイルを IE11 で表示すると次のようになってしまいます。

on IE10

一見変化がないように見えるかもしれませんが

  • フォントや文字の大きさ
  • 行間の幅
  • 字間の幅
  • ウィンドウ内の余白
  • フォーム(ボタンやテキストボックス)のスタイル

などはブラウザによって微妙に違うので、スタイルシートで細かくデザインを作り込むうえではかなり悩ましいことになります。

これを極力回避するため、スタイルシートを記述していく際には事前にリセット用のスタイルシートを読み込み、ブラウザ間の差異を一旦リセットしておく必要があるというわけです。

Compassでリセット用のスタイルシートを書く

このリセット用スタイルシートについてはネット上に様々な書式のものが公開されています(以下はその一例)。

ただ今回は、せっかく Sass & Compass を導入しているので、Compassで提供されているリセット用CSSを使うことにしようと思います。

というわけで早速、style.scss を以下のように編集します。

import compass/reset

「@import “compass/reset”;」をSCSSファイルに記述することで、Compassが提供しているリセット用スタイルシートを挿入することができます。

Sublime Text3で「Command + b」キーをクリックして style.scss から style.css を生成します。

開くと以下のような記述が追加されています。

なお、上記のコードのうち「/*」と「*/」で囲まれたコメント部分にはこれから作るWordPressテーマの基本情報を書くことになっています。どんなことを書くかについては、後日詳しく説明する予定です。

このスタイルシートを読み込んでいる single.html をブラウザで開くと・・・

reseted html on Safari

また、IE11で開いた場合は・・・

reseted html on IE11

こんな感じにブラウザの独自スタイル(文字の大きさ、余白など)がリセットされているのがわかります。

 

次回はさらに Sass & Compass を使ってスタイルシートを記述していこうと思います。

Sublime Text3 + Sass & Compass でスタイルシートを編集する

前回はサイトの共通分のHTMLコーディングをおこないました。

今後はこのHTMLに対してスタイルシートを適用していくことでIllustrator で作ったデザインに近づけていく予定ですが、その下準備として、まずは Sublime Text3 を使ったスタイルシートの編集環境(Sass & Compass の利用環境)をつくってみたいと思います。

Sass および Compass について

Sass(Syntactically Awesome Style Sheets)とは、スタイルシートを効率良く記述するために開発されたメタ言語のこと。
長くなりがちなスタイルシートの記述を圧縮できたり、関数などを使用してよりわかりやすく、管理しやすいスタイルシートが書けるようになるという便利な代物です。

そして Compass というのは、Sass をさらに使いやすくするための拡張機能のことです。

※ Sass & Compass については以下のページを参考になるかと思います。

Sass および Compass をインストールして Sublime Text3 から使えるようにする

そんなわけで、以下のページを参考にしてSublime Text3 を使った Sass & Compass の利用環境をつくります。

 

モックアップ用HTMLのフォルダ構成

以上の手順で Sass & Compass を Sublime Text3 経由で使えるようになりました。

これによりモックアップ用HTMLのフォルダ構成(および Sass & Compass の設定ファイル config.rb)は以下のようになっています。

Sublime Text3 + Sass & Compass

 

agito-labs フォルダの下に _sass フォルダを作り、その中に style.scss という名前のSCSSファイルを格納。

これを Sublime Text3 経由でコンパイルすると、agito-labs フォルダの直下に style.css という名前のスタイルシートファイルが生成される仕組みにしています。

 

次回以降はこの環境を使ってスタイルシートを記述していこうと思います。