トップページ
フリーCGIの配布
CGIカスタマイズ
CGI制作
ご利用規定
PHP設置について
著作権・リンク
お問い合せ
 
WEBアルバム  hd-album (フリーCGI)

  • 画像をブラウザからアップロードして更新するWEB用アルバムです。
  • デザインにスタイルシートを使っているので、CSSの知識やホームページ作成ソフトがあればデザインの変更ができます。詳しくは「デザインの変更について」をご覧ください。
  • パスワードを含めた全ての設定をブラウザ上から行うため、プログラムの修正や書込みは不要です。
  • 使用方法や各種設定については「使い方と各項目」をご覧下さい。

動作サンプル
ダウンロード
ダウンロード
ダウンロード
※クライアント側のJavaScriptが無効になっている場合の動作サンプル→「スキン2サンプル(JavaScript無効)

・機能説明

  • CGI設置前のプログラムの修正や書き込みは不要
  • ブラウザからの画像アップロード(GIF、JPEG、PNG)
  • 登録画像の制限の変更が可能
  • 登録画像の点数とファイル容量の合計を表示
  • 画像表示サイズの任意設定が可能
  • 画像に対してのタイトル、コメントの入力が可能
  • 画像とタイトル・コメントの表示位置の変更が可能
  • アルバムごとの登録方式(上へ追加登録、下へ追加登録)の選択が可能
  • 各登録データの表示順の入替えが可能
  • アルバム一覧の表示列数の変更(1〜10列表示)
  • 認証による管理者画面での編集作業
  • 管理者ログインボタンの表示・非表示
  • ホームボタンの表示・非表示
  • ユーザー設定画面での各種設定(デフォルトボタン有り)
  • 登録項目、画像の表示・非表示設定
  • スキンによるデザイン変更可能


