読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 | フェリカテクニカルアカデミーWebサイト制作科サポートブログ

記事の本文に画像を挿入する

WordPress基礎

画像を用意する

  • 画像は、redroof.jpg「800 × 534px」

f:id:webmaster-web:20160710140152p:plain

自動生成される画像の大きさを確認する

  • ここでの大きさの変更は、アップロード済みの画像には適用されません

f:id:webmaster-web:20160710140906p:plain

f:id:webmaster-web:20160710141615p:plain

画像の挿入位置を指定する

  • 記事の編集画面を開いて、記事を開きます

f:id:webmaster-web:20160710142118p:plain

画像挿入の位置
  • ビジュアルモードで作業する
  • 改行して画像の挿入する位置にカーソルを置く

f:id:webmaster-web:20160710143409p:plain


メディアを追加

  • 「ファイルを選択」を押す

f:id:webmaster-web:20160710144138p:plain

添付ファイルの詳細

  • 「配置:中央、サイズ:中、リンク先:メディアファイル」で挿入する
  • クリックすると「800 x 534px」の画像が開きます

f:id:webmaster-web:20160710152200p:plain

f:id:webmaster-web:20160710145322p:plain

ページの表示を確認する

《プレビュー》

f:id:webmaster-web:20160710145816p:plain


画像を中央に揃えて表示する

/* 本文中の画像 */
.aligncenter {
  display: block;
  margin-top: 30px;
  margin-right: auto;
  margin-bottom: 30px;
  margin-left: auto;
}


《プレビュー》

f:id:webmaster-web:20160710150535p:plain

画像のまわりに罫線を表示しないようにする

article img {
  border: none;
}