ITプロデュース熊本

‘WordPress研修’ カテゴリの記事

CSSが使えなかった頃と比べると、構造（HTML）と見た目（CSS）が分離されているので、かなり保守は楽になりました。

それでも欲が出てくるもので、CSSは何かと面倒。

CSSのここが面倒

例えば、入れ子になった要素に属性を指定するとき。

div#container
{
   ・・・
}

div#container div#left-area
{
   ・・・
}

div#container div#left-area div.widget
{
   ・・・
}

↑のような記述を書いていると、イライラしてきます。

特に、後からクラス名やIDを変えた時に、全部変えないといけないのが嫌で嫌でたまらない。

あとは、色とか文字の大きさを変えるとき。それこそ、あちこちに散らばっているので、面倒極まりない。

SASS を試してみた

SASSを使うと、上述のCSSは↓のように入れ子構造で書けます。

div#container
{
   ・・・
  div#left-area
  {
     ・・・
    div.widget
    {
     ・・・
    }
  }
}

他にも、変数が使えたり、関数（っぽい記述）が使えたりと、少しでもプログラムが組める人ならば、CSSに抱いていた不満がかなり解消されると思います。

SASSの文法に関しては、「続きはWEBで」ってことで、ここではWordPressに導入した時の注意点を。

プラグイン：WordPress SASS

WordPress SASSというプラグインを使いました。

基本はプラグインの説明ページ（英語）の通りにやればいいのですが、なんだか改行が入っていなくて読みにくいのでそのままでは動きませんでした。

注意1 : function.php に書く記述

説明ページに書いてあるコードは改行が入っていないので、そのままでは動きません。正しくはこう。

// Enables SASS to CSS automatic generation
function generate_css()
{
	if(function_exists('wpsass_define_stylesheet')) wpsass_define_stylesheet("style.scss", "style.css");
}
add_action( 'after_setup_theme', 'generate_css' );

注意2 : style.css のパーミッション

説明ページには775にしろって書いてあるけど、環境によってはNG。今回導入したサーバでは、Apache君が書き込みできるようにしておく必要があります。今回入れたところはApacheが別のユーザで動いているので、所有者をApacheユーザにしたうえで、644 。

注意3 : SASSの文法

どうもSASSの記述法には何種類か（少なくとも2種類）あるみたい。

初めにここの記述を試したがまったく動かない。設定が間違えているのかと思い、何度も見なおしたけど原因が分からなかった。

でも、ここの書き方だと、すんなりと動いた。

WordPressにスライドショーを入れられるプラグイン WP-Cycleを試してみました。

続きを読む »

ITPK002テーマ

以前紹介した、超シンプルなWordPressテーマに、少し手を加えて、枠線を角丸四角形にしました。

角丸四角形テーマ

これをベースにして独自のデザインを作成してください。

もちろんそのまま使ってもかまいませんが、そのまま使うくらいならもっといいのがあると思います

続きを読む »

多くの無料テーマ（デザインテンプレート）が魅力の WordPress ですが、何も手を加えずに使えることはあまり多くありません。

時には原型をとどめないほどにカスタマイズすることも・・・。

それでも、どこかに著作権表示などを入れておかなければいけないという縛りがあります。

超シンプルテーマ

ITPK001テーマ

そこで、とてもシンプルなテーマを作りました。

これは、このまま使うためのものではありません（使ってもいいですけど）。

これをベースにして独自のデザインを作成するためのものです。

せっかくなので公開します。

自由に使ってください。

header.php に「Designed by ITプロデュース熊本」と書いてありますが、削除してしまってOKです。

改変も再配布も自由にしていただいて結構ですが、改変の有無に関わらず、バグ修正や機能追加の要望には応じられません。あくまでも自己責任でお願いします。

ダウンロードはこちらから。

WP lightbox 2 というブラグインを導入しました。

これは、画像を格好良く表示するためのプラグインで、画像をクリックすると黒地に写真が浮かび上がるように表示されます。

シンケンジャーショー

例えばこんな具合に。

画像が1枚だけであれば、普通の投稿と同じようにすれば、LightBox2 が適用されます。

画像をグループ化する

複数の画像をグループ化して、表示中に前後の画像に切り替えるスライドショーのような表示もできます。

大津町消防出初め式

画像表示中に画像をクリックすると、次の画像へと切り替わります。

