スタイルシートを使って動く画面を作る

かっこいいWebページを作ろうと、WordPress を調べていると、かっこいい企業のWebページの例、で使われているメニューが気になって、調べてみた。

どうやら、スタイルシートで、表示される画像を切り替えているらしい、と解ったので、この方向で調べることにした。

スタイルシートには、「a:hover」という議事クラスがあって、これを使うとマウスが通過した際に、表示を変更できるようだ。
表示する図形を別のものにしたり、背景色を切り替えたり、できる。
両方試してしたが、個人的には、図形のまわりの枠からはみ出して見える背景色を変えるのがいいように思う。

スタイルシートの記述は、こんな感じ。(背景色だけなら意外と簡単)

li.Menu {
        display: inline-block;
}
div.Menu {
        width: 100px;
        padding: 2px 2px 2px 2px;
        background-color : lightgray;
}
div.Menu:hover {
        background-color : red;
}

これに対応するHTMLは、<ul>タグと<li>タグで、メニューを作って、メニューを図形で作り、その図形の上をマウスが通過すると、図形のまわりが薄い灰色から赤に変わって、マウスの動きについていくように見せるやりかた。
「div.Menu:hover」で、<div class=”Menu”>タグを、マウスが通過したら、という設定となる。

かっこよく見せるなら、やっぱり図形を切り替える方がいいでしょうね。
私が見たWordPressの企業向けの例では、通常の表示する図形と、マウスが通過した際に表示する図形とを切り替えて、動くように見せるページがあり、それがかっこいいなと、思いました。こういうのに、プロの技を、と感じます。

ハローワークで紹介状を入手

今日、ハローワークで紹介状をもらってきまいた。

山形のハローワークでの手順は、下記のとおりでした。

1.総合案内で、「いいなび」の利用申請をします。
  ここでブース席を指定するので、指定さrたブース席に行きます。
  この時、ブース席の番号がかかれたカードが渡されます。カードの番号のブースを使います。
2.「いいなび」で求人情報を検索する。
  ブース席には、タッチパネル形式の画面とプリンタがあって、専用のペンで画面をタッチして、
  求人情報を検索します。最初、このペンに気がつかず指でタッチしてしまいました。画目が汚れ
  るのでよくなかったな、と反省してます。
3.「いいなび」は、全国のハローワークの情報を検索できます。また、最新のものだけ、とか、
  ある職業の求人のみとか、いろいろと条件を設定できます。
4.興味がある求人を見つけたら、求人票をプリンタで印刷します。
  ブース毎にプリンタがあるので、印刷するとブース内のプリンタに出ます。
  1回につき5枚まで印刷できるそうです。
5.求人票を印刷したら、総合案内で面接を申し込みます。
  このとき、ブース席の番号カードは返却します。
  総合案内で面接を申し込むと、呼び出し番号が配られます。
  呼び出しがあるまで、待ちます。
  行った日は、それほど込んでいなかったので、10分くらい待ちました。
6.番号が呼び出されたら、カウンセラーのいるブースで面接します。
  簡単に質問され、求人票の仕事がでるかどうか確認されます。
  特に問題なければ、そこで、紹介状をもらいます。
7.紹介状をもらったら、終わりです。
  紹介状をもらう際に、受給資格者証にカウンセラの印をもらいます。
  これが無いと、失業の認定が受けられません。

今日は、山形市内の「キャプテン山形株式会社」への紹介状をもらいました。
ちょうど、私が探している仕事に合っていると思えました。
後でこの会社を調べてみると、ここに就職は無理かな、という気になりました。

会社のWebページで会社概要を見たら、従業員9人の会社なのに、取締役が10人+監査役2人もいる、第3セクターの怪しい会社だと解りました。
会社のWebホームでも社員を募集していたのですが、20歳から32歳くらいの人で、資格を持っている人が条件でした。私が応募しても、書類審査で落ちる可能性大ですね。

せっかく紹介状をもらったので、応募してみます。
こういう会社って、きっと何かコネがないと入れないんでしょうね。

Eclipse PDTを使う

12月2日(日)は、いろいろ用事があって、自分用のUbuntu の設定は進んでません。
とはいえ、PHP の修正とかを、ターミナル+vi でやるのは、いまいち、と思いたち、Eclipse PDT の設定をすることにした。

まず、Ubuntu で Eclipse PDT を使って、PHPを編集する目的は、実際のサーバと同じように、Database( PostgreSQL とか、MySQL )に接続してデバックが行えるようにするためだ。Eclise PDT は、Windows のPCでも使える(というかその方が使いやすい)が、PHP の実行ができない、という問題がある。

今日は、Eclipse のコンソールで、データベースを使った処理の実行ができることを確認した。

設定には、Ubuntu のインストールした php の実行モジュールと、これで使う php.ini ファイルを指定する。
まず、php の実行モジュールは、 /usr/bin/php である。
しかし、php.ini は、Ubuntu にインストールされた php.ini そのままだと、どうもいまく動作しないようだ。Eclipse PDT は、php.ini ファイルを複数設定できるようで、追加していけば動作するようになるようだが、どうも怪しい。それで、Eclipse PDT 用の php.ini ファイルを作って、それを設定するようにしている。
元になるのは、/etc/php5/apache2/php.ini と、/etc/php5/apache2/conf.d/ の下にあるファイル。

このまま、デバックもできれば、と思ったが、これは今日はうまく設定できなかった。
明日以降、確認するつもりである。

WordPressの投稿を表示する仕組み

今日から12月です。
山形は1日、雪がちらつく天気でした。朝、雪景色でしたが、山形に帰ってきたんだ、と実感しました。
晴天で雪がまったく無いのに、風がとても冷たい、横浜の冬を、偽者と感じていたので、これこそ冬、という感じです。

今日もWordPressのテンプレートの学習に取り組んでいます。
どうも、こんなループが基本なのだ、と解りましたが、この動きが理解できません。

while( have_posts() ) {
the_post();
// この下に、投稿した内容を表示するステートメントを入れる

}

私が思うイメージは、データベースのクエリの結果を、ループを使って順に取り出している、というものです。
クエリ実行;
while( データが残っているか ) {
データを取り出す処理
取り出したデータを使って、情報を表示する
}
たぶん、ループの途中で、今、どこを参照しているか、とか、データを読み直すと、といったステートメントがあるのでしょう。
WordPressのマニュアルを詳しく見ていないのですが、徐々に調べて、目的に応じて使えるようになりたいものです。