更新履歴フレームの実験と解説のページ

ホーム

実行すると以下ようになります。

最新記事 '08/02/07 更新

'08/02/07:
  • サイトリンク追加:BLOW
    関西でBOφWYコピーバンドとして活動中のBLOWさんのサイト、ギターはもちろんホテヒさんです。
    ライブ音源、映像、掲示板っとBOφWYライクな雰囲気を存分に楽しめます^^
    相互リンクしていただきました♪
'08/02/03:
  • 音源投稿コーナー:gkさんの LONDON GAME(case of バージョン) を追加しました^^
'08/01/11:
  • 音源投稿コーナー:naoさんの音源(CASE OF バージョン)を3曲追加&更新しました^^
  1. cloudy heart
  2. moral
  3. ONLY YOU
'08/01/08:
  • 音源投稿コーナー:えーのさん自作のギタオケMORAL(case of バージョン)を追加しました^^
'08/01/05:
  • サイトリンク追加:hiroshiのホームページ作成テクニック
    管理人hiroshiによるホームページ作成支援サイトです。
    今までに覚えたテクニックで実用的なところを中心にご紹介しております。興味のあるかたは覗いてみて下さい。
'08/01/01:明けましておめでとうございます 本年も宜しくお願い申し上げます^^
  • 音源投稿コーナー:新しいテクノロジ〜を使ってデザインを変更いたしましたw
    表示がおかしい・・・とか、動いていない・・・とか、前のほうがよかったよw・・・といったご意見がございましたらお手数をお掛けいたしますが、ご一報お願いします(^^;

解説

特徴を次に示します

  1. 背景が透過します
  2. 更新したページなどへのリンクも貼れます。
  3. CSSや、HTMLタグによるデザインが有効です。

「BOφWY時代の布袋寅泰さんは神様です!」のトップページでサイトの更新履歴表示のために 使っている一見インラインフレーム風に見えるけど、実は通常のHTMLタグを並べただけのWeb部品です。

外部スタイルシート(css)で定義しています。

実験

実験方法がわからない場合は、次のような手順で実施してください。

  1. 適当な名前で「空のウェブサイトを作成」でウェブサイトを新規作成します。
  2. 作成したウェブサイトフォルダーを右クリックし「新しい項目の追加」で CSS(名前.css 例:hiroshi1986.cssなど)を作成し、下のhiroshi1986.cssのコード部分を コピー&ペーストします。
  3. 作成したウェブサイトフォルダーを右クリックし「新しい項目の追加」でHTML (名前.hthl 例:update-history_frame.htmlなど)を作成し、 下のupdate-history_frame.htmlのコード部分をコピー&ペーストします。
CSS(hiroshi1986.css)のコードは以下のようになっています。
body
{
font-size: 80%;
line-height: 1.6;
padding: 1ex;
background-color: #fcfcff;
}
h1
{
font-size: 110%;
font-weight: 600;
margin-bottom: 1.5ex;
}
h2, h3, h4, h5, h6
{
font-size: 95%;
font-weight: 500;
margin-bottom: 1.5ex;
}
ul
{
padding-right: 0px;
padding-left: 1em;
padding-bottom: 0px;
padding-top: 0px;
margin: 1ex;
}
ol
{
padding-right: 0px;
padding-left: 1em;
padding-bottom: 0px;
padding-top: 0px;
margin: 1ex;
}
.Update-history_frame
{
line-height: normal;
font-size: small;
border-right: 1px inset;
border-top: 1px inset;
border-left: 1px inset;
border-bottom: 1px inset;
overflow: auto;
width: 95%;
height: 10ex;
margin-left:1em;
margin-bottom: 1ex;
}
.Update-history_frame .offset1
{
margin: 0em 0em 0em 0em;
text-indent: 7ex;
}
HTML(update-history_frame.html)のコードは以下のようになっています。
青色の参照先は稼動させる環境に合わせてください。
緑色の部分が更新履歴データーになります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<link href="../css/hiroshi1986.css" rel="stylesheet" type="text/css" />
<title>更新履歴フレームのサンプル</title>
</head>
<body>
<h1>最新記事 '08/02/07 更新</h1>
<div class="Update-history_frame">
'08/02/07:<ul><li>サイトリンク追加:<a href="http://www.geocities.jp/blow_boowy/index.html">BLOW</a><br />関西でBOφWYコピーバンドとして活動中のBLOWさんのサイト、ギターはもちろんホテヒさんです。<br />ライブ音源、映像、掲示板っとBOφWYライクな雰囲気を存分に楽しめます^^<br />相互リンクしていただきました♪</li></ul>

'08/02/03:<ul><li>音源投稿コーナー:gkさんの LONDON GAME(case of バージョン) を追加しました^^</li></ul>

'08/01/11:<ul><li>音源投稿コーナー:naoさんの音源(CASE OF バージョン)を3曲追加&更新しました^^</li></ul>
<ol class=offset1><li>cloudy heart</li><li>moral</li><li>ONLY YOU</li></ol>

'08/01/08:<ul><li>音源投稿コーナー:えーのさん自作のギタオケMORAL(case of バージョン)を追加しました^^</li></ul>

'08/01/05:<ul><li>サイトリンク追加:<a href="http://www.hiroshi1986.net/web_site_making/index.html">hiroshiのホームページ作成テクニック</a><br />管理人hiroshiによるホームページ作成支援サイトです。<br />今までに覚えたテクニックで実用的なところを中心にご紹介しております。興味のあるかたは覗いてみて下さい。</li></ul>

'08/01/01:明けましておめでとうございます 本年も宜しくお願い申し上げます^^<ul><li>音源投稿コーナー:新しいテクノロジ〜を使ってデザインを変更いたしましたw<br />表示がおかしい・・・とか、動いていない・・・とか、前のほうがよかったよw・・・といったご意見がございましたらお手数をお掛けいたしますが、ご一報お願いします(^^;</li></ul>
</div>
</body>
</html>