最新情報

日本赤十字秋田看護大学・日本赤十字秋田短期大学図書館様にご利用いただきました [2014年11月26日]

日本赤十字秋田看護大学・日本赤十字秋田短期大学図書館様にご利用いただきました

和歌山県立医科大学図書館三葛館様にご利用いただきました [2011年6月20日]

和歌山県立医科大学図書館三葛館様にご利用いただきました

圧縮ファイル形式をlzhからzip形式に変更しました。 [2010年3月12日]

ダウンロードページの各バージョンの一括ダウンロード用圧縮ファイルの形式をlzhからzipに変更しました。

Template.cssのスタイルに一部変更があります [2010年3月11日]

MoogaOneのスタンダード版 ver.3またはPopDiary版 ver.3以外のバージョンにおいて、Template.cssに使用されているタテ二段カラム組み用のスタイル、.Leftおよび.Rightが変更されました。変更前のスタイル指定ではマッキントッシュFireFoxで見た時に右側のカラムが改行されて表示される事が判明しました。スタンダード版 ver.3またはPopDiary版 ver.3よりも前のバージョンをお使いの方はお使いのTemplate.cssの以下の部分を訂正願います。

(訂正前)
.Left{
float:left;
width:49%;
margin:0px 10px 0px 0px;
}

.Right{
float:left;
width:49%;
margin:0px 0px 0px 10px;
}

(訂正後)
.Left{
float:left;
width:49%;
margin:0px;
}

.Right{
float:right;
width:49%;
margin:0px;
}

大阪教育大学附属図書館様にご利用いただきました [2010年3月2日]

大阪教育大学附属図書館様にご利用いただきました

山口県立山口図書館様にご利用いただきました [2010年2月3日]

山口県立山口図書館様にご利用いただきました

和歌山県立医科大学図書館紀三井寺館様にご利用いただきました [2009年11月27日]

和歌山県立医科大学図書館紀三井寺館様にご利用いただきました。

羽根人(はねんちゅ)様にご利用いただきました [2009年7月9日]

羽根人(はねんちゅ)様にご利用いただきました。

桐朋学園大学音楽学部附属図書館様にご利用いただきました [2009年6月4日]

桐朋学園大学音楽学部附属図書館様の ★OPACの使い方★ 画面にご利用いただきました。

兵庫県立大学姫路書写学術情報館様にご利用いただきました [2009年4月2日]

兵庫県立大学姫路書写学術情報館様にご利用いただきました。さわやかな緑色です。

京都文教大学図書館・京都文教短期大学図書館様にご利用いただきました [2009年3月27日]

京都文教大学図書館・京都文教短期大学図書館様にご利用いただきました。ちょっとおしゃれなデザインです。

私立大学図書館協会 京都地区協議会様にご利用いただきました [2009年3月10日]

私立大学図書館協会 京都地区協議会様にご利用いただきました。素敵なピンク色ですね。

TAC(多摩アカデミックコンソーシアム)図書館サービス様にご利用いただきました [2009年3月5日]

TAC(多摩アカデミックコンソーシアム)図書館サービス様にご利用いただきました。緑が基調でさわやかです。

私立大学図書館協会東海地区協議会様にご利用いただきました [2009年1月15日]

私立大学図書館協会東海地区協議会様にご利用いただきました

Standard ver.3 に海の色バージョンのcssを追加しました [2008年6月20日]

スタンダード版 ver.3 に、海をイメージしたさわやかなオーシャンブルーカラーのcss、indexOcean.css, TemplateOcean.css を追加しました。index.css, Template.cssの代わりにこちらをお使いいただくと、ページ全体のカラーが海の色に変身します。ダウンロードの「スタンダード版 ver.3 」からダウンロードしてください。使用する際は現在使用中のindex.css, Template.cssを別名で保存しておき、indexOcean.css, TemplateOcean.cssをindex.css, Template.cssという名前に変えて使用すれば、個々のページのHTMLを書き換える必要はありません。

大阪産業大学綜合図書館様にご利用いただきました [2008年5月9日]

大阪産業大学綜合図書館様にご利用いただきました。

スタンダード版 1.1 のサポートを停止させていただきます [2008年5月6日]

MoogaOneスタンダード版 1.1 のサポート/バージョンアップを停止させていただきます。今後MoogaOneに変更が加えられた場合にも1.1はバージョンアップしません。ご了承下さい。なお、スタンダード版 1.X のユーザのみなさんからのMoogaOne、css、ユーザビリティに関するご質問とお問い合わせは、今後も歓迎致します。

大阪信愛女学院図書館様にご利用いただきました [2008年5月1日]

大阪信愛女学院図書館様にご利用いただきました。

山口県立山口図書館様にご利用いただきました [2008年5月1日]

山口県立山口図書館様にご利用いただきました。さわやかな配色になっています。

Standard ver.3 に抹茶色バージョンのcssを追加しました [2008年4月30日]

スタンダード版 ver.3 に、春の新色(?)抹茶をイメージしたカラーリングのcss、indexMatcha.css, TemplateMatcha.css を追加しました。index.css, Template.cssの代わりにこちらをお使いいただくと、ページ全体のカラーが抹茶色に変身します。ダウンロードの「スタンダード版 ver.3 」からダウンロードしてください。