また、画像の左端にマウスポインタを持っていくと Prev 、右端に持っていくと Next と表示され、前後の画像へ移動することもできます。

または、キーボードの P や N を押すことでも、前後に切り替えることができます。

グループ化するには投稿記事の編集画面（HTMLモード）で、グループ化したい写真へのリンクタグに、rel オプションを指定します。

2枚目以降の<a>～</a>の間に、それぞれのサムネイルを入れることも可能です。

今回は、ピンポイントで「ヘッダー部分に画像を入れる（or 変える）」方法です。

FireFox + FireBug を使うことを前提に説明しますが、Google Chrome でもほぼ同じ手順でできますので、好きな方を使ってください。

それ以外に、FTPクライアント（FFFTPなど）と画像編集ソフト（GIMPなど）、テキストエディタ（行番号表示があるものがよい）が必要です。

スタイルの適用対象を調べる

ITPKのホームページを開き、ヘッダー部分の背景画像のあたりで 右クリック→要素を調査 を選んでください。

HTMLとCSSなどの情報が表示されます。

今回は偶然、背景画像を指定している部分（ background-image : url(images/Header.jpg) ; ）が出てきましたが、そう上手く行かなかった場合には、左半分のHTMLエリアにフォーカスを合わせ（＝クリックし）て、カーソルキー（キーボードの矢印キー）の上下で、ハイライト（反転表示行）を移動させてみてください。右半分のCSS領域に、背景画像を指定している部分がでる箇所があるはずです。

右上辺りに、青文字で 「style.css（586行目）」と書いてあります。つまり、そこに背景画像を指定する記述があるのです。

ファイルの場所

マウスポインタを青文字の「style.css（586行目）」に合わせると、ツールチップテキストでURLが表示されます。今回は「 http://www.itpk.jp/wordpress/wp-content/themes/three_worlds_apart_ote_071/style.css 」 と表示されました。

この style.css ファイルを基点にして、images/Header.jpg で見ることのできるファイルが、画像ファイルです。

FTPクライアントで、アクセスしてみましょう。

ITPKのサーバに接続し、/public_html/wordpress/wp-content/themes/three_worlds_apart_ote_071/ を開いた状態です。ここにある style.css が、ページのデザインに影響を与えているのです。

その中の images ディレクトリです。

この中の Header.jpg をダウンロードしてから開いてみれば、背景画像であることが分かるはずです。

背景画像を書き換える

まずは、ダウンロードした Header.jpg ファイルを書き換える方法を試してみましょう。

例えば、色合いを変えてみるとか、図形を描き加えてみるとか、逆に何かを消してみるとか。画像の縦横サイズさえ変えなければ、何をしてもかまいません。

こうして編集した Hearer.jpg を、FTPクライアントを使って ITPKのサーバの Header.jpg に上書きしてください。

ブラウザで再読み込み（場合によっては Ctrl + F5 で強制再読込）することで、ヘッダー部分の画像が変わるはずです。

背景画像を別の画像にする

次に、まったく別の画像にしてみましょう。

新しい画像ファイルのファイル名を、Header2.jpg 、幅 800px 高さ160px だとします。これらは自分が使うファイルに合わせて読み替えてください。

まず、画像ファイルを FTPクライアントを使って、サーバにアップロードします。

次に、style.css ファイルをダウンロードし該当部分、先程調べた586行目からを編集します。

div.Header-jpeg
{
  position: absolute;
  z-index:-1;
  top: 0;
  left: 0;
  width: 800px;
  height: 160px;
  background-image: url('images/Header2.jpg');
  background-repeat: no-repeat;
  background-position: center center;
}

通常は、画像のサイズを変えると、他の要素のバランスがずれてしまいます。これは、画像サイズに合わせて、他の要素のサイズや位置が調整されているためです。

なので、前後の要素も同様の方法で「要素を調査」して、サイズ（CSSファイルの width と height の値）や位置（CSSファイルの top , left , right . bottom の値）を微調整する必要があります。

やり方自体は同じなので、いろいろ試してみてください。

新しく背景を入れる

最後に、もともと背景画像のないテーマに、背景画像を入れる方法です。

やり方自体は今までと同じで、画像をアップロードして、CSSファイルを書き換えるだけなのですが、元のCSSファイルに「background-image:」の記述がないため、「CSSのどこを？」が分からないと思います。

