Outline of this page
Contents |
---|
ファビコン |
テストページ |
フォーマットの調整 |
色の設定 |
ページ内ジャンプメニュー |
Contents |
---|
ファビコン |
テストページ |
フォーマットの調整 |
色の設定 |
ページ内ジャンプメニュー |
WANtaroHP のファビコンを設定してみました. イメージは,我が家の愛犬ルーク君とミック君のイメージです. 背景色の茶色と文字色の白はルーク君,文字の「M」はミック君を示します.
ファビコン作成には 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
また,各ページの<>に,以下の1文を入れてファビコンを表示させています.
<link rel="shortcut icon" href="favicon.ico">
下のボタンを押せば,このサイトのレイアウトの概要を示すテストページを見ることができます.
テストページでは,ページ構成を示すため,メニュー部分 (navi area) を黄色,本文部分 (main area) を水色に変更してあります.
下のリンクにテストページで読み込んでいるcssファイルを示しています.
Filename | Description |
---|---|
cstest.txt | テストページ用 css |
実際のページは,下に示すように html と body の間にコンテンツを書き込んだ無装飾の html ファイルを作成し,Fortran プログラムで書式を整えられています.
<html> <body> ..... ..... (contents) ..... ..... </body> </html>
実際の css ファイルおよび書式調整プログラム・入力データは以下のとおりです.ここでは英語用を表示するようにしています.
Filename | Description |
---|---|
f90_HP5set.txt | 書式調整用 f90 プログラム (実際の拡張子は '.f90') |
inp_flist.txt | ページタイトル用入力データ |
inp_foot.txt | フッタ用入力データ |
inp_head.txt | ヘッダ用入力データ |
inp_link.txt | ジャンプメニュー用入力データ |
inp_menu.txt | メニュー用入力データ (navi part) |
inp_com.txt | コメント用入力データ (navi part) |
コメント出力は,(e)index.htmlcss のみとしています.
色の設定は,以下のプログラムで CSS を書き換えることにより行っています.
このプログラム (f90_css_color.f90) による出力は,CSS ファイル (csmainE.css, csmainJ.css) です.
Filename | Description |
---|---|
f90_css_color.txt | 色設定用 f90 プログラム (実際の拡張子は '.f90') |
inp_css_col.txt | 配色設定用入力ファイル |
inp_css_src.txt | 基となる CSS のモデルファイル |
csmainE.txt | 英語用 css : 水色系使用 (実際の拡張子は '.css') |
csmainJ.txt | 日本語用 css : 灰色系使用 (実際の拡張子は '.css') |
ページ内ジャンプメニューの構成は以下のとおりです.
En : mainpage | 英語メインページにジャンプ |
Ja : mainpage | 日本語メインページにジャンプ |
Top | そのページの先頭(header)にジャンプ |
Bottom | そのページの最後(footer)にジャンプ |
ページ内ジャンプメニューは,以下のように作成されています.
透過文字を含む画像の作成は,以下の3段階の手順により実行されています.
透過文字を含む画像を作成するImageMagickのコマンドは以下のとおり.
set font=c:\Windows\Fonts\arialbd.ttf set col=lightyellow convert -monochrome -size 95x16 -background white -fill black ^ -font %font% -pointsize 12 -gravity center -raise 3 label:"En : main page" png_test01.png convert -fuzz 50% -transparent black png_test01.png png_inp.png convert -fill %col% -opaque white png_inp.png png_inlinkGOE.png convert -monochrome -size 95x16 -background white -fill black ^ -font %font% -pointsize 12 -gravity center -raise 3 label:"Ja : main page" png_test01.png convert -fuzz 50% -transparent black png_test01.png png_inp.png convert -fill %col% -opaque white png_inp.png png_inlinkGOJ.png convert -monochrome -size 55x16 -background white -fill black ^ -font %font% -pointsize 12 -gravity center -raise 3 label:"Top" png_test01.png convert -fuzz 50% -transparent black png_test01.png png_inp.png convert -fill %col% -opaque white png_inp.png png_inlinkT.png convert -monochrome -size 55x16 -background white -fill black ^ -font %font% -pointsize 12 -gravity center -raise 3 label:"Bottom" png_test01.png convert -fuzz 50% -transparent black png_test01.png png_inp.png convert -fill %col% -opaque white png_inp.png png_inlinkB.png