WANtaroHP j

ページ構造
CSS ファイル
比較的よく用いるクラス
限定的な使用クラス
ファビコン
バナー風画像
スタンプ風画像

ページ構造

このサイトの各ページは，下図に示す構造となっています．

id 名	説明	幅
container	記載部分全体を載せる入れ物	1000px
top	ヘッダー	1000px
navi	左メニュー	100px
main	本文	900px
bottom	フッター	1000px

CSS ファイル

Filename	Description
csmain.txt	CSS file

比較的よく用いるクラス

リスト
<ul class="doc">	通常の箇条書き（リンク無し）
<ul class="lilink">	箇条書きを用いたページ内リンク
テーブル
<table><tbody>	色無し・ボーダー無し，リンク無し
<table><tbody class="Ctbl">	青系色．文字を中央揃えにする
<table><tbody class="Ltbl">	青系色．文字を左揃えにする（文字列のみの表など）
<table><tbody class="Rtbl">	青系色．文字を右揃えにする（数表など）
<table><tbody class="tbllink">	緑系色．プログラムファイルやデータファイルにリンクする
<tr class="line">	テーブルでのリンクの最下段に実線を引く
<table><tfoot class="tblcom">	(本文backgroundと同色) 表欄外に注釈・補助的解説を記述
スクロール・バー
<div class="scrcode"><pre> ..... </pre></div>	スクリプトやプログラムの一部を表示する黒背景に水色文字を採用
グリッド表示
<div class="grid"> ...... </div>	写真・画像などをグリッド表示する
<div class="unit"></div>	一塊の表示後，floatをクリアするタグを忘れずに！

グリッド表示使用例

<div class="grid">
<img src="pic20140227/200-train_asama.JPG" alt="pic" width="200"><br>
<a href="pic20140227/600-train_asama.JPG" target="_blank">長野新幹線あさま</a>
</div>
<div class="grid">
<img src="pic20140227/200-train_shinano.JPG" alt="pic" width="200"><br>
<a href="pic20140227/600-train_shinano.JPG" target="_blank">特急ワイドビューしなの</a>
</div>
<div class="unit"></div>

限定的な使用クラス

ImageMagickの色見本のページでのテーブル

ImageMagick 色見本用テーブル
<table><tbody class="col1">	英字頭文字で色の名前の先頭にジャンプするリンクに用いてる
<table><tbody class="col2">	色短冊・色名等の表示部分に用いる

左メニューでのページ間リンク

左メニュー中で，Home，Index，Aboutのページにジャンプするメニューに用いる．左メニュー中では，以下のように使っている．

<ul class="navlink">
<li><a href="index.html">Home</a></li>
<li><a href="j_n_contents.html">Index</a></li>
<li><a href="j_n_about.html">About</a></li>
</ul>

トップページ本文メニューでのページ間リンク

トップページ本文メニュー中で，Home，Index，Aboutのページにジャンプするメニューに用いる．リンク部の色は左メニューに合わせてある．メニュー中では，以下のように使っている．

<table><tbody class="index">
<tr><th>ページ名</th><th>説明</th></tr>
<tr><td class="icol1"><a href="index.html"       >Home </td><td class="icol2">このページです．</td></tr>
<tr><td class="icol1"><a href="j_n_contents.html">Index</td><td class="icol2">掲載記事の目次です．</td></tr>
<tr><td class="icol1"><a href="j_n_about.html"   >About</td><td class="icol2">管理人の独り言，このサイトについて</td></tr>
</tbody></table>

リストを利用した横メニュー

本文中で，Home，ページ先頭，ページ末尾にジャンプするメニューに用いる．本文中では，以下のように使っている．

<ul class="menu-late">
<li><a href="index.html#top">▲ Home</a></li>
<li><a href="#top">△ Top</a></li>
<li><a href="#bottom" class="last">▽ Bottom</a></li>
</ul>

ファビコン

ファビコンを作成するImagemagickのバッチコマンドです．

convert -trim -background none -fill white -font c:\Windows\Fonts\timesbd.ttf -pointsize 14 label:M test0.png
convert -size 16x16 canvas:brown test1.png
composite -gravity center test0.png test1.png test2.png
convert test2.png -colors 256 favicon.ico