そんな時は、左半分のHTML領域内でマウスを動かしてみてください。ページの該当する部分の色が変わって表示されます。これで、おおよその場所がわかりますので、その部分のCSS記述に、background-image: などの情報を書き加えてください。

ベストな方法

本来であれば、HTMLとCSSの仕組みを理解して、変更箇所を見つけるべきです。

ただ、そうするには既存のWordPressのテーマは複雑すぎるため、上記のような方法を紹介しました。

単純なテーマでも自力で作ればかなり理解が深まりますので、時間があったら挑戦してみてください。

今回は WordPress テーマのカスタマイズに限らず、Web開発をするために便利なブラウザを2つ紹介します。

両方とも、歴史などの説明は割愛しますので、興味があれば調べてみてください。今回は、CSSを解析する機能に絞って説明します。

ブラウザは、ここで紹介する2種類以外にもたくさんあるので、自分にあったものを探してみるものいいでしょう（開発に便利かどうかは調べてません）。

ただし、自分が気に入ったブラウザを、「みんなが使っている」なんていう幻想は持たないでください。どんなに素晴らしいデザインも画期的な機能も、Internet Explorer で正しく表示されなければ価値が半減します。

Firefox + Firebug

Firefox + Firebug

FireFox は Firebug という拡張機能を追加することで、右クリックに「要素を調査」というメニューが加わります。

左側のHTMLソースの各行にマウスポインタを合わせると、ページを表示している元のウィンドウの該当部分がハイライト表示されます。

カーソルキーでカレント行を動かす（またはマウスでクリックする）ことで、右側にその部分の属性値が表示されます。

スタイルの各行にマウスポインタを近づけると、行頭に灰色の通行止めマークが現れます。それをクリックするとマークが赤くなり、その行のスタイルが無効になります。

また、属性の名前や属性値をクリックすることで、内容を自由に変更することもできます。右クリック→新しいプロパティ で任意の属性を付加することもできます。

このように変更したものは、あくまでも一時的なもので、再読み込みすれば元に戻りますし、実際のサーバのデータが書き換わることは絶対にないので、安心して試すことができます。

Google Chrome

Google Chrome

前回も少し触れましたが、インストールしたままの状態で、「要素の検証」機能が使えます。

左側のHTMLソースの各行にマウスポインタを合わせると、ページを表示している元のウィンドウの該当部分がハイライト表示されます。

カーソルキーでカレント行を動かす（またはマウスでクリックする）ことで、右側にその部分の属性値が表示されます。

その属性値のグループの中の “Styles” で、どのようなスタイルが指定されているのかを見ることができます。マウスポインタを、この部分に近づけてみると、右端にチェックボックスが現れます。

このチェックを外すことで、一時的にそのスタイルが指定されていない状態を見ることができます。Firebug とは違い、属性値を変えることはできないようです。

もちろん、チェックをはずしてもサーバーのデータが書き換わることはありません。

その他の機能

上の2つのブラウザ（とブラウザ＋拡張機能）には、他にも便利な機能として、JavaScriptの実行を監視したり、ページ読み込みの時間を測定・分析したりする機能がついています。

この研修では触れませんが、Web関連の仕事をしていく上で必ず必要になる日が来ると思います。

今回は、前回説明した意味構造と見た目についてです。

前回の記事の見出し「昔のWebサイト」の部分が、どういう意味構造の中にあるものなのか、そして何故あのような見た目になったのかを説明します。

ソース表示

普通のブラウザには、見ているWebページのソースを表示する機能がついています。この機能を使うと、HTMLのソースを見ることができます。

しかし、もっと簡単に見やすく構造を見ることができるソフトがあります。

FireFox というブラウザにFireBugという拡張機能を使う方法もありますが、今回はGoogle Chrome というソフトを使います。

要素の検証

Google Chrome で前回の記事を開き、例えば「昔のWebサイト」の部分で右クリック→「要素の検証」を選ぶと、Developer Tool が開きます。

Developer Tool

画面の左側でHTMLの構造が分かります。

これによると、「昔のWebサイト」の部分は、html → body → div class=”Main” → div class=”Sheet-body” → div class=”content” → div class=”Post” → div class=”Post-body” → div class=”Post-inner article” → div class=”PostContent” → h3 という構造の中にある文字列だということが分かります（おおまかな情報は画面の下1行にも表示されます）。

