• ホーム
• 概要
• 人々
• 情報
• 講義関連情報

トップページ更新について

国から大学に来る一般運営財源は毎年一定割合で減る仕組みになっている．さらに専攻の博士課程の定員割れが続いて学生支援に金銭的支出が必要との話が出て，実際，研究室に配分される予算が大幅にカットされるという話が出てきた．

学生実験に必要なお金は，大学から出ているんだけれども，別枠で用意されるわけではなく，各研究室から必要な額を拠出するという形となっている．このような事情を考慮し，学生実験委員会の委員長として，それまでの既定路線をゼロベースで見直し，お金のかかる改革を全てストップした．

最初に上がってきた数字の大きさには驚き，躊躇なくあのような金額を要求できるのは，研究費に困ったことがないからなのか，あるいは，やりたくなくて無理な数字を出しているのか，はたまた，何も考えずこうなったのか，わからない．関係各所と相談して，改革について方針転換することに．最初の数字からは半額近くにカット，例年，この程度の金額は認められたはずだという額からも２割削減して予算案を議題に掛けた．

同じ会議で，専攻のウェブサイトの更新を外注するとの話が出た．偶然にも，ほぼ同じ金額．むしろ，そちらのほうが高額だ．相場としてはそれぐらいかと，事前に話を聞いた時は感じたものの，会議の後に，学生実験予算より高いなんて，という話を耳にして，それもそうだよなと思い，とある研究室のホームページ作成に関わった業社に依頼するというので，そのページを見てみた．

確かに，小奇麗で，洗練された感じだが，あれだけの予算をかける価値が有るのかと思うと疑問が湧いてくる．酔っ払った勢いもあり，これぐらいのページを作るのにどれほどの手間がかかるんだと，フリー素材を探して，このトップページを作ってみた．

よく出来たスタイルシートで，一箇所だけの修正で，この程度のものを作り上げるのに一晩掛かかって，日の長い時期だけに，外は明るくなっていた．達成感に調子に乗り，あれだけ支払ってショボいページができたら許さんぞ，とトップページに書いた．

一眠りして，トップページの文言としては穏やかでないと思い直し，一段下の階層に格下げし，この情報をタイプしている．正直なところ，私のデザイン感覚では，元のトップページとこのページの違いは，写真が動くかどうかぐらいしか違いは感じない．

結局，何に時間がかかったかといえば，デザインテンプレートを探すのと，掲載する写真を決める作業だ．とある研究室のサイトでも同じだが，設定したページ幅と同じ横幅の写真を用意する事が前提となっているが，深夜にそんな写真を撮っても仕方がない．それは諦め，季節ごとの居室から見える写真と，雪まつりのルーティーンと題された雪像の写真をピックアップした．固定画像も手持ちの写真から切り出したもの．

要するに，コンテンツの充実に一番手間がかかるんで，そこにどれだけ力入れられるかだろう．とある飲み会で，その専攻ウェブサイト更新の責任者が私にその必要性を訴え，例えば，私が大学院を中退し，その後２年助手として世話になったところの サイト もリニューアルして立派になってますよと言うので見てみると，こちらは確かに斬新な気がする． スマホのタッチパネル対応が意識されている，というのは時流でその必要があるのかもしれない．

専攻長挨拶，進学希望者向け・大学院入学希望者向けのメッセージなど，我々教員が伝えるべき中身を持っているかどうか問われるんだろう．

以下は，元のサンプルページの内容で，このページの構成を記す情報として残しておく．

テンプレートサイズについて

完全幅固定タイプです。
全体的な横幅は940px、メインコンテンツ部分600px（余白除く）、サブコンテンツ部分300px（余白除く）です。サブコンテンツ部分はメニューやバナー等を配置することを想定し、幅を広く取りました。

インデックスページの画像のスライドショーについて

画像がスライドしながら自動で切り替わるように設定しています。切り替わる時間やスライドの時間などいろいろオプションが変更できます。サンプル画像は当方で撮影したものです。画像を差し替えてご利用ください。

画像等の位置をjQueryで取得しています。本来であれば、CSS3のcalc()関数で位置合わせを簡単にできるのですが、OperaとSafariではまだサポートされていなかったので…。ナビゲーションボタン（左右矢印画像）の横方向の位置を変更したい場合は、jQueryを呼び出す際のオプションで指定できます。

動作確認しましたが、OperaとSafari、およびIEの7と8は計算方法・レンダリングの違いからか、ブラウザのサイズによってはスライドする位置がずれてしまう場合がありました。が、直す方法がわからなかったのでそのままにしています。すみません…。

使い方について

HTMLファイルのheadタグ内にて、

<script type="text/javascript">
$(function() {
     $('#slide').slideshow({
        autoSlide    : true,
        type         : 'repeat',
        interval     : 5000,
        duration     : 500,
        easing       : 'swing',
        imgHoverStop : true,
        navHoverStop : true,
        prevPosition : 0,
        nextPosition : 0,
        baseWidth    : 940
     });
});
</script>

というように記述します。また、いくつかオプションがあります。

