アコーディオンメニューは、数あるメニューUIの中で最もサンプルが多いように思います。しかし、レイアウトや動作がクロスブラウザで満足いくものはなかなか見当たりません。そこで今回は、クロスブラウザ,XHTML＆CSS valid なアコーディオンメニューの作り方を説明します。まず jQuery を使った必要最小限のコードで実装してから、順に仕上げていくことにします。
WordPressのSyntaxHighlighterプラグインをカスタマイズする
| WordPress | : | 2.5.1 |
|---|---|---|
| syntaxhighlighter | : | 1.5.1 |
| SyntaxHighlighter | : | 1.1.1 |
| Browser | : | FF3,IE6,Safari3,Opera9 |
| Add this | : | |
ソースコードをサイトで表示するときに、キーワードなどを色付けして見やすい表示にする場合によく使われるのが syntaxhighlighter です。これを WordPress でも利用できるようにプラグインにしたものが SyntaxHighlighter プラグインです。そのままでも手軽に使えて便利ですが、表示のオプションを自由に指定できるようにカスタマイズします。
ページ内へのアンカーリンク <a href=”#hoge”> をクリックすると、通常は一瞬で移動するため、ページのどの辺りにいるのかわからなくなり、閲覧者を混乱させることがあるかもしれません。これを改善した、良くあるわかりやすいナビゲーションは、移動をスムースなスクロールで行うものです。スムーススクロールを簡単に実現するなら jQuery のみでもできますし、スクロール用のプラグインを使っても良いです。ここではその両方を紹介し、WordPressプラグインとして利用できるようにします。
横幅がキャプション（リンクテキスト）に応じて伸縮するボタンを、CSSのみ・ボタン用画像1枚だけ、で実現する方法をまとめます。これは、海外で scalable button，fancy button，sexy button，sliding doors 等と呼ばれているテクニックです。簡単に言うと「a タグに span タグを入れ子にして、それぞれの背景でボタンの左端からと右端からを表示する」となります。言うのは簡単ですが、クロスブラウザで実現するには細かなテクニックが必要です。さらに、ボタンの状態に合わせてボタンの画像を変更するテクニックも説明します。
WordPressにJavaScriptでFlashを表示する
| WordPress | : | 2.5.1 |
|---|---|---|
| jQuery | : | 1.2.6 |
| jQuery Flash Plugin | : | 1.0.1 |
| Flash MX | : | 6.0 |
| Add this | : | |
WordPress のプラグインは php で作成します。WordPress の各種動作は php の関数で定義されており、それらをフック（独自の関数を追加）することでプラグインが機能します。
プラグインによくあるのは「エントリ本文の特定の文字列（＝プレースホルダ）を置き換え（て様々な処理をす）る」ものです。例えば WordPress の基本機能では、エントリ内に <!–more–> と記述すると、エントリ一覧ではその位置までエントリ本文が表示され、続きを読むリンクが追加されます。このような動作をプラグインで実現することができます。以下では、WordPress のプラグインの作成方法を順に説明します。
WordPressはテーマを使ってサイトのレイアウト，デザインを簡単に変更できます。一般的にはこの機能はスキンとも呼ばれます。テーマはWordPress Theme Viewerで公開されているものを利用できますし、自分で作成することもできます。テンプレートファイルと呼ばれる PHP ファイルに テンプレートタグ を用いて、簡単かつ自由度の高いデザインを作成することができます。以下では、テーマの変更、カスタマイズについて説明します。
WordPress2.5.1のインストール
| WordPress | : | 2.5.1 |
|---|---|---|
| PHP | : | 5.2.6 |
| MySQL server | : | 5.0.51b |
| Apache | : | 2.2.8（Win32） |
| Add this | : | |
WordPressはブログに止まらず、その柔軟な拡張性からCMSとしても利用できるオープンソースのプラットフォームです。商用を含めすべて無料であり、導入も簡単なためシェアを拡げています。また、テーマやプラグインが豊富で、カスタマイズも手軽にできます。PHPやjavascriptの知識があればかなり複雑なことができますし、プログラミングに明るくない場合にも、オリジナリティ溢れるサイトを作成できます。
以下では、WordPress のインストール方法を順に説明します。