そして、画面の右側で、その部分に影響を及ぼしているスタイル（見た目の定義）が分かります。

どのCSSファイルに書いてある定義が、どのようなものであるかが書いてあります。今回の例では h3 に影響を与えているCSSの記述は3個所あるようです。

それらの記述がすべて影響を与えるわけですが、同じ事柄についての定義は、優先度の高いものが使われます。今回の例では、一番下の h3 (user agent stylesheet) の font-size:1.17em; と font-weight:bold; には横線が引かれています。これは、これらより上のファイルで指定されている font-size:19px; と font-weight:normal; が効いている、ということです。

他の値については割愛しますが、ひとつだけ。一番上に color:rgb(104,108,71) とあります。これが文字の色です。

つまり、文字の色を変えたければ、このスタイルが書かれているCSSファイル（マウスを 右のほうの /wordpress/wp-content/… に合わせるとファイル名が表示されます）の、”h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover” についての color の指定を変えてやればいいのです。

ちなみに、該当部分はこのように書かれています。

h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover
{
  font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
  font-size: 19px;
  color: #686C47;
}

今回はHTMLとCSSについてです。

ここでは、HTML(Hyper Text Markup Language) の概要は知っているものとして話を進めます。

昔のWebサイト

HTMLのタグの中には、文章の段落を表す <p></p> や、画像表示の<img />、ハイパーリンクの<a></a>のように、テキスト（文章）に意味を与えるためのタグと、<font></font>のように、見た目を変えるためのタグがあります。

また、本来は「表」の意味を持つ<table></table>タグですが、使い方によってはレイアウトを整えることもできるため、今でも多くのWebサイトが、本来の用途とは別の目的で使用しています。

このようなWebサイトのメンテナンスは、かなり骨の折れるものでした。というのも、例えばサイトのデザインを変えるために文字の色を変更する場合、すべてのHTMLファイルの文字の色を変えるタグを置換しなければならないのです。

さらに、段組などのレイアウト変更はもっと大変でした。<table></table>の中の<tr></tr>や<td></td>の数を1つ間違えるだけで、ガタガタにずれてしまいます。そのような表構造が何重にもネストしているのです。

意味構造はHTML、見た目はCSS

しかし、今の主流は、「HTMLには文章の意味や構造だけを記述する」そして「見た目はCSS（Cascading Style Sheet）に記述する」というものです。

例えば、HTMLには、「この部分は見出し」「ここは本文」「ここは強調する」というようなタグをつけます。

そして、CSSに「見出しは文字サイズを大きく、背景に星の画像を入れる」「本文は文字の色を黒、背景は薄いブルー」「強調は文字を太くして、色を赤くする」などと記述するのです。

段組などのレイアウトも、CSSで定義することができます。

こうすることのメリットは、いろいろありますが、この研修に関して言えば「デザインを変えたければ、CSSファイルだけを変えればOK」という点です。

今回は、「WordPress が、動的ページのデメリットをカバーしてくれる」という話です。

前回の話だと、動的ページが断然良さそうです。が、何事にも良い面と悪い面があります。

静的ページは決まったページを送ってくれればいいので、簡単なシステム構成で実現できます。また、あまり高度な知識がなくても作ることができます。

一方動的ページは、ページを生成するためのソフトウェアが必要なのです。このソフトウェアは、いろいろなプログラム言語で書くことができますが、代表的なものは Perl 、 PHP 、 Ruby などがあります。

動的ページを自由自在に作るためには、プログラミングの知識が必要なのです。

ところで、例えばブログの仕組みなんて、どのブログでもそれほど違わないものです。

そこで最大公約数的な機能をあらかじめ組み込んだソフトウェアが登場しました。

「コンテンツを管理するシステム」ということで CMS ( Contents Management System ) と呼ばれています。

このようなソフトウェアのうちの一つが WordPress なのです（ちなみに WordPress は PHP という言語で書かれています）。

WordPress はインストール後そのままの状態でも、立派にブログとして使用できます。

が、PHP や CSS、JavaScript、HTMLなどの知識と若干の絵心があれば、自由にデザインをカスタマイズできます（このようなデザインをテーマといいます）。

WordPress のすごいところは、知識がある人が作ったテーマ を、知識のない人でも簡単に使えるという点です。

つまり、WordPress を使うと、知識がなくてもそれなり、いえ、それなり以上のことができ、知識があればかなりのことができるのです。