MoogaOneを全編バージョンアップしました [2008年4月25日]

スタンダード版、PopDiary版、ノスタルジック50-60's版、全ての index.htm, Template.htm, index.css, Template.css をバージョンアップしました。ページ内の各要素の余白の調整、レイアウトの調整のために index.css, Template.css を広範囲に変更しました。また、index.htm, Template.htm にも2点のみ変更があります。

<index.htm の変更>

(訂正前) <div class="BreadCrumb"><p>トップページ</p></div>

(訂正後) <div class="BreadCrumb">トップページ</div>

<index.htm, Template.htm 両方への変更>

<div class="Main">~</div>という名前の新たなセクションを設けました。 .Main セクションは、 .Banner セクションと .Bottom セクションの間に位置するものです。 index.htm においては .Alpha, .Beta, .Gamma を、 Template.htm においては .Lead, .Block のすべてを包含するものです。

<その他の変更>

ノスタルジック50-60's版のリストに使われる丸い箇条書きアイコン Ball.gif と BallGreen.gif のサイズを小さくしました。

『MoogaOneマニュアル』を改訂しました。

広範囲改訂のお知らせ<その2> [2008年4月23日]

マイナーチェンジとお伝えした4月25日の改訂は、かなり重要な部分に変更が加えられたため、バージョンチェンジとして扱わせていただきます。この改訂により各スタイルのバージョンは以下の様に変更されます。スタンダード版 3.0 PopDiary版 3.0 ノスタルジック50-60's版 4.0

広範囲改訂のお知らせ [2008年4月18日]

4月25日(金)にindex.css、Template.cssの広範囲にわたる改定が行われます。今回の改訂の目的は主にブロック内外の余白( margin と padding)を本来あるべき指定方法と値に訂正する事です。変更部分は多いですが、根本的改造ではなく、マイナーチェ ンジですので、元のcssに手を加えずそのままお使いになっていらっしゃる方は、4月25日新バージョン index.css、Template.css をそのままダウンロードして差し替えていただいても大丈夫と思います。念のためバックアップをとってから差し替えてください。

index.css のスタイルに訂正が入りました [2008年4月15日]

全てのバージョンのindex.cssの中の、.NewsMenu ul{ }をul.NewsMenu{ }に変更しました。以前の状態では全くスタイルがかかっていませんでした。また、Nostargic5060バージョンについては、「最新情報」内の ul と li について.NewsBlockで指定していたものを、他のバージョン同様.NewsMenuで指定するよう変更しました。

index.css Template.cssにスタイルが追加されました [2008年4月9日]

各バージョンのindex.css および Template.css において、印刷時の不規則な改ページを防ぐためのスタイルが追加されました。バナーセクション(とくに右上のトップリンク)が長くなった場合、印刷時に2ページ目の冒頭に大きな余白ができる現象を確認しました。これを防ぐため、index.css および Template.css 内、最下段の印刷指定用スタイル、 @media print{ } 内に以下のスタイルを追加しました。

.Banner{
float:none;
}

広島市立大学附属図書館様にご利用いただきました [2008年4月7日]

広島市立大学附属図書館様にご利用いただきました。

聖徳大学音楽学部様にご利用いただきました [2008年3月14日]

聖徳大学音楽学部様にご利用いただきました。

湘北短期大学図書館様にご利用いただきました [2008年2月20日]

湘北短期大学図書館様にご利用いただきました。Blockのタイトルと枠の色を図書館システムのイメージカラーに合わせていらっしゃいます。スッキリして清潔感がありますね。おサルさんのイラストは誰が…?

千葉大学大学院工学研究科人工システム科学専攻 機械系コース様にご利用いただきました [2008年2月19日]

千葉大学大学院工学研究科人工システム科学専攻 機械系コース様にご利用いただきました

うきうきブックマーク様にご利用いただきました [2008年1月16日]

うきうきブックマーク様にご利用いただきました。

東京大学大学院数理科学研究科図書室様にご利用いただきました [2008年1月7日]

東京大学大学院数理科学研究科図書室様にご利用いただきました。

『情報管理』にMoogaOneの記事が掲載されました 2007年11月16日]

『情報管理』2007年11月号 (v.50 no.8) p.481-491 に「本当のシンプルとは? ―作る人と使う人にユーザブルなWebページMoogaOne―」が掲載されました。内容はユーザビリティの本来の意味・ユーザビリティを正しくウェブページに反映する方法・MoogaOneにつぎ込まれたウェブユーザビリティなどです。

東京家政大学図書館様にご利用いただきました [2007年10月11日]

東京家政大学図書館様のサイト「学術情報を探すためのデータベース/インターネット・リンク集」にご利用いただきました。Standard Ver.2.1を使ってらっしゃいます。シックなグレーが基調です。

cssの切り替えでトップページのカラーを変えられるようにしました [2007年10月2日]