・設置方法

  1. ダウンロードした圧縮ファイルを解凍ソフトで解凍してください。

  2. 「パーミッション設定」を参考にしてFTPにてサーバーへアップロードしてください。
    (アップロード前のプログラムの修正や設定はありません)

  3. index.phpから管理画面へアクセスしてパスワードを含めた各項目を設定してください。
    (管理画面パスワードのデフォルトID:admin PASS:password

・パーミッション設定

【hd-album】[755] │ │ ├ album.dat [666] │ ├ custom.dat [666] │ ├ attest.dat [666] │ │ ├ index.php [644] │ ├ pict.php [644] │ ├ manager.php [644] │ ├ adm.css [644] │ │ ├ 【adm_img】 [755] *.gif [644] │ │ ├ 【upfile】 [777] │ │ ├ 【dat】 [777] │ │ └ 【style】 [755] *.gif [644] │ │ ├ index.css[644] │ │ └ pic.css [644]
※*.gifはバイナリ、それ以外はアスキーモードで転送してください。
※【upfile】フォルダ内の no_use.txt はアップロードの必要はありません。
※【dat】フォルダ内の no_use.txt はアップロードの必要はありません。
※【style】フォルダ内の CSS作成用(index).html、CSS作成用(pic).html はアップロードの
  必要はありません。


※パーミッションについての情報は 『パーミッションの設定』 をお読みください。

・使い方と各項目
一覧のボタン操作について
  • 新規アルバムの作成は「新規アルバムの作成」をクリックしてください。
  • 写真一覧の表示は「写真一覧へ」をクリックしてください。
  • 写真の登録は「写真の登録」 をクリック しtください。
  • 操作対象の項目にチェック を入れた後 をクリックします。
  • は表示順の入替えを行います。

入力フォームの項目について
  • タイトル
    ・アルバム(または写真)のタイトルを入力します。
    ※(アルバムのタイトルは必須です)
     
  • コメント
    ・アルバム(または写真)のコメントを入力します。
     
  • 登録画像
    ・アップロード可能な画像のタイプはJPEG、GIF、PNGになります。
    ・ファイルサイズの制限は「ユーザー設定」で行えます。
     
  • 表示
    ・アルバム(または写真)を非表示にする場合は「非表示にする」にチェックを入れてください。
     
  • 写真の登録方法(先頭に追加、末尾に追加)
    ・アルバムへの写真の登録方法を既存写真に対してどの位置に追加するかを設定します。
 
ユーザー設定の項目について
  • 全体の配置(左、中央、右)
    ・ トップページのページに対する配置を設定します。
     
  • ブラウザ用タイトル
    ・ブラウザに表示するタイトルです。
     
  • ページタイトル
    ・トップページに表示されるタイトルです。
    (未入力の場合でも枠は表示されます)
     
  • ヘッダー ↓
    ・ページタイトルの下に表示されます。
    (未入力の場合、枠は表示されません)
     
  • ホームURL
    ・戻りURLを入力してください。
    ・URLが入力された場合は 「ホーム」アイコンが表示されます。
     
  • 管理者ログイン画像を表示する
    ・「管理者ログイン」 アイコンを非表示にする場合はチェックを外してください。
    ・管理者ページのURLは manager.php になります。
     
  • 画像の合計
    ・アップロードした画像 (【upfile】フォルダ内) の合計を表示します。
     
  • 画像の表示サイズ
    ・トップページでのアルバム画像の表示サイズを設定します。
    ・width:幅を数値で統一、height:高さを数値で統一、max:幅又は高さの大きいサイズを数値で統一
     
  • 表示列数(1〜10)
    ・トップページでアルバムの表示列数を指定します。
    ・表示順は左上から右へ表示され、右下が最後になります。
    ・この列数を変更する場合は「画像の表示サイズ」、「画像の表示位置」も合わせて調整してください。
     
  • 登録画像のサイズ制限
    ・登録する画像のサイズの制限を設定できます。
    ・入力する数値は4桁まで可能ですが、サーバーによって制限がありますので注意してください。
     
  • 画像の表示位置(左、右、中央、上、下)
    ・トップページで、アルバム画像をタイトルとコメントに対してどの位置に表示するかを設定します。
     
  • ポップアップサイズ
    ・ポップアップ表示するブラウザのサイズを設定します。
     

・デザインの変更について
・デザイン変更は【style】フォルダ内の画像入替えとスタイルシート(index.css、pic.css)の編集で行います。
 (以下文章中のCSSファイルとは【style】フォルダ内の index.css 又は pic.css を示します。)
・CSSファイルはスタイルシート編集機能のあるHTML作成ソフトかテキストエディタで編集してください。
・ 編集後の確認に ( CSS確認用.html ) を利用してください。

スタイルが適用されない場合はCSSファイル内の日本語のコメント文(/*〜*/)が原因の場合があります。この場合はコメント文を削除してください。



■トップページのデザイン変更について
  • 表示幅を変更する
    ・index.cssのクラス『.table-main』、『.album-all 』のwidth値を変更します。
    ・ピクセルで指定する場合は px 、ページに対する割合を指定する場合は % を指定してください。
          .table-main {
              width: 600px;          ←表示幅を指定
              margin-top: 5px;
          }
    
    
          .album-all {
              width: 600px;          ←表示幅を指定
              margin-top: 5px;
          }
     
  • ページタイトルの画像を変更する
    ・【style】フォルダ内の top.gif を任意の画像に入替えてください。
    ・index.cssのクラス『.page-title』を編集します。
         .page-title {
             background-image: url(top.gif);        ←画像名を変更した場合は変更
             background-repeat: no-repeat;
             height: 40px;             ←画像の高さを指定
             background-position: center center;  ←配置位置(横位置 縦位置)
                         :
                         :
  • 背景画像を変更する
    ・【style】フォルダ内のbg.gif を任意の画像に入替えてください。
    ・index.cssのの要素『body』を編集します。
         body {
             background-image: url(bg.gif);         ←画像名を変更した場合は変更
             background-color: #FFFFFF;             ←背景色
             background-repeat: repeat;             ←背景画像の繰返し設定
             background-attachment: fixed;          ←背景画像のスクロール設定
             background-position: left top;         ←背景画像の配置位置
         }
  • 枠画像を変更する
    ・ 【style】フォルダ内のframe1.gif 〜frame9.gif の9個の画像を入替えます
     (画像の拡張子は gif のみになります。ファイル名も変更しないで下さい)
    ・入替える画像のサイズは縦横10ピクセル以上にしてください。

    ■画像の位置     frame2.gif ↓  
    frame1.gif →
     
         frame5.gif
     
     
    ← frame3.gif

    frame4.gif →

    ← frame6.gif

    frame7.gif →

    ← frame9.gif
          frame8.gif ↑  

  • 「ホーム」「ログイン」画像を変更する
    ・【style】フォルダ内の home.gif 、 login.gif 画像を入替えてください。
     (画像の拡張子は gif のみになります。ファイル名も変更しないで下さい)
     
  • ヘッダーフッタ領域の枠、色を変更する
    ・index.cssのクラス『header1、2』を編集します。
    ・各領域へのスタイル対応は(CSS編集用,html)を参考にしてください。
         .header1 {
             font-size: 12px;                        ←文字サイズ
             color: #666666;                         ←文字色
             text-align: center;                     ←文字配置
             padding: 5px;                           ←枠内空間
             background-color: #FFFFFF;              ←枠内背景色
             border: 1px solid #666666;              ←枠線種、枠線色
         }
  • 文字のサイズ,色を変更する
    ・index.cssの変更するクラスを編集してください。
    ・各領域へのスタイル対応は(CSS編集用,html)を利用してください。
         .album-title {
             font-size: 12px;                        ←文字サイズ
             color: #666666;                         ←文字色
             vertical-align: top;                    ←文字配置
             padding: 3px;                           ←枠内空間
             font-weight: bold;                      ←ボールド指定
         }
    
    
         .album-comment {
             font-size: 12px;                        ←文字サイズ
             color: #666666;                         ←文字色
             vertical-align: top;                    ←文字配置
             padding: 3px 3px 3px 15px;              ←枠内空間
         }
     
  • アルバム画像の位置やサイズを変更する
    ・アルバム画像の位置やサイズは管理画面で設定します。
     
  • トップページの表示位置を右(左)によせて表示する
    ・ トップページのページに対しての表示位置(左、中央、右)は管理画面で設定します。
    ・スタイルシートのBODY要素での指定はしないで下さい。
■ポップアップページのデザイン変更について
  • 背景色、背景画像を変更する
    ・index.cssのクラス『.body-x』、『.body-yl』を編集します。
    ・背景画像は 横長画像の場合縦長画像の場合 の2種類を設定する必要があります。
  •      .body-x {
             background-color: #000000;              ←背景色
             margin: 0px;
             background-attachment: fixed;           ←背景固定
             background-image: url(bg-x.gif);        ←背景画像のファイル名
             background-repeat: no-repeat;           ←背景画像の繰返し設定
             background-position: right bottom;      ←背景画像の配置位置
         }
    
    
         .body-y {
             background-color: #000000;
             margin: 0px;
             background-attachment: fixed;
             background-image: url(bg-y.gif);        ←     〃
             background-repeat: no-repeat;
             background-position: right bottom;
         }
    
  • 文字のサイズ,色を変更する
    ・index.cssのクラス『.pic-title』、『.pic-comment』を編集します。
    ・各領域へのスタイル対応は(CSS編集用,html)を利用してください。
         .pic-title {
             font-size: 12px;                        ←文字サイズ
             color: #666666;                         ←文字色
             vertical-align: top;                    ←文字配置
             padding: 3px;                           ←枠内空間
             font-weight: bold;                      ←ボールド指定
         }
    
    
         .pic-comment {
             font-size: 12px;                        ←文字サイズ
             color: #666666;                         ←文字色
             vertical-align: top;                    ←文字配置
             padding: 3px 3px 3px 15px;              ←枠内空間
         }
     

 

TOP△
トップページフリーCGICGIカスタマイズCGI制作利用規約お問い合せ