Monthly Archives: 5月 2008
Lightbox v2.04 を設置してみた。
前回のエントリーで、画像を入れてみましたが、画像をクリックした際、別窓が開いて表示するだけ、何だかなーと思い、Lightbox を設置してみました。 Lightbox とは、基本的に JavaScript のライブラリとして公開されています。Lightbox に色々な種類があるみたいですが、一番基本的な物を利用させて頂きました。 Lightbox2 最新版は v2.04 が公開されていました。上記のサイトより、v2.04をダウンローして、ファイルを解凍すると、サンプルの index.html ファイルがありますので動作確認出来ます。 index.html ファイルに解説がありますが、<head>に必要ななる、 JavaScript、CSS ファイルへリンクします。 <link rel=”stylesheet” href=”css/lightbox.css” type=”text/css” media=”screen” /> <script src=”js/prototype.js” type=”text/javascript”></script> <script src=”js/scriptaculous.js?load=effects,builder” type=”text/javascript”></script> <script src=”js/lightbox.js” type=”text/javascript”></script> 他に、画像へのリンク <a> タグにの中に「rel=”lightbox”」を追加します。 サンプルの index.html で下記の部分になります。 <a href=”images/image-1.jpg” rel=”lightbox”><img … Continue reading
カラムの使い分け
『ま な び』のホームページは、WordPressを利用して、構築しています。基本的にブログで無いため、コンテンツ毎にページデザインへ変更出来るように、融通が利くようにカラムは自由に設定出来るようにしたいと思っています。今カスタマイズしてるデザインは2カラムになっています。 XHTML を検証してみると。 <div id=”main”> <?php get_sidebar(); ?> <div id=”leftside”> #main の中に、サイドバー部分を読込み、#leftside のスペースを作り、2カラムを構成している事が判りました。試しに XHTML で<?php get_sidebar(); ?>をコメントアウトする事で、サイドバーが表示されなくなります。 次に、#leftside に相当する部分を、新規に #one としてCSS で新規に追加し、width の値を変更することで、1カラムのページを作る事が出来ました。 この例では、index.php をコピーし、home.php を作成し、home.php の #leftsside を、#one に書き換え、style.css では、#one 相当分部分を追記しました。