求職者支援訓練Webデザイン Webサイト制作科 白描

求職者支援訓練Webサイト制作科 補足メモ Web白描

大きな画像を記事の横幅に合わせて表示 - カスタムテーマ

大きな画像を挿入する

  • 中で挿入した画像を、「オリジナルサイズ」に置き換えてみる

f:id:web-0220:20190409093547j:plain

f:id:web-0220:20190409093921j:plain

《プレビュー》

f:id:web-0220:20190409094151j:plain

記事の横幅に画像を揃えて表示する
article img {
  border: none;
  max-width: 100%;
  height: auto;
}

《プレビュー》

f:id:web-0220:20190409094620j:plain

横幅を小さく表示
《プレビュー》

f:id:web-0220:20190409094910j:plain

画像にキャプションを挿入する

  • 画像は、sakura.jpg「800 × 534px」
キャプションを付けて画像を挿入する

f:id:web-0220:20190415000119g:plain

キャプション付きの画像を記事に揃えて表示する
  • キャプションを画像の中央に揃えて表示する
.wp-caption {
  width: 100%;
}
.wp-caption-text {
  margin: 0;
  color: #666;
  font-size: 14px;
  text-align: center;
}

《プレビュー》

f:id:web-0220:20190415000443j:plain

本文の左右に画像を挿入する

  • 画像を用意する、sakura-kanban.jpg「800 × 534px」
画像の配置を「右」に指定して挿入する
  • 右と左のどちらに配置する場合でも、画像は文章の前に挿入します

f:id:web-0220:20190415001201j:plain