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

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

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

WordPress基礎

画像を用意する

  • 画像は、sakura-kanban.jpg「800 × 534px」

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

画像の配置を「右」に指定して挿入する
  • 右と左のどちらに配置する場合でも、画像は文章の前に挿入します

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

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


《プレビュー》

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

画像を右に配置する
/* 記事 */
article {
  margin-bottom: 40px;
  overflow: hidden;
}

/* 本文中の画像 */
.alignright {
  float: right;
  margin-bottom: 30px;
  margin-left: 30px;
}


《プレビュー》

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


回り込みを解除する

.pagenav {
  overflow: hidden;
  margin-top: 40px;
  margin-bottom: 40px;
  clear: both;
}


《プレビュー》

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

左に配置する設定を追加する

.alignleft {
  float: left;
  margin-bottom: 30px;
  margin-right: 30px;
}
画像の配置を変更する

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

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


《プレビュー》

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

残りの記事に画像を挿入する

f:id:webmaster-web:20160710225459p:plain f:id:webmaster-web:20160710225507p:plain

f:id:webmaster-web:20160710225517p:plain f:id:webmaster-web:20160710225524p:plain

f:id:webmaster-web:20160710225538p:plain f:id:webmaster-web:20160710225548p:plain

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

トップページから記事を確認する

f:id:webmaster-web:20160710230307p:plain f:id:webmaster-web:20160710230315p:plain f:id:webmaster-web:20160710230322p:plain