AllAboutのスタイルシートを切り替えられる機能を作るで紹介されていたシンプルなHTML組込型javascriptを使う方法で、トップページのcssを切り替えられるようにしてみました。ページ右上のプルダウンメニューから、任意のカラーを選んでください。ページの色が切り替わります。(「最新情報」のブロックの周りに標準指定色が残って見えるのはNiftyCornerのjavascriptとうまく連携できていないためです。解決方法は現在模索中。カウンタの色も。

Nostalgic50-60'版のトップページ以外のページのブロックの角も丸くなりました。 [2007年9月29日]

Nostalgic50-60'版において、ブロックの角を丸くするために NiftyCorners という javascript を用いていましたが、トップページ以外には反映されない状態が続いておりました。様々に検討した結果、トップページ以外のひな形 Template.htm のヘッダ内に、 、niftyCorners.css というスタイル指定のための css への参照が必要である事が判明したので、これを追加しました。今後はTemplate.htm から作成された全ページに、角の丸いブロックデザインが適用されます。

上記変更に伴い、Nostalgic50-60'版のバージョンは3.1から3.2になりました。

箇条書きアイコンが印刷されるようにスタイルを変更しました [2007年9月28日]

MoogaOne 各版にて使用されていた箇条書き用のアイコンは、 <li> タグの背景としてスタイル指定されていたため、印刷されませんでした。当該タグのスタイルに width:100%; を入れることで印刷されることが分かりましたので、全ての版に適用しました。

上記変更に伴い、各版のバージョンは以下のとおりになりました。Standard 1.0 -> 1.1, Standard 2.1 -> 2.2, PopDiary 2.3 -> 2.4, Nostalgic 50-60'3.0 ->3.1

PopDiary版のブロック左上に表示される画像の表示方法が変更されました [2007年9月28日]

PopDiary版のブロック左上に表示される灰色の三角形画像の表示方法が変更されました。今まで、一つ一つのブロックに<img>タグで挿入していた画像を、Template.css 内で、<h1>見出しタグの背景としてスタイル指定しました。今まで各ブロックに付していた<img>タグが不要になりました。

(訂正前)
<div class="Block">
<img src="BlockContour.png" class="BlockContour">
<h1>吾輩は猫である</h1>
<p><span>吾輩は猫である。名前はまだ無い。</span></p>
</div>

(訂正後)
<div class="Block">
<h1>吾輩は猫である</h1>
<p><span>吾輩は猫である。名前はまだ無い。</span></p>
</div>

この変更にともなって、Template.css 内の BlockContour というスタイル、および当該スタイルを Internet Explorer に正しく反映させるためのスターハックは削除されました。

[ PopDiary 版のユーザの皆様へ] この変更を反映するためには MoogaOne ダウンロードのページよりTemplate.cssをダウンロードし、現在お使いのものと差し替えていただくとともに、作成した全てのページのブロックに付された <img src="BlockContour.png" class="BlockContour"> を削除していただく必要があります。

上記変更に伴い、PopDiary版のバージョンは2.3となりました。

神奈川県内大学図書館相互協力協議会様にご利用いただきました [2007年9月6日]

神奈川県内大学図書館相互協力協議会様にご利用いただきました。Standard Ver.2.1を使ってらっしゃいます。index.cssとTemplate.cssの中の、<p>タグに指定された font-size:85%; を解除してサイズを非指定にしていらっしゃいます。

兵庫県立大学 神戸学園都市学術情報館様にご利用いただきました [2007年8月1日]

兵庫県立大学 神戸学園都市学術情報館様にご利用いただきました。Standard Ver.2.1を使ってらっしゃいます。

画像の使用を極力控えてかっこいいCSSデザインをやってみよう大会に参加しました [2007年5月21日]

画像の使用を控え(あるいは一切使用しないで)、スペース、ボーダー、配色などを駆使し、どれだけ美しいCSSデザインが作れるか皆で挑戦しよう! という趣旨の大会にMoogaOneのCSS(ちょっと変更あり)で「出品」してみました。Galleryメニューに入って、[表示]ボタンを押してください。

PopDiary版、Nostalgic50-60's版のlzh形式圧縮ファイルアップしました [2007年5月14日]

MoogaOne PopDiary版、Nostalgic50-60's版のlzh形式圧縮ファイルをダウンロードのページにアップしました。

Standard版2.1のlzh形式圧縮ファイルアップしました [2007年5月14日]

MoogaOne Standard版 2.1のlzh形式圧縮ファイルをダウンロードのページにアップしました。これでダウンロードがすごく楽になりました。今まで圧縮ソフトの使い方がよく分かっていなかったのです。ハズカシ、トホホ… PopDiary版、Nostalgic'50-'60版も近々圧縮ファイル形式をアップします。

日本赤十字秋田短期大学図書館様にご利用いただきました [2007年4月3日]

日本赤十字秋田短期大学図書館様にご利用いただきました。早速、NiftyCornersCube を利用して、お知らせブロックの角を丸くしてらっしゃいますね。

→新規システム導入に伴い、MoogaOneの使用は停止されました(2009年11月20日)

実践女子大学図書館様にご利用いただきました [2007年4月2日]

実践女子大学図書館、「学術情報資源」のページにご利用いただきました。PopDiary版をお使いになる初めてのユーザです。

拓殖大学図書館様にご利用いただきました [2007年4月2日]

拓殖大学図書館にご利用いただきました。スクールカラーのオレンジが鮮やかですね。

『短期大学図書館研究』にMoogaOneの記事が掲載されました [2007年3月14日]

『短期大学図書館研究』第26号(2007.3.25) p.105-110 に松山執筆の『MoogaOne - 作れる・使えるウェブページ』が掲載されました。平成18年度短期大学図書館全国研修会でお話させていただいた内容を整理したものです。ユーザビリティとMoogaOneのコンセプトを簡単に述べています。抜き刷りが20部ほど手元にあります。ご希望の方は松山まで連絡頂ければ郵送いたしますのでお問い合わせください。

Nostalgic'50-'60版の角を丸くするスタイルが変更されました [2007年2月16日]

Nostalgic'50-'60版のブロックの角を丸くするスタイルが変更されました。Alessandro Fulciniti氏によるJavaScriptとcssを使ったNiftyCornersCubeの最新版を適用しました。今までよりさらにHTMLソースは単純になりました。

今まで各ブロックの前後に挿入していた以下のようなソースが不要になりました。

<b class="Nbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>

また、それに対応していたcssのスタイルも不要になったので、cssファイルから削除しました。上記で実現していた角を丸くするスタイルは、全て外部JavaScriptファイルとcssファイルで制御されるようになりました。このため、あらたにniftycube.jsとniftyCorners.cssという2つのファイルをダウンロードしてトップページと同じ場所においていただく必要があります。印刷時のレイアウトにおいてブロックがタテに間延びして余計な余白が表示される現象はこれによりなくなりました。ただし、角は四角いままです。なお、上記変更に伴い、Nostalgic'50-'60版のバージョンは3.0となりました。

PopDiary版のテキスト罫線用cssスタイルが変更されました [2007年2月5日]

PopDiary版のテキスト罫線について、<p><span>ここ1つ目の段落の本文</span></p><p><span>ここ2つ目の段落の本文</span></p>と、複数の段落を連続して記述した場合、段落間の余白(高さ)がテキスト部分の罫線の高さと著しく異なるため、ノート風の見た目が崩れる事が分かりました。これを改善するため、index.cssおよびTemplate.cssにおいてpの上下マージンを10pxから20pxに増やしました。

p{margin:10px 15px 10px 15px;}

p{margin:20px 15px 20px 15px;}

トップページHTMLにバージョン情報を含めました。 [2007年2月5日]

スタンダード版 1 および 2、PopDiary版、Nostalgic50-60's版 それぞれの index.htm (トップページHTML)のヘッダ内に、バージョン情報を追記しました。

(例)
<meta name="keyword" content="MoogaOne Standard Ver.2.1">

MoogaOneマニュアル 2.0 を改訂しました [2007年2月3日]

MoogaOneマニュアル2.0 を改訂しました。1.0から2.0への移行に伴って、説明文中のソースの表記などを訂正しました。また、全編にわたって蛇足部分を削除、必要と思われるところはより詳細な説明を付け加えました。

PopDiary版にIE用のハックを追記しました [2007年2月2日]

PopDiary版のブロックの左上に表示される灰色の三角の画像について、使用するブラウザによってずれが生じる事が判明しましたので、.BlockContourというスタイルにInternet Explorer用のcssハックを追記しました。現在Window用IE6、FireFox2で正しく見える事が確認されています。追記したハックは以下のとおりです。

.BlockContour{
float:left;
margin:0;
padding:0px;
}
/*InternetExplorer用スターハック*/
*html .BlockContour {
margin:0px 0px 0px -3px;
}

リスト用のタグ<ul> <li> のcssを変更しました [2007年2月2日]

スタンダード版 2.0、PopDiary版 2.1、ノスタルジック50-60's版 2.0 に関して、リスト用タグ<ul> <li>のcssに変更があります。ulタグおよびliタグに使用していた .Menu というスタイル名を廃止し、ulタグおよびliタグそのものにデフォルトの状態で同様のスタイルを宛てるよう変更しました。これにより、

<ul class="Menu">
<li>リストの中身1</li>
<li>リストの中身2</li>
</ul>
と書いていたテキスト部分のためのHTMLが、

<ul>
<li>リストの中身1</li>
<li>リストの中身2</li>
</ul>
で済むようになりました。

逆に、通常のリスト以外の部分でulタグを使う場合は、それぞれのスタイルを個々に適用する必要が出ましたので、トップページの最新情報に使われているリスト、ナンバーつき箇条書きのリスト用のcssにスタイルが通常のリストと混同しないように変更を加えました。また、これに伴い、index.htm、Template.htmの中の<ul class="Menu">は、すべて<ul>に書き換えられました。この変更でバージョンナンバーはスタンダード版 2.1、PopDiary版 2.2、ノスタルジック50-60's版 2.1 となりました。以下はindex.cssの変更前および変更後のスタイルです。

.Menu{
clear:left;
list-style:none;
margin:5px 0px 10px 10px;
padding:0px;
}

.Menu li{
background:URL(Triangle.gif) no-repeat top left;
line-height:135%;
text-align:left;
font-size:85%;
margin:0px;
padding:0px 15px 0px 12px;
}

.NewsMenu{
list-style-type:none;
background:#ccccfff;
margin:0px;
padding:0px;
}

.NewsMenu li{
list-style-type:none;
line-height:135%;
margin:0px;
padding:0px;
}

.Number{
clear:left;
list-style:none;
margin:5px 0px 10px 10px;
padding:0px;
}

.Number li{
line-height:150%;
text-align:left;
font-size:85%;
margin:0px;
padding:0px 15px 0px 0px;
}

ul{
clear:left;
list-style:none;
margin:5px 0px 10px 10px;
padding:0px;
}

li{
background:URL(Triangle.gif) no-repeat top left;
line-height:135%;
text-align:left;
font-size:85%;
margin:0px;
padding:0px 15px 0px 12px;
}

.NewsMenu ul{
background:#ccccff;
list-style-type:none;
margin:0px;
padding:0px;
}

.NewsMenu li{
font-size:100%;
line-height:135%;
list-style-type:none;
margin:0px;
padding:0px;
}

.Number ul{
clear:left;
list-style:none;
margin:5px 0px 10px 10px;
padding:0px;
}

.Number li{
background:none;
font-size:85%;
line-height:150%;
text-align:left;
margin:0px;
padding:0px 15px 0px 0px;
}

PopDiary版のノート風罫線に関するcssを変更しました [2007年2月2日]

PopDiary版のテキストに付されているノート風罫線に関するcssに変更があります。spanタグに使用していた .Ruler というスタイル名を廃止し、spanタグそのものにデフォルトの状態で同様のスタイルを宛てるよう変更しました。これにより、

<p><span class="Ruler">ここにテキスト<span></p> と書いていたテキスト部分のためのHTMLが、

<p><span>ここにテキスト<span></p> で済むようになりました。

逆に、テキスト以外の部分でspanタグを使う場合は、罫線を付さない元の設定に戻すためのいわゆる「戻しスタイル」を適用する必要が出ましたので、トップリンクの仕切りに使っているspanには、 .TopLink span{border:none;} という1行をcssに追加する事で罫線が付かないようにしました。

また、テキスト行の右端をタテにそろえるためのtext-justifyという要素も追加し、左右のパディングを5ピクセルずつ追加した事で、より自然な見た目を実現しました。これらの変更は index.css および Template.css に施されました。これらのマイナーチェンジによりPopDiary版のバージョンは2.1になりました。以下はTemplate.cssの変更前および変更後のスタイルです。

なお、ブラウザのテキスト表示サイズを変更した時の罫線のずれに関しては未解決です。

p{
font-size:85%;
line-height:175%;
border-top:1px solid #cccccc;
border-bottom:1px solid #cccccc;
margin:10px 15px 10px 15px;
padding:0px;
}

.Ruler{
line-height:175%;
border-bottom:1px solid #cccccc;
padding-top:4px;
padding-bottom:4px;
}

p{
font-size:85%;
line-height:175%;
text-align:justify;
text-justify:inter-ideograph;
border-top:1px solid #cccccc;
border-bottom:1px solid #cccccc;
margin:10px 15px 10px 15px;
padding:0px 5px 0px 5px;
}

span{
line-height:175%;
border-bottom:1px solid #cccccc;
padding-top:4px;
padding-bottom:4px;
}

.TopLink span{
border:none;
}

MoogaOneスタンダード版2.0をリリースしました[2007年2月1日]

ウェブページ作成者に、より分かりやすくスタンダードなひな形を目指し、HTMLとcssにさらなる変更を加えたMoogaOneスタンダード版2.0をリリースしました。トップページ[ダウンロード]をご覧ください。これに伴い2007年1月31日までのバージョンをMoogaOneスタンダード版1.0と称します。また、PopDiary版およびノスタルジック50-60's版のHTMLとcssもMoogaOne2.0に準拠したものになりました。1.0と2.0は見出しのタグ構成などが異なるため、混在はできませんのでご注意ください。また、2.0より英語用版ページは提供を中止しました。1.0との相違点については以下をご参照ください。

MoogaOne ノスタルジック50-60's版を作りました [2007年1月31日]

1950~60年代の洋物デザインをイメージしたMoogaOne ノスタルジック50-60's版を作ってみました。トップページ[ダウンロード]をご覧ください。

ひな形が修正されました [2006年12月1日]

HTMLとcssのひな形について以下の修正を施しました。

MoogaOne PopDiary版を作りました [2006年11月30日]

「シンプルで見やすいけど、余りに地味」とのご指摘を受けて、ちょっとだけおしゃれなひな形PopDiary版を作ってみました。トップページ[ダウンロード]をご覧ください。

リストのcssに追加・変更があります [2006年11月9日]

index.css および Template.css 内にある、リストを表示するための<UL>タグに使用していた"Menu"という名前のCLASSに追加して、新たに"Number"という名前のCLASSを作りました。下記の例ような番号つきリストを想定したスタイルです。

  • 1. 幕末マニアがゆく
  • 2. めけさせのすみちょびれ
  • 3. ガチャピン空を飛ぶ

<UL CLASS="Number">
<LI>1. 幕末マニアがゆく
<LI>2. めけさせのすみちょびれ
<LI>3. ガチャピン空を飛ぶ
</UL>

番号つきリストには、<UL>タグの代わりに<OL>タグを使うか、cssで list-style:decimal; という指定をすれば、自動的に番号を振ってくれますが、あえてプレーンな<UL>タグを使って、番号自体も手打ちで入れていただく仕様にしました。ソースを見たときに番号自体が見えた方が管理がしやすいと判断したためです。また、.Menu LI 内に含まれていた list-style:none; は .Menu 内で既に指定しており、不要であることが判明しましたので削除しました。

.Menu{
clear:left;
margin:5 0 10 20;
padding:0;
list-style:none;
}

.Menu LI{
list-style:none;
background:URL(Triangle.gif) no-repeat top left;
line-height:150%;
text-align:left;
font-size:85%;
margin:0;
padding:0 15 0 12;
}

.Menu{
clear:left;
list-style:none;
margin:5 0 10 20;
padding:0;
}

.Menu LI{
background:URL(Triangle.gif) no-repeat top left;
line-height:150%;
text-align:left;
font-size:85%;
margin:0;
padding:0 15 0 12;
}

.Number{
clear:left;
list-style:none;
margin:5 0 10 20;
padding:0;
}

.Number LI{
line-height:150%;
text-align:left;
font-size:85%;
margin:0;
padding:0 15 0 0;
}

神奈川県図書館協会職員研修会でMoogaOneの発表をしました [2006年11月9日]

2006年11月7日(火)、関東学院大学関内メディアセンターで行われた神奈川県図書館協会第6回職員研修会において「MoogaOne - 作れる・使えるウェブページ」と題する発表を行ってきました。ユーザビリティとは何か、ウェブサイトユーザビリティとは何か、HTMLとcssの役割分担、cssデザインを体験する、MoogaOneを使ってページを作る。実習を含め2時間半の長丁場でしたが、皆さん熱心に聞いていらっしゃるようでこちらも熱が入りました。参加していただいた皆さん、ありがとうございました。

ひな形にマイナー修正を行いました [2006年10月24日]

HTMLとcssのひな形について以下の修正を施しました。いずれも機能には影響がありません。

MoogaOneマニュアルを改訂しました [2006年10月13日]

MoogaOneマニュアルの「7-4. change_textの活用」に注意情報を付加しました。change_textを使用する時、文字コードが混在した複数ファイルの処理時にエラーが起こる場合がある事が判明しましたので、その点についての注意です。

Template.cssを改訂しました [2005年10月3日]

Template.cssを一部改訂しました。長いページの印刷時、用紙が2枚以上に渡った時に、一部内容が印刷されない現象を改善するため、以下の点を変更しました。Template.css 内、@media print の中の .Lead と .Block について、

float:left;
width:100%;

float:none;

MoogaOneマニュアルを改訂しました [2006年9月30日]

MoogaOneマニュアルを全面的に改訂しました。冗長な部分は削除し、必要と思われる部分は説明を付加しました。また、見出しのフォントにメリハリをつけ、見やすくしました。ところどころにあった「囲み記事」を本文にコンバートしました。ソースの部分のフォントにOCRフォントを使って見やすくしました。

私立短期大学図書館協議会でMoogaOneの発表をしました [2006年9月14日]

2006年9月7日(木)と8日(金)、東京ガーデンパレスで行われた平成18年度私立短期大学図書館協議会全国研修会において「MoogaOne - 作れる・使えるウェブページ」と題する発表を行ってきました。7日(木)は全大会においてウェブページユーザビリティとMoogaOneのコンセプトについての講演、8日(金)はホームページ分科会においてMoogaOneを使った実際のウェブページ作成の手順についてお話させていただきました。参加していただいた皆さん、ありがとうございました。

東邦大学医学メディアセンター様にご利用いただきました [2006年6月1日]

東邦大学医学メディアセンター様にご利用いただきました。MoogaOneに欠けていた、美しさ、親しみやすさを補完したウェブページです。画像の配置もcssで制御されてすっきりしています。

若葉FCウェブサイトに利用されました [2006年4月14日]

少年サッカークラブ、若葉FC(東京都立川市)に利用しました。このサイトは松山が個人的に関わっているチームのサイトです。チームカラーのコバルトブルーを基調にした色使いに変更してあります。

農林水産研究情報センター MAFFIN News Feeds Center にご利用いただきました [2006年3月3日]

以前からMoogaOneをご利用いいただいている農林水産研究情報センター様サイトで、新たに新着情報のRSSによる配信センターポータルの MAFFIN News Feeds Center にもお使いいただきました。RSSリーダやRSSリーダ機能付きブラウザによる情報収集が一般的になりつつあります。RSS配信に必要な rdf ファイルのひな型も MoogaOne で提供しようかと考えています。

図書館向けとの触れ込みをやめました [2006年2月16日]

当初、図書館サイト向けのひな型としてスタートしたMoogaOneですが、図書館以外のサイトにも十分使用可能であるとの認識から、図書館サイト用との記述をすべて排除しました。

谷口興紀様にご利用いただきました [2006年2月9日]

大阪産業大学環境デザイン学科の谷口興紀様サイトのトップページに MoogaOne をご利用いただきました。

各ページのタイトル表示に区切り記号:(全角コロン)を挿入しました [2005年12月20日]

各htmのページタイトルを「ここにタイトル ご自分の図書館名」から「ここにタイトル:ご自分の図書館名」と、スペースではなく全角コロンで区切るよう変更しました。サーチエンジンで検索した結果などが見やすくなります。[対象ファイル:index.htm, Template.htm, TwoColumns.htm]

MoogaOneマニュアル「6-3. MoogaOneに使われている色」を訂正しました [2005年12月19日]

MoogaOneマニュアル「6-3. MoogaOneに使われている色」を訂正しました。[訂正前] #0000cc (青) [訂正後] #0000ff (青)

柴田科学株式会社粒子生物課様にご利用いただきました [2005年11月21日]

測定・分析機器・試験装置のメーカー柴田科学株式会社サイト内、 「粒子生物」 のページに MoogaOne をご利用いただきました。ページ内に「このページのトップに戻る」リンクはオリジナルにはないものです。

農林水産研究情報センター様にご利用いただきました [2005年10月18日]

つくば市にある農林水産研究情報センターのサイト内、 「農林水産関係試験研究機関 総合目録」 のページに MoogaOne をご利用いただきました。オリジナルにはないスクロールバーのスタイルが追加されています。

雑誌 『専門図書館』 に MoogaOne の記事が掲載されました [2005年10月4日]

雑誌 『専門図書館』 (専門図書館協議会発行) No.213 (2005-III) p.41-50 に松山の執筆した 「MoogaOne: 作り手には作りやすく、使い手には使いやすく」が掲載されました。2005年6月24日に日本科学未来館で行われた専門図書館協議会平成17年度全国研究集会で発表した内容をまとめたものです。内容は、このサイトでも触れているユーザビリティの概念、 HTML と css のあり方、MoogaOne の構成についてです。

Template.htm の Design Concept by MoogaOne の表示を削除しました [2005年9月22日]

Template.htm, Template-e.htm, TwoColumns.htm, TwoColumns-e.htm の Design Concept by MoogaOne の表示を削除しました。あまりあちこちで MoogaOne MoogaOne って言われるのも、うざったいと思ってのことです。この表示はトップページ(index.htm, index-e.htm)だけに残します。

各ファイルの修正履歴が分かる仕組みを導入しました [2005年9月22日]

MoogaOne 各ファイルの修正履歴が分かるよう、修正履歴のページを作りました。また、MoogaOne 各HTMLファイル内に以下のような META タグを追加しました。<META NAME="Date" CONTENT="20050811"> また、各 css ファイルには冒頭に以下のようなテキストを追加しました。 /*最終修正日 2005年8月11日*/ いずれも、このファイルが最後に修正を加えられた日付を表します。

META タグの Keywords は削除しました [2005年9月22日]

MoogaOne 各ファイルソースの冒頭にある以下の META タグを削除しました。<META NAME="Keywords" CONTENT="MoogaOne"> このタグは作成者が必要に応じて使用してください。

Template.css の @media print{ } 内を訂正しました [2005年9月18日]

Template.css を訂正しました。/*プリント時のスタイル*/ の下から始まる @meida pint { } 内の訂正です。訂正箇所は以下の2点です。 [訂正前1] .Lead{float:left; width:100%} [訂正後1] .Lead{float:none;} [訂正前2] .Block{float:left; width:100%} [訂正後2] .Block{float:none;} この訂正により、印刷時にページ途中で途切れたり、ページが抜けたりする現象がなくなります。

index.css を訂正しました [2005年9月13日]

index.css を訂正しました。訂正箇所は以下の通りです。 [訂正前] .Menu LI{padding:0 0 0 10;} [訂正後] .Menu LI{padding:0 15 0 10} この訂正により、トップページのブロック右内側の余白が適正になります。

2段組(2段カラム)ページ用のひな型を追加しました [2005年8月30日]

2段組(2段カラム)ページ用のひな型をダウンロードメニューに追加しました。名前は TwoColumns.htm, TwoColumns-e.htm (以上HTML) TwoColumns.css (以上css) です。 Template.htm (1段カラム)の変則型としてお使いください。 Template.css と共に TwoColumns.css という css ファイルを参照しています。2つの css に参照するのが煩雑であれば、TwoColumns.css の内容を Template.css 内にコピペしてこれら2つの css を統合して利用すれば Template.css に参照させるだけで済みます。

Design Concept by MoogaOne のリンク先を変更しました [2005年7月29日]

MoogaOne のウェブページが引っ越しました。これに伴い、 MoogaOnePack 中の index.htm, index-e.htm, Template.htm, Template-e.htm のソースについて、最下段に表示される Design Concept by MoogaOne のリンク先を変更しました。(旧リンク先) http://homepage2.nifty.com/anapa/MoogaOne/index.html (新リンク先) http://mook.mook.to/MoogaOne/index.htm

リンクにマウスを重ねたときの色を赤にしました [2005年7月19日]

MoogaOneの全てのページにおいて、リンクの上にマウスを持っていったとき、文字の色が赤くなるようなスタイルを Template.css に追加しました。どこがクリックできるのかをよりはっきり分かるようにするためと、クリックすること自体を誘導するためのものです。追加した css は以下のとおりです。A:HOVER{color:#f00;}

Template.ccs のテーブルに関する css を訂正しました [2005年7月12日]

テーブルの罫線を1ピクセルにするための css (2005年7月11日導入)を訂正しました。罫線の太さを指定する部分に単位 (px) 指定を追加しました。単位指定が抜けていたため、主にマッキントッシュ用ブラウザで罫線が表示されないなどの問題が判明したためです。

Template.ccs の<TABLE><TH><TD>タグを訂正しました。マニュアルの「5-4-(b). テーブル(表組み)を訂正しました [2005年7月11日]

Template.ccs の<TABLE><TH><TD>タグを訂正しました。<TABLE>タグ内に書き込んでいたスタイルは廃し、cssで指定するよう変更しました。それにともなって、マニュアルの「5-4-(b). テーブル(表組み)を訂正しました。

マニュアルの「6-3. MoogaOneに使われている色」を訂正しました [2005年6月29日]

マニュアルの「6-3. MoogaOneに使われている色」を訂正しました。LeadセクションとBlockセクションの色の表記が逆でした。また、トップページのNewsセクションの背景に使用されている色(ウエブカラーナンバー #ccccff)が抜けていたのを追加しました。

<META NAME="Keywords" CONTENT="Design Concept by MoogaOne"> を 変更しました。[2005年6月28日]

MoogaOnePack中のindex.htm, index-e.htm, Template.htm, Template-e.htm のソースについて、<META NAME="Keywords" CONTENT="Design Concept by MoogaOne"> を <META NAME="Keywords" CONTENT="MoogaOne"> に変更しました。フレーズをキーワードとして登録するのは不適切と判断したためです。

マニュアルの「著作権」の項目を訂正しました [2005年6月28日]

マニュアルの「著作権」の項目を訂正しました。著作権者から国際基督教大学図書館を削除しました。ウェブページのひな型の著作権はひな型の作成者にあるとの考えからです。ただし、ひな型から作成された特定の組織のサイトはその組織が著作権者であると考えます。

専門図書館協議会平成17年度全国研究集会でMoogaOneを発表しました [2005年6月27日]

6月24日、お台場の日本科学未来館で行われた専門図書館協議会平成17年度全国研究集会で「MoogaOne:作り手には作りやすく、使い手には使いやすく」と題して、講演を行いました。使用した PowerPoint のプレゼンテーション書類を公開します。ファイルサイズの関係上、二つに分けてアップしました。この内容の発表をぜひ聞いてみたいという方、講師として呼んでください。どこへなりと出かけてお話させていただきます。(笑) 全内容をお話しするには、フルで約2時間かかりますが、1時間30分までなら短縮できると思います。

MoogaOne掲示板を開設しました [2005年6月17日]

MoogaOne掲示板を開設しました。トップページの「MoogaOne掲示板」からお入りください。MoogaOneに関するご意見・ご質問・ご提案をお待ちしております。

マニュアルに「css参照自動訂正機能」の項目を追加しました [2005年6月15日]

MoogaOneマニュアルに「css参照自動訂正機能」の項目を追加しました。ウェブページ作成ソフトによっては、ファイルを保存する階層を変更しただけで、cssファイルへの参照を自動的に変更してくれるものがあるので、それについての注意です。

マニュアルに「6-5. 視覚・色覚障害者への配慮」の項目を追加しました [2005年6月8日]

MoogaOneマニュアルに「6-5. 視覚・色覚障害者への配慮」の項目を追加しました。読み上げソフトのユーザのために、ページの冒頭に、そのページのコンテンツの始まる部分へジャンプできる隠しリンクを付す技術です。また、色覚障害者への対応として、ColorAccessというフリーソフトを使って使用する色のチェックをお薦めしています。

参照バナー名を変更しました [2005年6月3日]

MoogaOnePackのHTMLについて、MoogaOneLibrary.gif (MoogaOnePack内のサンプル画像)が参照されていたバナー部分を、「ご自分で用意したバナー画像の名前」に変更しました。マニュアルも、この変更に対応するよう改訂しました。

Generator指定を削除しました [2005年6月3日]

MoogaOnePackのHTMLのMETAタグ中のGENERATOR(作成時使用ソフトの宣言)を削除しました。削除したタグの内容は以下のとおりです。<META NAME="GENERATOR" CONTENT="IBM WebSphere Studio Homepage Builder Version 9.0.2.0 for Windows"> だって皆が HomepageBuilder 使ってるわけじゃありませんから。ウソはいけません。

マニュアルに「1-6. 著作権」の項目を追加しました [2005年6月1日]

MoogaOneマニュアルに「1-6. 著作権」の項目を追加しました。

MoogaOneマニュアルの「2-1. バナー画像を用意する」および関連項目を改訂しました。

Mooga2 テスト良好です [2005年5月17日]

Movable Typeを使ったMooga2のテストは良好です。このまま順調に開発が進めば、2005年秋には完成しそうです。…てなこと言ってますがもっと遅れる可能性あり。

ID はすべて CLASS に変更しました [2005年5月16日]

MoogaOnePack内のcssに使われている # はすべて .(ピリオド)に変更になりました。これに伴い、index.htm、Template.htm ほか全てのHTML内の ID= は、CLASS= に変更になりました。2005年5月16日以前にダウンロードされた方は、ご注意ください。

お問い合わせメールはmoogaone@gmail.com(@は小文字にして)まで

Design Concept by MoogaOne