メイン画像の入れ替え
今回のテンプレートの場合、フリー写真ではないので画像を入れ替えます。
写真入れ替えの必要がないテンプレートもあります。
写真をお持ちでない方は当サイトにフリー写真がありますのでご利用下さい。
画像加工にはWindowsパソコンに入っている「ペイント」というソフトで行います。パソコン画面の左下「スタート」から「すべてのプログラム」を選び、一覧の中から「アクセサリ」を見つけて下さい。その中に「ペイント」とあるのでクリック。するとペイントの画面が開きます。
補足１：「ペイント」は最低限の条件の加工しかできません。もっと優良な画像ソフトをお持ちならそちらを使って下さい。「お役立ちサイト紹介」ページにてフリーで使える画像ソフトの紹介もしていますので気になる人は見てみて下さい。
まず、あなたが使いたい画像をペイントで開きます。
画面上分かりませんが、この写真は横幅が700px(ピクセル)あります。
テンプレート用の写真は横幅500pxなのでこのままでは大きすぎます。
縮小してみましょう。
「変形」から「伸縮と傾き」を選びます。
画面が開きますので下のように％で設定します。
今回の場合、700pxを500pxにしたいのですが、単純に計算すると71.42857...％となってしまいます。ペイントでは整数しか指定できないので、小数点以下切り上げて72％で入力しOKボタンを押します。(数字は半角文字で入力して下さい)
少し写真が小さくなりました。
補足：この時点で画像サイズは横幅504pxあります。ペイントでの画像サイズ変更ではこれが限界なので、きっちり500pxにしたい場合はホームページビルダーで最後に直接数値を設定して変更します。後ほど説明します。
小さくした画像を保存します。
「ファイル」から「名前を付けて保存」を選びます。
下のような画面が出ます。もしデスクトップ以外が表示された場合、左側に並んでいるアイコンの中から「デスクトップ」をクリックして下さい。
今回ダウンロードしたテンプレート「simple6」フォルダがあるはずなので、ダブルクリックして開きます。
開いたsimple6フォルダの中に「images(又はsozai)」というフォルダがあるはずなので、同じようにダブルクリックして開きます。
保存する際の画像形式を選びます。
写真の場合はJPEG、アニメなどの単色塗りが多い画像の場合はGIFを選ぶとそれぞれキレイに保存されます。
画像形式を選んだら、横の「保存」ボタンを押しましょう。
保存したフォルダを開いてみましょう。きちんと画像が保存されていればOK。
※以下のような表示方法でない場合もあります。ファイル名で確認しましょう。
補足１：上で少し述べましたがペイントでは％での拡大縮小しかできないので、詳細なサイズへの設定ができない場合があります。今回の場合、500pxにしたかったのですが実際は504pxあります。サイズの確認は画像の上にカーソルを載せると自動で画面が出てきます。気になる人は実際に確認してみて下さい。
補足２：ペイントでは文字入れもできます。必要があればWELCOME等の文字をのせてみてもいいでしょう。
さて、テンプレートの本体に戻ります。メイン画像の入れ替えをしましょう。
色々方法はあるのですが、私がやる方法でご紹介します。
まず、メイン画像をクリックし、パソコンのキーボードの「Delete」ボタンを押して画像を消去します。だいたいキーボードの最上段の右側あたりにこのキーがあります。
画像が消えました。
先ほど保存した画像ファイルの上にカーソルを乗せ、マウスの左クリックボタンを押したままの状態で今消去したスペースの所までズルズルひっぱります。ひっぱってきたら離します。
変な所で離すととんでもない位置に配置されたり、またはデスクトップ上に画像ファイルが移動してしまうので注意。
※自信のない方はこちらの方法でトライしてみて下さい。
配置されました。
配置方法は他にも色々ありますので自分に合う方法をご利用下さい。
今回の画像の場合、元画像と少しサイズが違いました。このテンプレートでは多少の画像の違いは問題なく使用できますが、少しでもサイズが違うと崩れるテンプレートの場合、以下のように画像サイズを強制的に修正します。
配置した画像の上にカーソルを乗せ、右クリック。
リストが出るので「属性の変更」を選びます。
ウィンドウが出ますので、下の丸でかこっている所を変更します。例えば強制的に500pxにするなら、幅を500にします。ほんの少しのサイズ変更なので高さはこのままでも問題ないでしょう。
補足：ちなみにこの「属性の変更」の「代替テキスト」を入力すると画像の上にカーソルが乗った時に文字が出ます。ビルダーの「ページ編集」モードでは確認できないので、「プレビュー」モードに切り替える必要があります。
画像の入れ替えができたら一旦保存しておきましょう。
次は、メニューを自分専用のものに変更していく作業です。
