画像は WordPress.com サイトを強化するための良い方法です。最も一般的な画像ファイルをサイトにアップロードできますこのガイドでは、サイトに画像を追加するためのさまざまな方法をすべてご紹介します。
画像を使ってできることは多数あるので、複数のページに分けて説明します。
- 画像のアップロード – コンピューター、Web、メディアライブラリから画像を投稿とページに取り込む方法について説明します。
- 画像設定 – 画像にタイトルまたはキャプションを追加します。常時接続リンク、画像サイズ、ファイルタイプなどの画像に関する基本情報が見つかる場所が含まれます。
- 画像の編集 – 画像が逆さまになっていたり、少し大きすぎたりしませんか ? これは、画像の切り抜き、回転、縮尺変更方法に関するガイドです。
- ギャラリーとスライドショー – 画像をギャラリーまたはスライドショーに表示します。
- 画像の最適化 – 画像を挿入する前にそのファイルサイズを小さくすると、アップロードとページの読み込みが速くなります。
- 画像アップロードのトラブルシューティング – 画像がアップロードされていませんか ? ここでは、画像を正しく機能させるためのヒントをいくつか紹介します。
- ぼやけた画像のトラブルシューティング – アップロードされた元の写真が高画質であっても、サイトで画像がぼやけて表示される理由を説明します。
- 無料の画像やその他のメディアを探す – サイトに公開ドメインまたはコピーレフト画像が必要ですか ? ここでは、それらを見つける場所についていくつかの提案を行います。
ここでは、ブロックを使用して画像を表示するさまざまな方法を示す実例をいくつか紹介します。画像はサイトで使用しているテーマに応じて表示が異なりますので、ご自分のサイトでお試しください。
画像はすべて、Pexels 無料写真ライブラリから提供されたものです。
画像ブロックは単一の画像を追加するためのものです。最小限のものですが、Coutoire テーマに例示されているように、カラムブロックと組み合わせると、クリエイティブなデザインを実現できます。
デフォルトスタイル:
![](https://en-support.files.wordpress.com/2020/08/pexels-photo-618491.jpeg?w=688)
円形スタイル:
![](https://en-support.files.wordpress.com/2020/08/pexels-photo-618491.jpeg?w=688)
カバーブロックは、全幅表示が許可されるテーマに最適です。Dalston、Alves、Maywood の各テーマには、このブロックを使用した素晴らしい例があります。
このブロックには、固定背景、グラデーションによるオーバーレイ、さまざまな表示スタイルのオプションがあります。
固定背景オン
![](https://en-support.files.wordpress.com/2020/08/pexels-photo-3992516.jpeg)
固定背景オフ
下部と上部が波形のグラデーションオーバーレイ
![](https://en-support.files.wordpress.com/2020/08/pexels-photo-2096611.jpeg)
![](https://en-support.files.wordpress.com/2020/08/pexels-photo-2096611.jpeg)
ギャラリーブロックでは、簡単に複数の写真を追加でき、自動的に魅力的な配置が行われます。
![](https://en-support.files.wordpress.com/2020/08/pexels-photo-2426226.jpeg?w=688)
![](https://en-support.files.wordpress.com/2020/08/pexels-photo-2607832.jpeg?w=688)
![](https://en-support.files.wordpress.com/2020/08/pexels-photo-1685818.jpeg?w=688)
![](https://en-support.files.wordpress.com/2020/08/pexels-photo-513799.jpeg?w=688)
![](https://en-support.files.wordpress.com/2020/08/pexels-photo-3567166.jpeg?w=688)
![](https://en-support.files.wordpress.com/2020/08/pexels-photo-2434267.jpeg?w=688)
サイドショーブロックは、ページや投稿にあまり大きなスペースを取らずに写真を共有するのに最適です。このブロックを使用した例については、Rivington テーマをご覧ください。
次の例では、自動再生オプションを使用しています。その他のすべてのオプションについては、スライドショーブロックガイドを参照してください。
メディアと文章ブロックでは、画像や動画の横にテキストを並べて配置できます。
モバイルデバイスでメディアとテキストを並べる便利なオプションがあります。
Exford テーマと Barnsbury テーマでは、このブロックをクリエイティブに使用する方法がいくつか取り上げられています。
![](https://en-support.files.wordpress.com/2020/08/pexels-photo-3278769.jpeg)
「読みたい本がこの世にないなら、あなたが書けばいい」
— Toni Morrison
![](https://en-support.files.wordpress.com/2020/08/mediatextblock_stackonmobilelarge.png)
左側は、モバイルで並べるオプションを使用した場合にコンテンツがどのように表示されるかを示しています。
デフォルトでは、メディアが上に表示されます。
![](https://en-support.files.wordpress.com/2020/08/mobile-media-n-text-1.png?w=486)
画像比較ブロックを使用すると、2つの画像を左右 (または上下) に並べ、スライダーを使って2つの画像の違いを明らかにすることができます。
![](https://en-support.files.wordpress.com/2020/05/undraw_camping_noc8.png)
![](https://en-support.files.wordpress.com/2020/05/undraw_camping_noc8-1.png)
![](https://en-support.files.wordpress.com/2020/05/undraw_camping_noc8.png)
![](https://en-support.files.wordpress.com/2020/05/undraw_camping_noc8-1.png)
タイルギャラリーブロックには角を丸くするオプションがあり、次の4つのスタイルを使用できます。
- タイルモザイク
- 円形格子
- 正方形タイル
- タイルカラム
これは、それ自体がクリエイティブな画像の共有方法であり、Rivington テーマに例示されているように、スライドショーブロックと組み合わせると最高の効果が得られます。
タイルモザイク
![](https://en-support.files.wordpress.com/2020/08/pexels-photo-1487154.jpeg)
![](https://en-support.files.wordpress.com/2020/08/pexels-photo-3527542.jpeg)
![](https://en-support.files.wordpress.com/2020/08/stained-glass-spiral-circle-pattern-161154.jpeg)
![](https://en-support.files.wordpress.com/2020/08/pexels-photo-2096611.jpeg)
![](https://en-support.files.wordpress.com/2020/08/pexels-photo-2096578.jpeg)
円形格子
![](https://en-support.files.wordpress.com/2020/08/pexels-photo-1487154.jpeg?resize=1223%2C1223)
![](https://en-support.files.wordpress.com/2020/08/pexels-photo-3527542.jpeg?resize=1253%2C1253)
![](https://en-support.files.wordpress.com/2020/08/stained-glass-spiral-circle-pattern-161154.jpeg?resize=1250%2C1250)
![](https://en-support.files.wordpress.com/2020/08/pexels-photo-2096611.jpeg?resize=1253%2C1253)
![](https://en-support.files.wordpress.com/2020/08/pexels-photo-2096578.jpeg?resize=1253%2C1253)
角を丸くするオプションを使用した正方形タイル
![](https://en-support.files.wordpress.com/2020/08/pexels-photo-1487154.jpeg?resize=1223%2C1223)
![](https://en-support.files.wordpress.com/2020/08/pexels-photo-3527542.jpeg?resize=1253%2C1253)
![](https://en-support.files.wordpress.com/2020/08/stained-glass-spiral-circle-pattern-161154.jpeg?resize=1250%2C1250)
![](https://en-support.files.wordpress.com/2020/08/pexels-photo-2096611.jpeg?resize=1253%2C1253)
![](https://en-support.files.wordpress.com/2020/08/pexels-photo-2096578.jpeg?resize=1253%2C1253)
タイルカラム
![](https://en-support.files.wordpress.com/2020/08/pexels-photo-1487154.jpeg)
![](https://en-support.files.wordpress.com/2020/08/pexels-photo-3527542.jpeg)
![](https://en-support.files.wordpress.com/2020/08/stained-glass-spiral-circle-pattern-161154.jpeg)
![](https://en-support.files.wordpress.com/2020/08/pexels-photo-2096611.jpeg)
![](https://en-support.files.wordpress.com/2020/08/pexels-photo-2096578.jpeg)
コメントを投稿するにはログインしてください。