SAMPLE IMAGE この画像は差し替えてご利用ください

022D 独自レイアウトのトップ画像を変更する

022D-1 定められたサイズに合わせて画像を準備する

トップ画像は幅(width)960px、高さ(height)250pxの画像を用意する。

ここでの操作の詳細は、P20-2 定められたサイズに合わせて写真を切り取るの項を参照します。

➊ Pixlr Editor を起動する

➋ オリジナル画像を選択しキャンバスに開く

➌ オリジナル画像のサイズを必要に応じて調整する

メニュー[画像]>[画像サイズ]で、目的のサイズに合わせて、幅あるいは高さを調整する。

❹[切り取り]ツールを使う

  1. [切り取り]ツールを選択し、オプションバーで[固定化]を「出力サイズ」、[幅]および[高さ]を切り取るサイズに合わせる。
  2. 画像左外から右外まで、横幅一杯、あるいは縦幅一杯にドラッグして手を離す。
  3. 切り取り枠が表示される。切り取り枠を最適な位置へ移動する。
  4. 切り取り位置が決まったら、枠内でダブルクリックする。
  5. 切り取られた画像が表示される。

 

❺ ファイルに名前を付けて保存する

visual.jpg のファイル名で、[加工後]フォルダーに保存する。

  1. メニュー[ファイル]から[保存]を選択する。
  2. 保存先を[マイコンピューター]、[フォーマット]を確認し、[OK]する。
  3. Windows の[名前を付けて保存]ダイアログで、保存先フォルダーとファイル名 visual.jpg を指定して[保存]する。

❻ Pixlr を終了する

022D-2 メインビジュアル(トップ)画像を変更する

独自レイアウトでのトップ画像を変更する操作の概要です。

詳細はメインビジュアル画像(ヘッダ画像とも言う)を入れ替えるを参照する。

➊ Jimdo ホームページを編集モードで開く

➋[管理メニュー]から[デザイン]、更に[独自レイアウト]を開く

➌[ファイル]一覧表示画面で visual.jpg ファイルを[アップロード]

[加工後]フォルダーなどに保存されている画像 visual.jpg を選択し、[アップロード]する。

❹ 変更を保存する

[HTML]タブへ移動し、[保存]ボタンをクリックする。

「設定は保存されました」とのメッセージを確認する。

022D-3 トップページのトップ画像だけを変える

ここでは、「独自レイアウト」でトップページとそれ以外のページで違うトップ画像を表示させる方法を説明していきます。

詳しくは、小生作成のトップページのヘッダ画像だけを変える、を参照する。

022D-4 特定ページのトップ画像を変更する

ここでは上記022D-3のように、「独自レイアウト」でトップページとそれ以外のページとで、異なるトップ画像を表示するとなったあと、更に特定のページだけ異なるトップ画像を表示させる方法を説明していきます。(そのために、上で設定・変更したCSSはそのまま使用し、更に変更を加えていきます。)

詳しくは、小生作成の特定ページのヘッダ画像を変更する、を参照する。

022D-5 トップ画像を表示しない

トップ画像を表示したくない場合は、HTML コードの、トップ画像を表示する部分を削除するか、コメントにして無効にします。

jsd022_57:トップ画像を表示
jsd022_57:トップ画像を表示
jdg022_58:トップ画像を表示しない
jdg022_58:トップ画像を表示しない

➊ HTMLコードを表示する

①[管理メニュー]>[デザイン]>[独自レイアウト]>[HTML]を表示する

➋ トップ画像を表示するコードを削除、あるいはコメントアウトする

① トップ画像を表示するHTMLコードを削除するか、コメントアウトする(下図)

トップ画像を表示するコード:

<p id="visual">

<img  src="visual.jpg" alt="" />

</p>

 

コメントアウトするコード:

<!-- ここから、ここまでコメントとして扱われます -->

jdg022_56:トップ画像を表示するコードをコメントアウトする
jdg022_56:トップ画像を表示するコードをコメントアウトする

②[保存]ボタンをクリックする

➌ プレビューモードで確認する