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

画像

目次

034-1 画像の追加

ここでは、「ホーム」ページに、写真 pic_g223A(pic_g223.jpg の周りをぼかしたもの)を追加します。

➊ 画像を追加する位置にマウスを置き、[+ コンテンツを追加]をクリック

「トップ」ページで、見出しと追加した余白との間で、[+コンテンツを追加]をクリックします。

jdg034_12:画像を追加
jdg034_12:画像を追加

➋[画像]のアイコンをクリックする

jdg034_13:「画像」のアイコン
jdg034_13:「画像」のアイコン

➌[画像]の編集ツールで、[画像をアップロードする]をクリックする

jdg034_14:画像をアップロードする
jdg034_14:画像をアップロードする

❹ 掲載する写真(画像ファイル)を選択し、[開く]をクリックする

jdg034_15:画像を開く
jdg034_15:画像を開く

❺ 間もなく画像ファイルのアップロードが完了し、編集ツール内に画像が表示される

jdg034_16:画像編集ツール
jdg034_16:画像編集ツール

❻ 画像のサイズを調整し、配置を指定する。[保存]をクリックする

以上で、基本的な操作は完了で、ページに画像が追加される。

jdg034_17:画像が挿入されたページ
jdg034_17:画像が挿入されたページ

034-2 画像の削除

➊ 編集モードで、削除する画像にマウスを移動し、[削除]をクリックする

jdg034_01:削除する画像
jdg034_01:削除する画像

➋ 削除の確認メッセージに対し[はい、削除します]をクリックする

jdg034_02:削除の確認
jdg034_02:削除の確認

コンテンツは削除される。

削除したコンテンツは復元できない

削除したコンテンツは、ネット上どこにも保存されていない。従って、コンテンツを削除すると再度利用することはできない。

034-3 画像の入れ替え

➊ 入れ替える画像の上でクリックする

jdg034_03:入れ替える画像をクリック
jdg034_03:入れ替える画像をクリック

➋[画像]の編集ツールで、[画像をアップロードする]をクリックする

jdg034_04:画像をアップロードする
jdg034_04:画像をアップロードする

➌[開く]ダイアログで、入れ替える画像ファイルをクリックし、[開く]を押す

ここでは、素材集画像加工前フォルダーにある DSC02529.JPG を選択する。あるいは、a002_011979_m.jpg も候補の一つだ。

jdg034_05:画像ファイルを開く
jdg034_05:画像ファイルを開く

❹ 画像ファイルのアップロードが間もなく完了し、画像が表示される

jdg034_06:アップロードされた画像
jdg034_06:アップロードされた画像

❺[キャプションと代替テキスト]をクリックする

❻[キャプション]、[代替テキスト]を入力する

キャプションは、写真やイラストに添える説明文、代替テキストは画像の代わりとなる説明文です。

 

キャプションは「どんな写真なのか」という説明でもいいですし、ちょっとしたコメントで写真の説明に味を添えるのもいいと思います。

jdg034_07:キャプションと代替テキスト
jdg034_07:キャプションと代替テキスト

キャプションは絶対必要か…?

キャプションは写真にプラスして説明できるのが便利なのですが、どんな画像にもキャプションをつけたらいいかというと、そうではありません。

たとえば、挿絵的に入れているイメージ画像にまでキャプションを付けると、「情報がありすぎて」本当に見てほしい写真やイラストが目立たなくなってしまいます。「この画像にはしっかり説明文を入れたほうが伝わりやすいだろうな」というところに入れましょう。

代替テキストとは…?

代替テキストは、何らかの理由により画像を表示できなかったときに「代わりに表示する文字」(alt テキスト)となる。通常は代替テキストが表示されることはない。代替テキストは、目の不自由な方が音声読み上げソフトを使用してホームページを参照するときの「画像の説明文」としても利用される。

❼[保存]をクリックして、画像の入れ替えを完了する

jdg034_08:画像入れ替え完了
jdg034_08:画像入れ替え完了

画像入れ替え時のサイズ

画像を入れ替える時、オリジナル画像の幅を維持する。入れ替える新画像の幅は、オリジナル画像の幅と同じにし、高さを調節する。

034-4 画像の編集 フォトエディター機能

アップロードした画像を加工できる機能です。

フィルター(色味)の変更やテキストの追加、トリミング(切り取り)などができます。

➊ 画像をクリックして編集パネルを表示する

jdg034_09:画像編集パネル
jdg034_09:画像編集パネル

➋「画像の編集」をクリックし「フォトエディター」画面を開く

jdg034_37:「フォトエディター」画面
jdg034_37:「フォトエディター」画面
機 能 概 略
効果 画像の色味を変化させることで、雰囲気を変えることができる
強調 目的に合わせて画像の見せ方を変えることができる
フレーム 写真にフレームをつけることができる
Overlays  画像に、いろいろな形状を重ねることができる
方向 画像の向きを変えたり、反転させることができまる
切り抜き 画像を好きなサイズに切り抜くことができる
Color 画像の彩度や色温度などを変更することができる
シャープ シャープな印象に補正をしたり、逆にボケさせたり調整ができる
フォーカス 焦点を当てたい場所だけを残し、周りをぼかしたような加工ができる
Vignet

円状で焦点を当てた周りに、光と影をつけることができる

テキスト 画像に文字を重ねることができる

➌「フレーム」を追加した例

jdg034_38:フレームの例
jdg034_38:フレームの例

フォトエディター機能詳細

Jimdo社のワンポイント講座サイト、フォトエディター機能を使いこなそうを参照する

034-5 画像の拡大表示

➊ 編集ツールで[クリックして拡大させる]アイコンをクリックする

Jdg034_10:画像拡大表示
Jdg034_10:画像拡大表示

➋[プレビュー]モードで、画像をクリックする

➌ 画像が拡大表示される

jdg034_11:拡大表示
jdg034_11:拡大表示

❹[拡大表示の終了]をクリックすると、通常のページに戻る

拡大表示では、画像にリンクは設定できない

拡大表示をONにすると、写真に設定したリンクは自動的に無効化される。

拡大表示を解除するには…?

核再表示を解除する時は、再度[クリックして拡大]アイコンをクリックし、[保存]を押す。