トップ > 関係者用 English | サイトマップ

  サイトについて
 
  協 賛
 
  リンク
 
  世話人会
 
制作関係者用のページ
 
  画像制作メモ


制作関係者用のページです。


ページの追加や変更の前にご一読いただくと、スムーズに作業ができると思います。




■ フォントサイズ

統一的なページにするために、スタイルシート(CSS)でフォントサイズ・行間・フォントカラーなどを指定しています。
CSSは img_general フォルダに保存し、リンクで読み取っています。既存ページをコピーして新規ページをつくる場合はリンクが生きているので、範囲を選択して下記スタイルを指定するだけで適用できます。

CSSを指定しないと、フォントサイズが変わるほか、デザインやレイアウトが崩れます。CSSについては<こちら>もご覧ください。

サイトの標準スタイルシート(CSS)に登録しているスタイル一覧
  (2015年以前に制作したページには style.css を適用)
  (2016年以降に制作したページには style2.css を適用)
doc 「ドキュメント」の略。
  行間はやや広く読みやすい設定です。標準フォントサイズ。
std 「スタンダード」の略。
  行間がつまります。標準フォントサイズ。
sfont 「スモールフォント」の略。
  やや小さいフォントです。
lgfont 「ラージフォント」の略。
   やや大きいフォントです。 (style.css では使用していません)
white
(top)
各ページの最上部にあるバナー部分の白文字フォントです。自動的にフォントカラーは白になります。
 (style.cssでは名前が「top」になっています)



■ 画像の保管場所

原則として html ファイルと同じ階層に 「img」 (イメージの略)フォルダを設け、その中に保管しています。クリックして拡大する画像は 「ogn」 (オリジナルの略)フォルダを設け、その中に格納しています。

ogn は全て img と同じ階層に設けているので、拡大画像へのリンクを張る際は、イメージ画像へのパス (・・・・/img/画像名) をそのままコピーペーストして、img の 部分を ogn に書き換えるだけでOKです。



■ ファイル名

webページは 「html」 に統一しています。(htm ではありません)
画像のファイル名のつけ方、保管場所は次のとおりです。

画像種類 ファイル名 保管場所
山笠 年_行事名 h16_oiyama.jpg 各年度の img フォルダ。
ただし当番以外の記念写真は
町の img フォルダへ。
(拡大画像は ogn フォルダ)

※ 各年度の大きめ画像
(240x180)はファイル名の
頭にアンダーバーをつける。
松囃子 年_mb_行事名 h16_mb_snap.jpg 同上
山笠記念 ki_年_区分 ki_h16_chousoudai.jpg 各年度の img フォルダ。
(拡大画像は ogn フォルダ)
松囃子
   記念
ki_年_mb ki_h16_mb.jpg 同上

山笠手拭 te_年 te_h16.jpg 同上
松囃子
   手拭
te_年_mb te_h16_mb.jpg 同上
当番法被 町名_tb_f (前)
町名_tb_b (背)
suno3_tb_f.jpg 各町の img フォルダ。
(拡大画像は ogn フォルダ)
水法被 町名_mz_f (前)
町名_mz_b (背)
suno3_mz_b.jpg 同上
提灯 町名_lantern suno3_lantern.jpg 同上

ニュース 日付_出来事 h160921_syanhai.jpg topix の img フォルダ。
(拡大画像は ogn フォルダ)
共用画像 --- --- 最上階層の
img_general フォルダ。

※略記号 mb =松囃子
ki =記念写真 ※
te =手拭 ※
tb =当番法被
mz =水法被
※ ファイルが増えても識別しやすいように頭につけます。


■ 画像寸法

原則的にピクセル寸法は統一しています。(下表参照)
サイズ(バイト数)は拡大画像で100KB〜200KBを目安にしています。解像度はwebなので問題としませんが、72ppiにしています。
白黒写真は色情報を破棄し、グレースケールにしています。

画像種類 区分 寸法 備考
標 準 サムネイル 160 x 120 (基本サイズ) 町総代・取締記念写真
ニュース画像も同じ
少し大きい
  サムネイル
 〃 240 x 180 年度別ページの松囃子
と山笠各1枚
標 準 拡大 800 x 600 (基本サイズ) ほとんどの拡大画像
(100KB〜200KB位)
  (例外1)  〃 900 x 600 あえて6:4比率の時
  (例外2)  〃 1200 x 600 横長の変則サイズ
  (例外3)  〃 1200 x 900 大きく保存したい画像
  (例外4)  〃 1500 x 1000 特大6:4(多用しない)
松囃子記念 サムネイル 250 x (高さまちまち)  
  〃 拡大 1300〜1500 x 600位  
手拭画像(旧) サムネイル 200 x 76 JPEG
  〃   (旧) 拡大 550 x 210 JPEG
手拭画像 H19〜 サムネイル 200 x 76 GIF 松囃子手拭
  〃    H19〜 拡大 800 x 305 GIF    〃
手拭画像 H26〜 サムネイル 207 x 76 GIF 山笠手拭
  〃    H26〜 拡大 830 x 305 GIF    〃
法被画像 サムネイル 160 x 120 (基本サイズ)  
  〃 拡大 800 x 600 (基本サイズ)  
提灯画像 サムネイル 90 x 120  
  〃 拡大 600 x 800 (基本サイズ)  





■ CSS

全てのページに img_general フォルダ内の style.css でフォントサイズ・行間・フォントカラーなどを指定しています。2016年以降に追加したページには機能を増やした style2.css を適用しています。
なお、 JavaScript JQueryを採用した次のページには個別のCSSを適用しています。
トップページの左側 index_c.html img_general > slider フォルダ内の jquery.bxslider.css
座談会・対談 index.html img_general フォルダ内の interview.css
ギャラリー index.html data > photo > gallery > swipebox >
  css フォルダ内の swipebox.css




■ 毎年の作業

・ 「年度別」 に当該年度分のページを追加。
1 前年度のページを開き、当該年度名で新規保存。各リンクを修正。
2 当該年度の画像保管用フォルダ 「img」 と 「ogn」 を作成。 サムネイルは img へ、大きい画像は ogn フォルダに保管。コンテンツを仕上げる。
3 当該年代(10年単位)の各ページに当該年度へのリンクボタンを追加。
(例:H17を新規追加した場合、H10〜H16のメニューにH17を追加)
4 次のページの 「毎年の記録」 ボタン部分のリンクを、当該年度に変更。
トップページの左側 index_c.html
右側のナビゲーション部分 index_nav.html

年表 のページに当該年度を追加。

町総代記念写真取締記念写真 のページに画像を追加。

手拭 のページにの手拭画像を追加。

・ 年度別の インデックスページ に山笠の人形の画像を追加。

構成町 ページの町の順番を入れ替える。

・ English の Regions(構成町) ページの町の順番を入れ替える。

・ 右側 ナビゲーション部分 の町の順番を入れ替える。

・ (山小屋・当番町詰所地図 の作成。) 近年はページの追加なし

・ (協賛者名簿 の 「○○年度分」 を書き換える。) 近年はページの追加なし













 トップページ | ページ上部へ