ホームページをもっとよくする!Jimdoワンポイント講座

ホームページをもっとよくする!Jimdoワンポイント講座

第30回目「 画像機能を使いこなそう! 」

せっかく作ったホームページ、一人でも多くの人に見て、読んでもらいたいですよね。しかし「思うように表現できない」「うまく伝わらない」そんなケースが多いようです。このコラムでは、ホームページ作りに役立つ「ちょっとしたコツ」をご紹介いたします。
第30回目は「画像機能を使いこなそう!」です。それでは、スタート!

笑顔アリーナ

キャプション・・・・・・?代替テキスト・・・・・?ん~・・・


ルドルフ

ルドルフくん、ブツブツとひとり言が聞こえたけど、大丈夫?


笑顔アリーナ

あ、アリーナちゃーん!今、ホームページの編集作業をしているんだけど、画像を編集するときに出てくる「キャプションと代替テキスト」ってなあに?


ルドルフ

ルドルフくん、知らずに画像機能を使っていたのね。


笑顔アリーナ

う、うん・・・また詳しく教えてくれる・・・?


ルドルフ

もちろんよ!画像機能について一から教えるわね!


【画像機能を使いこなそう!】

 

Jimdoを操作する中で、「画像」機能は非常によく使われる機能の一つではないかと思います。写真を一枚添えるだけで、内容が伝わりやすくなったりしますよね。一枚だけじゃなく、複数アップロードしたり、文章の横に配置したり、いくつかの機能がありますので、使い分けや活用方法について詳しく解説します。

Jimdoで画像をアップロードできる機能には、「画像」「画像付き文章」「フォトギャラリー」「背景」「ロゴ、ヘッダー画像」などがありますが、本コラムでは「画像」「画像付き文章」にフォーカスしながら、活用方法も合わせてご紹介します。

 

▼画像アップロード機能が新しくなりました。

(1)新しくなった画像アップロード機能を使ってみよう

 

Jimdoの画像アップロードが、「ドラッグ&ドロップ」に対応しました。使ってみましょう!

 

1)「コンテンツを追加」から「フォトギャラリー」を選択します。

 

2)「ここへ画像をドラッグ」と表示されます。

 

3)画像をドラッグアンドドロップで追加することができます。

 

4)画像がアップロードされました。

 

ドラッグアンドドロップを使用せず、従来通りアップロードすることもできます。

 

パソコンに保存されている画像を選んで、掲載します。

ドラッグアンドドロップの機能は、現時点で「フォトギャラリー」と「商品カタログ」(ネットショップ機能)で使用することができます。随時、他の画像アップロード機能にも対応予定です。

 

(2)画像の基本機能を覚えておこう

 

画像をアップロードした後の基本機能を覚えておこう

 

1)コンテンツを追加から「画像」を選択します。

 

2)アップロードする画面が表示されますので、画像を選択します。

3)画像がアップロードされました。各ボタンの機能を覚えておきましょう。

 

■画像アップロード機能一覧

①フォトエディター アップロードした画像を編集・加工することができます。
※別の回で詳しく解説する予定です。
②拡大 アップロードした画像を拡大することができます。
③縮小 アップロードした画像を縮小することができます。
④ページに合わせる ページの幅に合わせたサイズに変更することができます。
⑤左揃え 画像をページの左端に配置します。
⑥中央揃え 画像をページの真ん中に配置します。
⑦右揃え 画像をページの右端に配置します。
⑧クリックして拡大させる 閲覧者が画像をクリックしたときに、拡大表示するアクションを付けることができます。
⑨画像にリンク アップロードした画像にリンクを設定することができます。
⑩リンクを削除 画像に設定したリンクを解除することができます。
⑪キャプションと代替テキスト 画像にキャプション(写真の説明)や代替テキストを挿入することができます。
⑫Pinterestでのシェアを許可する Pinterest(ピンタレスト)で画像をシェアすることを許可する場合は、クリックします。

Pinterest(ピンタレスト)とは?

Pinterest(ピンタレスト)は、画像に特化した画像共有サービスです。ネット上で見つけた画像をコルクボードにピン止めし、「好きなファッション」「ステキな景色」「人気の画像」などカテゴリーごとに分けて表示させることができます。

https://www.pinterest.com/

 

▼画像サイズの変更方法について

画像サイズは「+」「-」ボタンで変更できる他、アップロードした画像の周辺に表示される、青く丸いボタンをドラッグすることでも行えます。一気に大きく(小さく)したい場合や、微妙な大きさに調整したい場合に活用しましょう。

 

▼キャプションと代替テキストについて

「⑫キャプションと代替テキスト」をクリックすると、以下のような画面が表示されます。

①キャプション アップロードした画像の下に、小さい文字で説明を入れることができます。
②代替テキスト アップロードした画像が何らかの原因で表示されなかったときに、代わりに表示するテキストのことです。

代替テキストは、alt属性とも呼ばれ、視覚障害者が音声ブラウザを使用するときに、読み上げるための文章にもなります。この部分は、できるだけ画像を表す文言を入れておくことをおすめします。

 