autoSlide	スライドショーを自動にするかどうかを選べます。「true」で自動、「false」で自動では動かないようにできます。 初期値は「true」です。
type	スライドショーのタイプを選べます。「repeat」はカルーセルタイプで画像が最後まで表示されると最初に戻り、ループします。「stop」は最後の画像が表示されるとそこでストップします。 autoSlideの値がtrueで、typeの値がstopの場合、最後の画像が表示されない限りは常にautoSlideが有効になっています。最後の画像が表示されると、戻る方向に画像を表示しても、autoSlideが無効になります。 初期値は「'repeat'」です。
interval	次のスライドまでの止まっている時間です。単位はミリ秒ですが、単位まで記述する必要はありません。 初期値は「3000」です。
duration	スライドするスピードです。単位はミリ秒ですが、単位まで記述する必要はありません。 初期値は「500」です。
easing	スライドする効果の種類です。「liner」と「swing」から選べます。シングルクォーテーションかダブルクォーテーションで文字列を括る必要があるので注意です。 初期値は「'swing'」です。
imgHoverStop	画像にホバーした際、スライドをストップするかを選べます。「true」でスライドをストップ、「false」でスライドをストップしないようにできます。 初期値は「true」です。
navHoverStop	画像下のページネーションにホバーした際、スライドをストップするかを選べます。「true」でスライドをストップ、「false」でスライドをストップしないようにできます。 初期値は「true」です。
prevPosition	左方向（戻る）スライドボタンの位置を指定します。プラスの値を指定すると右方向、マイナスの値を指定すると左方向に移動します。 初期値は「0」です。
nextPosition	右方向（進む）スライドボタンの位置を指定します。プラスの値を指定すると左方向、マイナスの値を指定すると右方向に移動します。 初期値は「0」です。
baseWidth	スライドショーの横幅を指定します。ブラウザの横幅がbaseWidthで指定した横幅より小さくなった場合は、スライドショーの見た目が少し変わるようになります。真ん中のスライドしか表示されなくなり、左右のナビゲーションメニューは見えなくなります。 特に指定する必要はありませんが、何も指定しない場合、自動的にスライドショーの横幅の値になります。

矢印画像の位置を修正するときの注意点

上のオプションでも説明していますが、左右方向へのスライドボタン（矢印画像）は、calc関数を利用できるブラウザが少ないためCSSでの位置取得が難しいので、jQueryで取得しています。そのため、簡単に左右の位置を修正できるように、オプション（prevPosition、nextPosition）を用意しております。

画像間に余白（margin、padding）を空けるときの注意点

画像と画像の間に余白を設ける場合のことを考慮していますが、設定する際は、CSSファイル（css/common.css）にて、

.slideInner li img {
    margin:0 10px;
    padding:0 10px;
}

というように、marginあるいはpaddingの左右に同じだけ余白を設けるようにしてください。

余談ですが、#slideInner li imgにmarginを指定しないと、IE7と8でレイアウト崩れを起こしてしまいましたので、margin:0;を指定しています。

ページトップへの戻りリンクについて

ページトップへの戻りリンクは、ページの右下に配置しており、スクロールすると現れる仕組みになっています。こうすることにより、ページトップへの戻りリンクが目に入りやすく、ユーザにこのリンクを、より活用していただけるのではないかと思います。

JavaScript(jQuery）の使用について

当CSSデザインテンプレートでは、JavaScript(jQueryライブラリ）を使用しています。使用している箇所は、インデックスページのスライドショー、インデックスページのスライドショー下の3つコンテンツが並んでいるエリア、ページトップへの戻りリンクです。そのため、JavaScriptを有効にしていないブラウザではレイアウト崩れを起こしてしまいますので、ご留意ください。

カスタマイズについて

カスタマイズはご自由になさってください。
制限はありません。

その他、不具合などございましたら
CoolWebWindowにお知らせください。

サンプルタグについて

以下、サンプルタグになります。ご利用の際は参考にしてみてください。

h2タグ

h3タグ

h4タグ

h5タグ

h6タグ

強調（em） より強い強調（strong） 追加（ins） 削除（del）
テキストアンカー

リスト

普通のリスト

• 普通のリスト1
• 普通のリスト2
• 普通のリスト3

番号付きリスト

1. 番号付きリスト1
2. 番号付きリスト2
3. 番号付きリスト3
   li要素の中はブロックレベルのタグを使用することが出来ます。例えば、<p>タグも記述することが出来ます。
   

定義リスト

定義リスト1

定義した用語の説明

定義リスト2

定義した用語の説明

定義リスト3

定義した用語の説明
dd要素の中はブロックレベルのタグを使用することが出来ます。例えば、<p>タグも記述することが出来ます。しかし、dt要素にはインライン要素しか記述することができません。

テーブル

見出し1	見出し2	見出し3	見出し4	見出し5
セル1	セル2	セル3	セル4	セル5
セル1	セル2	セル3	セル4	セル5
セル1	セル2	セル3	セル4	セル5

ボックスタイプ