作成したファビコンを使用するには，以下を<head>に追加します．画像ファイル favicon.ico が入っているディレクトリにパスを通しておくのは勿論です．

<link rel="shortcut icon" href="favicon.ico">

バナー風画像

左メニューで用いている，バナー風画像を作成する ImageMagick のバッチコマンドです．

rem *************************************************************************
rem Create banner
rem *************************************************************************
convert -trim -background none -fill navy -font c:\Windows\Fonts\arialbd.ttf -pointsize 14 label:WANtaroHP wan0U.png
convert -trim -background none -fill navy -font c:\Windows\Fonts\arialbd.ttf -pointsize 14 label:Fortran90 wan0D.png
convert -bordercolor none -border 0x3 wan0U.png temp0U.png
convert -bordercolor none -border 0x3 wan0D.png temp0D.png
convert -size 88x31 plasma:white-white wan3b.png
composite -gravity north temp0U.png wan3b.png temp1.png
composite -gravity south temp0D.png temp1.png temp.png
convert -raise 3 temp.png wan1.png

convert -trim -background none -fill navy -font c:\Windows\Fonts\arialbd.ttf -pointsize 14 label:WANtaroHP wan0U.png
convert -trim -background none -fill navy -font c:\Windows\Fonts\arialbd.ttf -pointsize 14 label:MathJax wan0D.png
convert -bordercolor none -border 0x3 wan0U.png temp0U.png
convert -bordercolor none -border 0x3 wan0D.png temp0D.png
convert -size 88x31 plasma:white-white wan3b.png
composite -gravity north temp0U.png wan3b.png temp1.png
composite -gravity south temp0D.png temp1.png temp.png
convert -raise 3 temp.png wan2.png

convert -trim -background none -fill navy -font c:\Windows\Fonts\arialbd.ttf -pointsize 14 label:WANtaroHP wan0U.png
convert -trim -background none -fill navy -font c:\Windows\Fonts\arialbd.ttf -pointsize 14 label:Home(FC2) wan0D.png
convert -bordercolor none -border 0x3 wan0U.png temp0U.png
convert -bordercolor none -border 0x3 wan0D.png temp0D.png
convert -size 88x31 plasma:white-white wan3b.png
composite -gravity north temp0U.png wan3b.png temp1.png
composite -gravity south temp0D.png temp1.png temp.png
convert -raise 3 temp.png wan3.png

del temp*.png

スタンプ風画像

左メニューおよび本文下部に表示している，スタンプ風画像を作成する ImageMagick のバッチコマンドです．

convert -size 600x100 xc:"#eee9e9" -font Verdana -pointsize 30 ^
-fill black     -annotate +24+64 "WANtaroHP (Fortran and Drawings)" ^
-fill white     -annotate +26+66 "WANtaroHP (Fortran and Drawings)" ^
-fill "#eee9e9" -annotate +25+65 "WANtaroHP (Fortran and Drawings)" ^
fig_test.jpg
convert -trim +repage fig_test.jpg logo2.jpg

convert -size 600x100 xc:"#eee9e9" -font Verdana -pointsize 50 ^
-fill black     -annotate +24+64 "WANtaroHP" ^
-fill white     -annotate +26+66 "WANtaroHP" ^
-fill "#eee9e9" -annotate +25+65 "WANtaroHP" ^
fig_test.jpg
convert -trim +repage fig_test.jpg fig_test1.jpg
convert -size 600x100 xc:"#eee9e9" -font Verdana -pointsize 30 ^
-fill black     -annotate +24+64 "Fortran & Drawings" ^
-fill white     -annotate +26+66 "Fortran & Drawings" ^
-fill "#eee9e9" -annotate +25+65 "Fortran & Drawings" ^
fig_test.jpg
convert -trim fig_test.jpg fig_test2.jpg
convert -append fig_test1.jpg fig_test2.jpg +repage fig_test3.jpg
convert -rotate -90 fig_test3.jpg logo.jpg

identify fig_test1.jpg
identify fig_test2.jpg
identify fig_logo.jpg

WANtaroHP (CSS)

Contents