1.正常にアップロードした画像が表示されている状態
2.代替テキストなしの画像が表示されていない状態(何の画像が本来表示されるのかわからなくなります)
3.代替テキストありの画像が表示されていない状態(何の画像が本来表示されるのかがわかります)

Jimdoにアップロードできる画像ファイルの種類と容量

●アップロードできるファイルの種類:png, jpg または gif形式

●アップロードできる画像の容量:JimdoFree:10MB / JimdoProおよびJimdoBusiness:100MBまで

 

(3)「画像付き文章」を使ってみよう

 

「画像付き文章」は、画像の横に文章を並べて配置することができる機能です。

 

1)「コンテンツを追加」で「画像付き文章」をクリックします。

 

2)「画像」機能と同様にアップロードします。

 

3)画像がアップロードされました。

 

4)拡大・縮小、リンク等は「画像」機能とほぼ同じですが、「画像付き文章」にのみ備わっている機能がありますので、覚えておきましょう!

①左揃え 画像が左側、文章が右側に配置されます。(通常はこの状態になっています)
②右揃え 画像と文章の位置を逆にしたいときに使います。このボタンをクリックすると、画像が右側、文章が左側に配置されます。

【左揃えに設定した例】

【右揃えに設定した例】


 

(4)画像機能を使いこなそう!

 

画像をアップロードしたときの基本的な使い方について解説してきましたが、覚えておくと更に得するコツをご紹介します。

 

キャプションと代替テキストを設定しよう

 

画像アップロード画面にある「キャプション」と「代替テキスト」は、以下のように使用します。

 

1)画像をアップロードした後、「キャプションと代替テキスト」ボタンをクリックします。

 

2)以下のような画面が表示されます。

 

①キャプションには何を入れる?

画像の下に小さな文字で説明文を入れることができる機能です。こちらに入力した文字列は、以下のように表示されます。ちょっとした写真の説明や補足をしたいときに便利ですね。

 

②代替テキストには何を入れる?

代替テキストは、何らかの不具合で画像が表示されない時に、ここに入力した文字列が画像のかわり表示される他、視覚障害者が音声ブラウザを使用するときに、読み上げるための文章にもなります。

何の画像が設置されているかを説明する文字列を、入れておくことをおすすめします。

 

 

たくさん写真を掲載して作品集を作りたい!そんな時は「フォトギャラリー」

 

「画像」や「画像付き文章」は、一枚しかアップロードできませんが、写真をたくさん並べて表示したいときもありますよね。そんな時には、フォトギャラリー機能を使うと便利です。

 

【フォトギャラリー:縦並びパターンの例】

【フォトギャラリー:スライダーの例】


※フォトギャラリーには他に横並びのパターン、タイルパターンがあります。

フォトギャラリー機能の詳細については、第9回目で解説していますので、参考にしてくださいね。

第9回目 「フォトギャラリーを使ってみよう」

http://portal-jp.jimdo.com/study/one-point/vol9/

 

 

画像にリンクを貼ってバナーのように使ってみよう

 

画像機能の「リンク」ボタンを使うと、画像にリンクを貼ることができます。バナーのように使用できますので、ぜひ活用してみてください。

 

サイト内のページにリンクを貼りたい場合

 

別なサイトへのリンクを貼りたい場合やメール送信用として使いたい場合

 

画像にリンクを設置しました。画像をクリックすると別のページにジャンプします。

Jimdoワンポイント講座1

Jimdoワンポイント講座2

Jimdoワンポイント講座3


 

 

「画像付き文章」とカラム機能を使ったときの違いについて

 

カラム機能を使用すると、画像の横に文章を並べることができます。「画像付き文章」と見かけは似ていますが、以下のような違いがありますので、覚えておきましょう。

 

▼「画像付き文章」を使用しています

「画像付き文章」を使うと、文字が多くなった時に、画像の下に文字が回り込むスタイルになります。

▼「カラム」を使って画像と文章を並べました

「カラム」を使って画像と文章を並べると、お互い独立したエリアの中に項目が設置されるため、文字が増えても回り込みしません。


 

好みに合わせて使い分けてくださいね。

 

輝くルドルフ

アリーナちゃん、ありがとう!


ウインクアリーナ

ふふふふふふ。良かったわ、ルドルフくん。


まとめ

「画像機能を使いこなそう!」はいかがでしたか?画像をアップロードする機能が新しくなって驚いた方もいるかも知れませんね。今回ご紹介した中で、「キャプションと代替テキスト」については、ご存じないユーザーさんも多いので、ぜひこれを機に覚えておいてください!


ルドルフの小言

泣くルドルフ

ホームページを良くしていくのってなかなか難しいよね。

詳しい人に相談できるといいんだけど・・・


ウインクアリーナ

そんな時はJimdoCafeがオススメよ!

JimdoCafeのことは、ここのページを見てみて!

▶︎▶︎ Jimdoユーザーの駆け込み寺「JimdoCafe」