WANtaroHP (覚書)

toEN

Outline of this page

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ファイルを示しています.

FilenameDescription
テストページ用 css


フォーマットの調整

実際のページは,下に示すように html と body の間にコンテンツを書き込んだ無装飾の html ファイルを作成し,Fortran プログラムで書式を整えられています.

<html>
<body>

     .....     .....
        (contents)
     .....     .....

</body>
</html>

実際の css ファイルおよび書式調整プログラム・入力データは以下のとおりです.ここでは英語用を表示するようにしています.

FilenameDescription
書式調整用 f90 プログラム (実際の拡張子は '.f90')
ページタイトル用入力データ
フッタ用入力データ
ヘッダ用入力データ
ジャンプメニュー用入力データ
メニュー用入力データ (navi part)
コメント用入力データ (navi part)

コメント出力は,(e)index.htmlcss のみとしています.



色の設定

色の設定は,以下のプログラムで CSS を書き換えることにより行っています.

このプログラム (f90_css_color.f90) による出力は,CSS ファイル (csmainE.css, csmainJ.css) です.

FilenameDescription
色設定用 f90 プログラム (実際の拡張子は '.f90')
配色設定用入力ファイル
基となる CSS のモデルファイル
英語用 css : 水色系使用 (実際の拡張子は '.css')
日本語用 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

toEN
inserted by FC2 system