Transcript CMSヘッダー作成マニュアル - 岐阜市教育情報ネットワーク ポータルサイト

ホームページビルダーとＪTrim（フリーソフト）の利用による
CMSヘッダー作成マニュアル
（Ver 1.1 ）
（平成２０年１１月）
岐阜市教育情報化推進プロジェクト
（岐阜市教育研究所）
目
次
１、このマニュアルで使用するソフト・・・・・・・ ｐ １
２、このマニュアルで作成する完成画像 ・・・・・ ｐ ２
３、このマニュアルの処理の手順 ・・・・・・・・ ｐ ２
４、校章の加工（ウェブアートデザイナー）・・・・ ｐ ３
５．写真加工（ＪＴｒｉｍ） ・・・・・・・・・・ ｐ ７
６、加工写真の保存（ＪＴｒｉｍ） ・・・・・・・ ｐ１０
７、空白の作成（ウェブアートデザイナー）・・・・ ｐ１１
８、もし画像のバランスが不満だったら？？ ・・・ ｐ１４
９．文字の装飾（ウェブアートデザイナー） ・・・ ｐ１５
１０、文字入力（ウェブアートデザイナー）・・・・・ ｐ１６
１１．作成画像の保存 ・・・・・・・・・・・・・・ ｐ２２
１２．サーバーへのヘッダー転送 ・・・・・・・・・ ｐ２４
１．このマニュアルで使用するソフト
(1) ＪＴｒｉｍ（フリーソフト）
ジェイトリムは初心者でも簡単に「画像の拡大、縮小、ぼ
かし」が簡単にできる優秀なフリーソフトです。
マニュアル内の作業では、校舎の写真の変形と写真の周
囲の「ぼかし」に使用しますが、自分で使い慣れたソフト
があれば、それを駆使してセンスやインパクトのあるヘッ
ダー画像を作って下さい。
＜ＪＴｒｉｍのダウンロードサイト＞
http://www.vector.co.jp/soft/win95/art/se108932.html
(2) ウェブアートデザイナー
ウェブアートデザイナーは、ホームページビルダーの機能
の一部で、ビルダーのツールメニューから起動します。
マニュアル内では校舎の写真の上に学校名を重ねて書き
込んだり、校舎写真の右の空白部分に学校情報（郵便番号、
所在地などを書き込みます。さらには、学校名や所在地の
文字に影を付けます。
(3) 本マニュアルの校舎の写真は、長森東小学校のホームペー
ジの校舎の写真を、右クリックのコピーで写真の原図として
利用しました。
皆さんの校舎の写真も同様の処理で容易に取得できます。
【ワンポイント】
画像処理では多種多様なソフトがあり、フォトショップやイラ
ストレーター等のように専門家が使用しているものから、多才
な機能がありながら無料で使用できるフリーソフトも多種多様
にあります。
-1-
２．このマニュアルで作成する完成画像
３．処理の流れ
１・校章や校舎の写真（画像）の準備
２・校章の加工（校章画像を透過GIFﾌｧｲﾙに変換）
３・校舎写真の加工（横長に変形処理）
４・空白の作成（校舎写真の右に「学校情報」を入れるための空白作成）
５・文字入力（校舎写真の左に「学校名」、右に「学校情報」の入力）
６・学校情報の装飾処理（影文字）
７・完成画像をウェブアートデザイナーで「ウエブアート形式」で保存
８・完成画像をウェブアートデザイナーで「ＪＰＥＧ形式」で保存
９・サーバーへのヘッダー転送（ＪＰＥＧ形式のファイルを使用）
トップページの完成
-２-
ウェブアートデザイナー
４．校章の加工
※ここでは校舎画像に透かしの校章を入れるための事前加工を行います
が、使用する校章の画像ファイルは事前に準備しておいて下さい。
4-1 校章の読み込み
①［ファイル］をクリック
②［キャンパスを開く]をクリック
画面がポップアップします。
4-2 校章の読み込み
①使用するファイル「校章」
をクリック
指定した校章が右のプレビュー
に表示されます。
4-3 校章の読み込み
①［開く］をクリック
校章が世も込まれました。
-３-
ウェブアートデザイナー
４．校章の加工
4-4 透過GIF画像に変換
サブメニュー画面がポップアップ
します。
①画像の上でマウスを右クリック
4-5 透過ＧＩＦ画像に変換
①［Web用保存ウイザード］をクリック
①・②
（注）プレビューが出ない場合は
①【指定】をクリック
②ポップアップ画面で【ＯＫ】を
クリック
4-6 透過GIF画像に変換
①［次へ］をクリック
①［開く］をクリック
-４-
ウェブアートデザイナー
４．校章の加工
4-7 透過ＧＩＦ画像に変換
①［ GIF］にチェック
②［次へ］をクリック
4-8 透過ＧＩＦ画像に変換
①［透明化］
にチェック
②［ペン］アイ
コンをクリック
③プレビュー内の空
白部分をクリック
4-9 透過ＧＩＦ画像に変換
①［次へ］をクリック
-５-
プレビュー内の校章が
モザイク状になります。
ウェブアートデザイナー
４．校章の加工
4-10 透過ＧＩＦ画像の保存
①［ファイルに保存］をチェック
②［完了］をクリック
保存用画面がポップアップします。
4-11 透過ＧＩＦ画像の保存
①保存する場所とファイル名（ここ
では校章としました）を入力します。
保存が完了するとこの画面に戻り
ます。
①［保存］をクリック
【ワンポイント】
通常の校章（JPEG形式）と透過した校章（透過ＧＩＦ形式）の違い
JPEG形式：画像が透けないので、後ろ
の色が見えない。
透過ＧＩＦ形式：画像の余白が透けるの
で、後ろの色が見える。
-６-
JＴｒｉｍ
５．校舎写真の加工
5-1 校舎写真の読み込み
①［ ファイル］をクリック
②［開く］をクリック
画面がポップアップします。
5-2 校舎写真の読み込み
①使用する写真をクリック
使用する写真が下にプレビュー表示
5-3 校舎写真の読み込み
①［開く］をクリック
校舎の写真が読み込まれました
-７-
JＴｒｉｍ
５．校舎写真の加工
5-4 読み込み写真のリサイズ
①［イメージ］タグをクリック
画面がポップアップします。
5-5 読み込み写真のリサイズ
①［リサイズ］をクリック
設定画面がポップアップします。
5-6 読み込み写真のリサイズ
①［縦横の比率を保持する］のチェ
ックをはずす。
②横７００、縦２００の数値を入力
③［OK］をクリック
画面が変形しました。
-８-
JＴｒｉｍ
５．校舎写真の加工
5-7 写真のフェードアウト（ぼかし）
①［加工］タグをクリック
画面がポップアップします。
5-8 写真のフェードアウト
フェードアウトの強さを指定する
画面がポップアップします。
①［フェードアウト］をクリック
5-9 写真のフェードアウト
①画面のレバーまたは数値でフェード
アウトの強さ調整（１０～５０程度）
②［OK］をクリック
まわりに「ぼかし」が入りました。や
り直しは
のマークで戻ります。
※「ぼかし」の濃淡は、好みで調整してください。
-９-
JＴｒｉｍ
６．加工写真の保存
6-1 作成画像の保存
①［ファイル］をクリック
②［名前を付けて保存］をクリック
ファイルを保存する画面がポップ
アップします。
6-2 作成画像の保存
①今回はファイル名に「校舎」と入力
②［保存］をクリック
※保存するファイル形式（拡張子）は、そのまま（JPEG形式）でよいです。
-１０-
ウェブアートデザイナー
７．空白の作成
※ここでは、写真の右端に学校情報（学校の住所や電話番号）を書き込 む
エリヤ（空白）を作成します。
7-1 写真（画像）の読み込み
①［ファイル］をクリック
②［キャンパスを開く]をクリック
画面がポップアップします。
7-2 写真（画像）の読み込み
①使用するファイル「校舎」
をクリック
指定した校舎の写真が右のプレ
ビューに表示されます。
7-3 写真（画像）の読み込み
校舎の写真が読み込まれました。
①［開く］をクリック
-１１-
ウェブアートデザイナー
７．空白の作成
7-4 空白の作成
①［編集］をクリック
7-5 空白の作成
①［キャンパスの設定］をクリック
7-6 空白の作成
①幅を「９５０」ピクセル
②高さを「１７０」ピクセルに指定
空白が出来ました。ここに学校
情報を書きます。
③[OK]をクリック
-1２-
ウェブアートデザイナー
８．画像のバランス調整
8-1 画像の調整
①画像の上でマウスをクリック
画像の枠が表示されます。
8-2 画像の調整
横は800ピクセル程度
①画像の端をドラックして調整
※上下の空白が無くなるように
ここは後から文字を記入するエリ
ヤです。
【ワンポイント】
ヘッダー画像は、横８００ピクセル×縦２００ピクセル程度がベター
と思いますが、トライして最適なサイズにして下さい。
作業を中断される場合は「ウエブアートファイル形式」で一旦保存され
ますと、後からこのファイルを呼び出して再度作業を継続できます。
なお、保存するファイル名は任意（例えば「校舎画像など」が良いで
しょう。
-1３-
９．ウェブアートデザイナーの文字の装飾機能
※文字装飾とは、文字の色を変えたり、ぼかしを入れたり、囲い文字 など文
字に色々な装飾を行うことができます。
9-1 文字装飾画面
文字の編集画面への切り替え
文字記入部分
行揃え
・左揃え
・中央揃え
・右揃え
縦書横書
文字のスタイルの指定
・ボールド（太字）
・イタリック（斜体文字）
・取り消し線
・下線
・アンチエイリアス
（画像の縁を滑らかに）
フォントの指定
・文字種別の指定
・文字サイズ指定
・行間の指定
・文字間の指定
9-2 文字色指定画面
文字の色指定画面への切り替え
単色・グランデーション等の切り替えタグ
タブレットから任意の色を選択します。
9-3 文字の効果指定画面
9-4 文字装飾（効果）の例
-1４
通常文字
ぼかし文字
動き文字
影文字
ウェブアートデザイナー
１０．文字入力
10-1 学校名の書き込み（「岐阜市立」の文字を入れます。）
①［Ａ］アイコンをクリック
②文字を入れる位置でマウスをクリック
文字入力の枠ができました。
10-2 学校名の入力
「岐阜市立」の文字が「青色」で
入りました。
①「岐阜市立」と入力
②写真の枠の外でマウスをクリック
※マウスでドラックすれば位置の変
更ができます。
10-3 文字の色・サイズ・フォントの指定
①「岐阜市立」の文字をダブルクリック
-1５-
文字編集画面がポップアップ
ウェブアートデザイナー
１０．文字入力
10-4 文字サイズ・フォントの指定
①[文字タグ］をクリック
②任意のフォントを指定する
③フォントサイズを指定
（１５ポイント程度）
フォントサイズを変更するとここ
の文字サイズが変化します。
10-5 文字色の指定（白色に変更の例）
カラーパレットがポップアップ
①文字を白色にするため [色タグ］をク
リック
スライドバーをマウスで左右に移
動すると、隠れた色がでます。
10-6 文字色の指定
①カラーパレットから「白色」をクリック
文字が「白色」にかわりました。
-1６-
ウェブアートデザイナー
１０．文字入力
10-7 学校名の入力（自分の小学校の名前を入れます。）
①再度［Ａ］をクリック後、②項番９で入
れた「岐阜市立」の文字の下の位置で
マウスをクリック
文字入力の枠ができました。
10-8 学校名の入力
※これ以降の入力方法は
(2からの手順を参考に、
自分の学校名を入力して
下さい。
学校名が入力されました。
10-9 学校情報の入力
①［Ａ］アイコンをクリック
②文字を入れる位置でマウスをクリック
※ここでは最下段に入れるFAX番号を
入力する位置でクリックします。
文字入力の枠が出来ました。
-1７-
ウェブアートデザイナー
１０．文字入力
10-10 学校情報（FAX番号）の入力
ＦＡＸ番号が入りました。
※マウスでつまんで位置を調整します。
①［Ａ］アイコンをクリック
②文字を入れる位置でマウスをクリック
10-11 学校情報（電話番号）の入力
ＦＡＸ番号、電話番号が入りました。
①続けて電話番号を入力します。
10-12 学校情報（学校所在地）の入力
①（10）と同様の手順で学校所
在地を入力します。
学校所在地が入りました。
※入力した文字は、マウスのドラック
で自由に位置変更ができます。
-1８-
ウェブアートデザイナー
１０．文字入力
※ここでは、文字に影を付けます。
10-13 文字の装飾（影付け）
①「所在地」をダブルクリック
10-14 文字の装飾（影付け）
①［効果］をクリック
10-15 文字の装飾（影付け）
①装飾パターン「影」をクリック
②「影の色」をクリック
色選択画面が表示されます。
-１９-
ウェブアートデザイナー
１０．文字入力
10-16 文字の装飾（学校所在地）
バーの左右で影の深さが調整できます。
文字に影が付きま
した。
①「灰色」をクリック
②［OK］をクリック
10-17 文字の装飾の終了
文字装飾が完了しました。
①ポップアップ画面を「×色」 で閉
じます。
10-18 学校情報（郵便番号）の入力
学校情報がすべて表示されました。
※これ以降は(1)に戻り、入
力方法を参考に、郵便番
号を入力して下さい。
※入力した文字は、マウスのドラックで
自由に位置変更ができます。
-２０-
ウェブアートデザイナー
１１．作成画像の保存
【ワンポイント】
ここでの保存ではヘッダー画像を後日、ウエブアートデザイナーで再利
用して修正出来るように、「ウエブアート形式」での保存と、ＣＭＳに
セットするために「JPEG形式」の２種類で保存します。
11-1 ヘッダー画像の保存
①［ファイル」をクリック
②［名前を付けてキャンパスを保存］をク
リック
保存画面がポップアップ
11-2 ウエブアート形式で保存
①「ファイル名欄」にファイル名を入力
②プルダウンでファイルの種類を「ウエ ブ
アートファイル」を選択
③［保存］をクリック
-２１-
元の画面に戻ります。
ウェブアートデザイナー
１１．作成画像の保存
11-3 JPEG形式で保存（CMSでのセット用）
①「ファイル名欄」にファイル名を入力
②ファイルの種類で「JPEG」を選択
③［保存］をクリック
11-4 JPEG形式で保存）
①［はい］をクリック
11-5 JPEG形式で保存
①［OK］をクリック
元の画面に戻ります。
-２２-
ブラウザー
１２．サーバへのヘッダー転送
※ここでは、今までに作成したヘッダー画像をホームページのサーバーに
転送して学校のＨＰで見れるようにします。
12-1 簡易管理画面にログイン
自分のＩＩＤとパスワー
ドでログインします。
ログインした画面
12-2 簡易管理画面にログイン
管理者画面に入りました。
「管理者ページ」をクリック
12-3 簡易管理画面にログイン
「簡易管理画面」をクリック
簡易管理画面に入りました。
-２３-
ブラウザー
１２．サーバへのヘッダー転送
12-4 簡易管理画面の操作
「ヘッダー画像変更」をクリック
12-5 貼り付け条件の指定
①「色選択」でポッップ画面から「白」を選択
②一枚画像にチェックを入れる
③「参照」をクリックして、サーバに転送する写
真を指定する。
セットする写真のファイル名が入りました。
※転送画面では、ヘッダー画像の転送方法（サーバーへのセット方法）が複数ありま すが、
慣れるまでは一枚画像でセットされるのがお勧めです。
12-6 ヘッダー画像の転送
画像の転送が良ければ、「変更」をクリック
およそ２秒～５秒程度で、この画面に戻り
ます。
※回線の混み具合で若干、時間がかかる
場合があります。
-２４-
１２．サーバへのヘッダー転送
12-7 転送写真（画像）
学校のトッッページに写真が
セットされました。
「ログアウト」をクリック
完成したヘッダー画像
【ワンポイント】
ヘッダーは学校のホームページの顔です。皆さんの創意工夫や四季折々の写
真、子供達の図画をスキャナで読み込んでヘッダーを作るのもアイデアかと思
います。
-２５-
バージョン情報
平成２０年１１月２３日 初版 （Ver 1.1）
マニュアル作成者から
本マニュアルは、岐阜市小中学校の情報化の一部を担うCMSの導
入において、最初に必要となるヘッダー画像の作成方法について作
成しました。
極力、初心者の方でも容易にヘッダーが作成できるよう配慮したつ
もりですが、ソフトの動作やパソコンのスペックなどの条件で、記述ど
おりに動作しない場合があるかも知れませんがこのような場合には、
皆さんで協力し合い進めて下さい。
また、記述ミスや不具合を見つけられました場合や、ヘッダ
ー作成において簡単に作成する方法や有効なヒント、アドバイスなど
ありました場合には、研究所までご連絡を頂ければ幸いです。
--- 事務局 ---